Ueditor + HighLightJs实现代码块高亮

发布者 milleros - 3 年前

百度Ueditor

Ueditor是百度的一款富文本编辑器，目前在国内大多数网站都会使用到它，而今天我们就来看看，像我们这种三句不离代码的码农对于代码高亮来说是再基本不过的功能了，那么何为代码高亮呢？

普通代码显示举例一段html代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Milleros的官方网站</title>

    </head>

    <body>

        <p>欢迎来到milleros的官方网站</p>

    </body>

</html>



这是一段普通的未加任何修饰的html代码段，像这样的代码存在于网页上，我相信如果是我，我连看的勇气都没有。

高亮代码显示还是上面那段代码，但是现在加上高亮功能

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Milleros的官方网站</title>
        </head>
        <body>
            <p>欢迎来到milleros的官方网站</p>
        </body>
    </html>

可以看到上面的代码的可读性变高了许多。

如何使用使用方法很简单，当我们使用Ueditor编辑文章时可以在插入代码时点击Ueditor工具栏上的

snipaste_20170528_123657.png

来选择对应的语言，如果工具栏没有这个选项的话就说明您的编辑器没有默认配置这个功能，这个时候您需要对Ueditor的配置文件ueditor.config.js进行相应功能的配置。选择对应语言之后Ueditor编辑器内会出现专门用于放置代码块的pre标签

snipaste_20170528_124333.png



接着需要在我们需要渲染代码文章的页面引入两个文件

样式文件：

<link rel="stylesheet" type="text/css" href="/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">

脚本文件：

<script type="text/javascript" src="/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>

激活高亮：

当上述文件均被引入之后，需要在页面js内写入下面的代码来执行代码高亮

SyntaxHighlighter.all();
            提示：代码高亮的执行需要在DOM加载完之后再执行，也就是需要执行代码高亮的代码已经被渲染到页面上之后再执行代码高亮。

代码高亮主题官方主题分类对于这种视觉上优化的功能，没有主题切换肯定是不“人道”的，百度Ueditor使用的代码高亮工具是第三方的SyntaxHighlighter高亮工具，从它的官网可以看到官方提供了自己的主题

    snipaste_20170528_124928.png

官方主题使用
    官方对于主题的应用，显然也考虑到了简单易用的原则；对于上述的主题样式我们可以使用

<link type="text/css" rel="Stylesheet" href="PATH/Styles/shThemeDjango.css"/>

    来更换对应的主题文件。

主题文件
    对于我们使用的Ueditor，因为是使用第三方库的原因，可能会存在主题文件不完整的问题存在，像楼主使用的是nodejs版的Ueditor，而内置的主题文件只有默认样式，所以我们需要把缺失的主题文件放到对应的文件夹内。具体的位置需要大家自己去看下 Ueditor的目录结构。

Tags:

前端

Ueditor + HighLightJs实现代码块高亮

标签纵览