一直以来都是用的wp-codebox插件用来显示代码高亮,但是这个插件的使用过于麻烦。

你是不是每次在HTML模式下插入<pre>再返回到可视化模式时,代码总会被打乱,像<>这种标签会被替换成&lt、&gt。

Laycher 我的方法就是每次都是文字图片在可视化模式下编辑成功后,再转到HTML模式下,手动插入<pre lang="css"></pre>这样的代码。然后点击发布,千万不能再转回可视化,这样的做法导致的结果就是每次文章发布后,都要 重复性检查几次,以防止出现代码错误的现象,或者文章排版问题。

这个现象不止在wp-codebox这个插件出现,比如:

SyntaxHighlighter Evolved,使用标签为语言封堵标签,比如[php]php code here[/php],CSS语言[css]CSS code here[/css]。更多语言支持请参考官方说明

Code Colorer,该插件使用<code>标准标签,也使用自家的<cc>非标准标签。代码格式,[cc lang="lang"]code here[/cc]或<code lang="lang">code here</cc>。

WP-Syntax,也是使用<pre>标签加上语言格式封堵代码区域,兼容性也很好。

其他的我也不多介绍,这方面的插件很多,不过它们的共同点就是总是要在HTML模式下手动输入代码,如果再转回可视化模式的话,代码就会错乱。

现在好了,发现了一个好的插件,插件名为:syntax-highlighter-with-add-button-in-editor。

现在的版本是2.0.2,该插件是基于syntax-highlighter开发的,解决了后台插入代码的繁琐性。安装这个插件后,后台编辑文章的地方,就会弹出一个syntax highlighter ++编辑框,用于插入代码,具体如下图所示:

在这个编辑框中输入你要插入的代码,然后选择你的代码的语言,点OK,就可以直接插入上方的编辑框中。不用再转到HTML模式下编写了!

插入效果如下(由于换用wp-codebox++,所以只能图片的形式。):

代码高亮效果展示

插件下载地址:syntax-highlighter-with-add-button-in-editor

>> 若为原创,转载请注明: 转载自Laycher's Blog

>> 本文链接地址: 简单方便的代码高亮插件推荐(编辑方便)

>> 订阅本站: http://feed.feedsky.com/laycher