Syntaxhighlighter使用感受

最后更新于 2015 年 8 月 14 日

使用Syntaxhighlighter有两天了，版本是最新的3.0.83，按照惯例，写一写使用心得。如果想知道我为啥要用，请看为CKEditor For WordPress插件增加代码高亮功能。

有用的功能

高亮显示某些行代码引起读者注意，代码和效果如下所示

<pre class="brush: plain; highlight: 2">
1
2
3
</pre>

折叠代码，如果代码段很长，折叠一下看着更清爽，效果和代码如下所示

<pre class="brush: plain; collapse: true; toolbar:true;">
    hello there!
    This is collapsed code.
</pre>

关于工具条

如果你看过别人用这个样子的代码高亮显示，可能发现跟Sola的有点不一样，别人的有工具条。

上图所示的工具条从新版本中消失了，但确实有一项设置是开启工具条的，如下所示

<pre class="brush: php; toolbar: true;">
echo "where is the toolbar?";
</pre>

让人大跌眼镜的事就是，注意到右上角的那个绿色问号没，那个就是新版的工具条。

很多人对此失望，所以坚持使用V2版，V3版遵循的less is more的原则，把按钮删减到没有。但V3比V2多了一个功能，就是用户双击代码区域，可以全选所有代码，似乎比点工具条来的更快，这样没有工具条也不影响使用，问题是用户是否能领悟到这一层。

Stackoverflow有一个问题是iang讲这件事的，说的很全面，有兴趣的参考下

SyntaxHighlighter not showing toolbar

Syntaxhighlighter谷歌浏览器bug

Syntaxhighlighter在Chrome浏览器中会显示竖向滚动条，让代码框看起来很不美观，修复的方法是定义overflow-y属性，可以直接修改源文件，也可以在主题样式表中写，Sola选择写在主题的style.css中

.post-content .syntaxhighlighter {
	overflow-y: hidden !important;
}

源文件中使用.syntaxhighlighter和!important定义，要覆盖掉这个CSS，需要主题中的样式有更高权重，所以添加了content area的class .post-content提升权重。

如果想知道怎么修改源文件，参考这篇文章

SyntaxHighlighter and Chrome vertical scrollbar bug

除去这些小问题，Syntaxhighlighter确实非常棒。