百城学院
活到老 学到老

Ueditor中使用SyntaxHighlighter实现代码高亮

经验总结 xiangbaicheng 2019-03-03 571 2

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点。本文要介绍的就是使用UEditor中的SyntaxHighlighter来实现代码高亮效果。

第一步:下载UEditor代码到自己的项目中,下载地址

第二步:在需要实现代码高亮的页面中引入UEditor自带的SyntaxHighlighter中css和js文件,具体路径如下:

2019-03-01_235329.jpg

<link rel="stylesheet" type="text/css" href="__SOURCES__/public/widget/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css"/>
<script src="__SOURCES__/public/widget/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>

第三步:增加JS脚本,使得高亮生效:

<script>
    SyntaxHighlighter.all();
</script>

第四步:检测高亮效果

2019-03-02_000309.jpg

**特别说明**

1、在移动端实现代码高亮时,默认效果是自动换行的,如果需要强制不换行,则修改shCoreDefault.css文件中的CSS样式:

.syntaxhighlighter td.code .line {
    padding: 0 1em!important;	
}

修改为:

.syntaxhighlighter td.code .line {
    padding: 0 1em!important;
    white-space: nowrap;
}

此时得到的效果是代码没有自动换行,但是不能左右滑动;通过CSS样式设置也是无效的。此时需要修改shCore.js中的代码:

var tmp = element.firstChild.firstChild;

修改为:

var tmp = element.firstChild;

2、如果使用异步加载的内容需要实现代码高亮时,上述的脚本将无效,此时可以使用下面的脚本:

SyntaxHighlighter.highlight();

**最终效果**

PC端:

image.png

移动端:

2019-03-02_002723.jpg

文章分类: 前端开发 JavaScript
文章来源: 百城学院
上一篇:第一个Django项目:数据库 下一篇:Python配置虚拟环境
xiangbaicheng
文章
130
访问
5
粉丝
2
点赞
22
文章分类