ueditor代码高亮配置(7)

2017年09月21日 09:22 | 2150次浏览 作者原创 版权保护

在使用百度ueditor的时候,尤其是程序员技术类的分享一段代码的时候,如果直接是文本样式很难看,强大的ueditor为我们想到了一种解决办法,就是代码高亮效果,本人感觉很美观,当然这种效果是仁者见仁的,那么如何实现ueditor代码高亮效果呢,请看下面步骤。

本案例基于ueditor1.4 以上版本,本人亲测,在1.2版本也适用。

1,初始化百度ueditor时候添加代码语言工具栏

在toolbars中添加'insertcode',预览界面效果如下

如上图所示,代码语言工具栏已经显示出来,点击它之后有目前较流行的语言格式供选择。

2,添加代码高亮后,文章内容展示界面代码高亮片段效果如下:

3,代码高亮依赖文件 shCoreDefault.css 与 shCore.js

1) ueditor依赖的文件位置,如下图

2) 在文章内容展示界面的<head></hedad>之间添加如下代码

<script type="text/javascript" src="/baidu/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" href="/baidu/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

上述代码引入文件路径调整为自己想买实际路径即可


小说《我是全球混乱的源头》
此文章本站原创,地址 https://www.vxzsk.com/206.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程