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

SyntaxHighlighter

有用的功能

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

<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的有点不一样,别人的有工具条。

syntaxhighlighter的工具条

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

<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确实非常棒。

2条留言

    1. 这个是一段js脚本,如果你不写成插件的话,就需要手写一下标签,大部分wordpress高亮插件都是基于这个脚本,并且提供tinymce的插入代码按钮,装插件就用不着手写短代码了。

评论功能已关闭