现在的位置: 首页 -> 前端学习 -> JS前端 -> 百度编辑器设置文章页代码高亮的效果

百度编辑器设置文章页代码高亮的效果

2017-07-08 01:21评论数 0 ⁄ 被浏览 397 views+

作为一个代码网站,代码必不可少,让代码显示的更美观一点,那就需要代码高亮效果了。如果后台用百度编辑器(ueditor)可以使用自带的SyntaxHighlighter来实现代码高亮。


只需3步


1.引入css:

<link rel="stylesheet" href="/Public/widgets/SyntaxHighlighter/shCoreDefault.css" />


2.引入js文件(js较大,建议压缩且最好放到页面底部):

<script type="text/javascript" src="/Public/widgets/SyntaxHighlighter/shCore.js"></script>


3.初始化:

<script type="text/javascript">
    SyntaxHighlighter.all(); //代码高亮
</script>


注意,请以实际路径为准。如果不清楚路径,可以在百度编辑器目录中搜索“shCore.js”。


ps:SyntaxHighlighter支持多种语言,效果不错,复制代码没有行号,且缩进比较完美。唯一不足的就是js文件太大,160kb,压缩后也有90kb,不过网站开启gzip后会好很多。

 

文章出自:http://www.daixiaorui.com/read/250.html 本站所有文章,除注明出处外皆为原创,转载请注明本文地址,版权所有。

分享到:

目前有 0 条评论  @我要评论

    您的每一个评论都是对我的一份支持

     博客二维码

    昵称 *

    邮箱 *