百度Ueditor富文本编辑器如何使用代码片段高亮功能？
日期：2022-01-25
浏览量：1036
在简书，掘金，CSDN等平台创作的时候，发现Markdown编辑器有一项非常实用的功能，就是可以添加代码片段，并且前端详情页面还可以高亮显示，看起来非常的舒服，如下图所示
但是我的博客后台发布文章时采用的是百度的Ueditor富文本编辑器，突然想起好像Ueditor编辑器同样有代码片段高亮功能。
于是回过头去看Ueditor编辑器的文档，发现还真有代码片段高亮功能，并且使用非常简单，几行代码，简单两步，复制粘贴一下就可以了。
一，首先查看一下编辑器菜单配置toolbar数组中有没有'insertcode'这个参数。
这个参数很关键，如果toolbar数组中没有这个参数的话，我们就无法在发布文章的时候添加代码片段。
配置了'insertcode'这个参数以后，Ueditor编辑器菜单栏就会出现一个“代码语言”的下拉选项，如图所示：
这样我们在发布文章的时候，如果需要添加代码片段，就可以通过这个“代码语言”的下拉选项添加符合语法的代码片段。例如我们在编辑器中添加一些Html代码片段，如图所示：
二，前端文章详情页代码片段高亮显示。
通过百度Ueditor的文档可知，代码片段高亮功能实际上是用到了SyntaxHighlighter这个插件，所以我们需要在文章详情页面的<head>标签中引入这个插件并完成初始化。
具体代码如下：
<link href="/static/lib/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="/static/lib/ueditor/third-party/SyntaxHighlighter/shCore.js" type="text/javascript"></script>
<script type="text/JavaScript">
$(document).ready(function () {
SyntaxHighlighter.all();
});
</script>温馨提示：以上示例代码引入资源的路径需要替换成你自己资源的路径。
最后我们来查看一下前端代码片段高亮的效果，如下图所示：
怎么样？是不是很简单？如果你也遇到类似的问题，赶紧用起来吧！
