百度编辑器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
我的微信
有任何问题请与我直接联系(备注:国强极客生活)

我的微信
我的微信公众号
关注【国强极客生活】微信公众号,及时获取内容更新

我的公众号