代码高亮插件Crayon Syntax Highlighter与SyntaxHighlighter试用记录

       我不喜欢kindeditor带的代码高亮显示效果,背景黑乎乎的,一点美感都没有。为了摒除kindeditor的代码显示效果,我甚至想过在写文章时里用代码的截图来替代kindeditor的代码显示,当然这只是个想法而已,在插件这么丰富的年代,还用代码截图,那不是贻笑大方吗?

1. SyntaxHighlighter试用结果:与WPJAM 七牛镜像存储冲突

         经过一番搜索,发现SyntaxHighlighter的评价不错,显示效果也强于kindeditor的代码显示效果,决定立即试用。安装并启用后,我按照该插件的说明开始找了一篇有代码的博文开始做实验。

        kindeditor的代码高亮显示效果如下:

KindeitorEffect

         按照SyntaxHighlighter的使用说明,我在HTML代码编辑页面将kindeditor用于包含代码的标签<pre class=”prettyprint lang-js”></pre>修改为[code lang=”js”][/code],然后更新博文,本应显示代码的地方变成了这个样子:

SyntaxHighlighterConfilict

        起初,我以为该插件的默认设置无效果或者我更换标签的方式不对,但我搜索了很多相关资料,未见有资料显示该插件需要特殊设置,而且更换标签的方式与我理解的方式一致。那为什么大家都认为好用的SyntaxHighlighter在我这里就不好用了呢?会不会这个插件与我所安装的某个插件冲突呢?

经过排查,SyntaxHighlighter与WPJAM 七牛镜像存储冲突,只要停用WPJAM 七牛镜像存储,代码就可以正常显示。

SyntaxHighlighter

我用了七牛云来存储图片,所以七牛的插件我是必须要用的,那只能舍弃SyntaxHighlighter。

2.Crayon Syntax Highlighter效果极好,而且无需手更更换标签

天涯何处无插件?我继续寻找,有站长推荐Crayon Syntax Highlighter,看该插件的效果也非常贴合我的审美观。谨慎起见,我找到该插件看了一下它的详细介绍。该插件不仅评分高,下载量大,并且最近在1月前有更新过,说明插件作者还一直在维护,值得一试。

安装并启用后,刷新文章页,效果让我十分惊喜:该插件无需任何手动操作,我原来的代码部分已经更换了令人心情愉悦的新颜。

Crayon Syntax Highlighter effect

这个插件的效果我非常喜欢,强烈推荐。另外大家可以看到Crayon Syntax Highlighter代码显示界面右上角还有6个小图标,这几个小图标的设计也十分贴心哦,这里按找从左到右的顺序简单介绍一下它们的用途:

切换显示行编号:选择是否显示行编号;

纯文本显示代码:选择是否用纯文本显示代码;

切换自动换行:选择自动换行时,代码会自动换行至适合页面的宽度,无需滚动条来显示;

展开代码:将用滚动条显示的代码完全展开;

复制:全选代码,等待复制或粘贴动作;

在新窗口中显示代码:新开一个浏览器窗口以当前格式来显示代码。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Fork me on GitHub