后台使用百度编辑器ueditor如何在前台显示代码高亮

百度编辑器ueditor可以说是现在网站后台主力的输入编辑器，而且百度编辑器后台也自带代码语言的功能。

但是我们在百度编辑器给代码设置代码语言之后，前台并没有显示对应的高亮效果文章源自国强极客生活-https://tagqwl.com/5734.html

下面就来说一下，后台使用百度编辑器，前台如何显示代码高亮。文章源自国强极客生活-https://tagqwl.com/5734.html

首先，大家下载的百度编辑器，里面是包含代码高亮的文件的，大家可以打开下面这个目录文章源自国强极客生活-https://tagqwl.com/5734.html

/ueditor/third-party/SyntaxHighlighter/

就会发现里面有两个文件文章源自国强极客生活-https://tagqwl.com/5734.html

shCore.js
shCoreDefault.css

只要把这两个文件引入前台显示页面，我的百度编辑器放在了static目录下，并且添加调用js文章源自国强极客生活-https://tagqwl.com/5734.html

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

大家只要把上面那段复制，修改js css的路径即可。文章源自国强极客生活-https://tagqwl.com/5734.html

现在就能在前台页面看到代码高亮的效果啦。文章源自国强极客生活-https://tagqwl.com/5734.html