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

前端开发后台使用百度编辑器ueditor如何在前台显示代码高亮已关闭评论字数 577阅读1分55秒
摘要

百度编辑器ueditor可以说是现在网站后台主力的输入编辑器,而且百度编辑器后台也自带代码语言的功能。下面就来说一下,后台使用百度编辑器,前台如何显示代码高亮。

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

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

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

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

下面就来说一下,后台使用百度编辑器,前台如何显示代码高亮。文章源自国强极客生活-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

    文章源自国强极客生活-https://tagqwl.com/5734.html文章源自国强极客生活-https://tagqwl.com/5734.html
    我的微信
    有任何问题请与我直接联系(备注:国强极客生活)
    weinxin
    我的微信
    我的微信公众号
    关注【国强极客生活】微信公众号,及时获取内容更新
    weinxin
    我的公众号
    • 百度编辑器
    • 代码高亮