但是我的博客后台发布文章时采用的是百度的Ueditor富文本编辑器,突然想起好像Ueditor编辑器同样有代码片段高亮功能。
于是回过头去看Ueditor编辑器的文档,发现还真有代码片段高亮功能,并且使用非常简单,几行代码,简单两步,复制粘贴一下就可以了。
这个参数很关键,如果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>
温馨提示:以上示例代码引入资源的路径需要替换成你自己资源的路径。
最后我们来查看一下前端代码片段高亮的效果,如下图所示:
怎么样?是不是很简单?如果你也遇到类似的问题,赶紧用起来吧!