Google的代码高亮-code-prettify

前不久发现，在wordpress中贴代码的时候，发现code标签并没有意料中的好使用，在贴代码的时候没有高亮真的是一件无法忍受的事情。
正巧，两周前听过同事Eason的一个关于Markdown的分享，他提到过google的一个代码高亮工具，于是今天就准备瞧瞧。

Code-prettify的使用很简单，只用把相关的JS和css文件嵌入到你的网页中就行了。你可以选择去官网上把最新的文件Download下来，放在服务器上，也可以选择远程加载
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

PS：我猜想的话应该在很多代理服务器上有缓存，还能实时更新，放在整个页面的底部加载应该是个不错的选择。

万事俱备了，加载好文件后想使用Code-prettify就是非常简单的事情了。以下有部分是从官网FAQ中摘抄下来的。。。

<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
    "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
    "xhtml", "xml", "xsl".
</pre>

由此可见，当你想使用代码高亮时，只需要用pre标签把代码块包含进去，然后加上class="prettyprint"属性就行了。工具支持的语言有很多,大部分C家族的语言，js，html都是支持的。如果你想指定语言类型，就在pre标签加上id属性，譬如这样：<pre class="prettyprint" id="python" </pre> 这就代表着按照python的语法进行渲染，是不是很炫酷啊。

但是这工具还是有很多不足的地方，或者是我功力不够，没有找到定制的方法。
首先，它是默认黑底白字的，这样很不友好。如果我博客的背景是黑色的话，那么看上去就有问题，大家应该想得到的。
PS：不过似乎在css文件中可以自定义，有空了去找找，学习一下
另外，它没有自动支持显示行号的功能。看了下FAQ里面，它给我们提供了这样一个解决办法：
效果如下：

1:print "helloworld!" 这个不是代码区域
2:print "This is line 2"

具体标签实现如下：

<span class="nocode">1:</span>print "helloworld" <span class="nocode">这个不是代码区域</span>

<span class="nocode">2:</span> print "This is line 2"

可见带有nocode的span标签可以把内容标注为不是代码，这样就不会进入到代码高亮的逻辑判断之中去了。可是真要这样一行行的敲，确实挺麻烦的。

尽管如此，Code-prettify还是有很多人用，想必是有它的独到之处，大家不妨一试。有问题可以去官网上的讨论区翻一翻，会有收获的。
写着写着我就不禁想到了在博客园和csdn里面用到的代码高亮控件，应该很不错的样子，文章发完了就去看一下。