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

前端开发评论3字数 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
    我的微信
    添加我的微信,有任何问题请与我直接联系(备注:国强极客生活)
    • 全部本人精心整理制作,希望大家多多支持。
    • 转载请务必保留本文链接:https://tagqwl.com/5734.html
    匿名

    发表评论

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: