在使用百度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
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程