博客中代码语法高亮插件

Author : lovecicy

对于技术博客来说,博客中出现代码的几率还是很高的,为了方便读者阅读,需要对代码片段进行语法高亮,行数标明,美化样式。而使用wordpress的话,默认是没有这个功能的,我也没有找这方面的插件,只是介绍下目前在用的方法。使用到了stanley ng的代码,点击这里看更多。

其实方法很简单,只需要对wordpress的模板进行少量的修改即可:
首先,在外观-> 编辑页面中,选择header.php进行编辑,在

</head>

标签之前,加入<link src=”http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css” rel=’stylesheet’ type=’text/css’>,其中的src属性是样式表的URL,你也可以找其他的皮肤,stanley ng提供了bootstrap、google code、solarized等多种样式。
保存修改之后,选择footer.php进行编辑,在

</body>

标签之前加入一下HTML标记:

<script type='text/javascript'>
 prettyPrint();
 </script>

这样,准备工作就做完了,接下来要做的,就是在发文章时的工作了。
在发文章时,将插入的代码片段放在

<code></code>

<pre></pre>

标签内,在文本视图中为

<code>

<pre>

标签加上

class="pretyprint"

这个class name,如果要显示代码行数,改成

class="pretyprint linenums"

这个class name即可。
如此,发出来的文章的代码片段就像这样:

bootstrap style

bootstrap style

更多样式,请猛击这里

standard
  1. 死神的微笑 - 2013 年 7 月 19 日 1:11 下午

    WordPress语法高亮的插件还是有的。
    比如我现在正在用的SyntaxHighlighter,就不错。
    当然把google code prettify植入进去也不错。

    回复
    • lovecicy - 2013 年 7 月 19 日 2:51 下午

      WordPress的插件我没去找过,只是看到项目里有这个,顺便在自己的博客上试了试。也可以试试SyntaxHighlighter

      回复

Have your say