|  在技术加营销的道路上越走越远
温馨提示
我是弹窗内容
当前位置:首页 > 大前端开发 > 百度Ueditor富文本编辑器如何使用代码片段高亮功能?
百度Ueditor富文本编辑器如何使用代码片段高亮功能?

百度Ueditor富文本编辑器如何使用代码片段高亮功能?

日期:2022-01-25 浏览量:1206 原创作者:湖八爷
在简书,掘金,CSDN等平台创作的时候,发现Markdown编辑器有一项非常实用的功能,就是可以添加代码片段,并且前端详情页面还可以高亮显示,看起来非常的舒服,如下图所示

简书平台代码高亮功能.png


但是我的博客后台发布文章时采用的是百度的Ueditor富文本编辑器,突然想起好像Ueditor编辑器同样有代码片段高亮功能

于是回过头去看Ueditor编辑器的文档,发现还真有代码片段高亮功能,并且使用非常简单,几行代码,简单两步,复制粘贴一下就可以了。



一,首先查看一下编辑器菜单配置toolbar数组中有没有'insertcode'这个参数。

这个参数很关键,如果toolbar数组中没有这个参数的话,我们就无法在发布文章的时候添加代码片段。

配置了'insertcode'这个参数以后,Ueditor编辑器菜单栏就会出现一个“代码语言”的下拉选项,如图所示:


“代码语言”的下拉选项.png


这样我们在发布文章的时候,如果需要添加代码片段,就可以通过这个“代码语言”的下拉选项添加符合语法的代码片段。例如我们在编辑器中添加一些Html代码片段,如图所示:


在编辑器中添加一些Html代码片段.png



二,前端文章详情页代码片段高亮显示。

通过百度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>

温馨提示:以上示例代码引入资源的路径需要替换成你自己资源的路径。



最后我们来查看一下前端代码片段高亮的效果,如下图所示:


前端代码片段高亮的效果.png


怎么样?是不是很简单?如果你也遇到类似的问题,赶紧用起来吧!