代潇瑞博客

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

| 点击次数:13661

作为一个代码网站,代码必不可少,让代码显示的更美观一点,那就需要代码高亮效果了。如果后台用百度编辑器(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后会好很多。

【相关推荐】

触屏版 | 电脑版

Copyright © 2013 代潇瑞博客手机版

QQ: 446673330

粤ICP备13071969号-1