Google-code-prettify代码高亮

3 mins to read

这段时间一直在纠结于代码高亮与Wordpress编辑器的矛盾,然后就到处是搜索更好的代码高亮插件。 google-code-prettify是 一款非常轻量的语法高亮js库,加载了大小大约是17kb,算是比较轻量级的。使用方法也很简单。

DEMO见http://google-code-prettify.googlecode.com/svn/trunk/tests/prettify_test.html

特点

  • 工作于HTM
  • 即使代码中包含行号、链接等等,也可运行
  • 简单的API :只需加载一点JS和CSS,然后添加一个onLoad事件
  • 轻量级:绝对的小体积并不会阻碍加载页面。 可通过CSS定制样式。
  • 持所有的C类语言,Bash类语言,XML类语言。无需指定的语言。 可扩展语言支持
  • 良好的跨浏览器支持。

安装方法:

1、在你的网页上加载JS和CSS文件 2、然后在html 的body标签中添加一个onload事件 onload=”prettyPrint()” 如果你加载了JQuery,则可以添加以下代码 $(document).ready(function(){ prettyPrint(); }) 到这里,你的google-code-prettify基本可以工作了。

使用方法:

你只需要把代码放进<pre>...</pre> 或者 <code>...</code>就可以实行代码高亮了。无需你指定哪种语言就可以工作了。 当然,你也可以指定一种语言,<pre class=”prettyprint Language”>,将language 改为以下的一种语言。 “bash”, “c”, “cc”, “cpp”, “cs”, “csh”, “cyc”, “cv”, “htm”, “html”, ”java”, “js”, “m”, “mxml”, “perl”, “pl”, “pm”, “py”, “rb”, “sh”, ”xhtml”, “xml”, “xsl”

打开行号

你可以使用linenums打开行号,这里有另外一种方法打开自动行号,请参见:让Google-code-prettify显示行号

设置代码的字体

通常程序的代码都是使用等宽字体,最常见的就是Courier New字体。而google-code-prettify并没有设置代码的字体。 打开 WordPress的wp-content/plugins/code-block-enabler/prettify.css文件,找到 pre.prettyprint的定义后面加上字体的定义,改为

    pre.prettyprint { padding: 2px; border: 1px solid #888; font-family: Courier New; font-size: 9px;}

对于Wordpress用户 可以使用一个Wordpress插件Code Block Enabler实现,Code Block Enabler是基于Google-code-prettify的。

更多请见使用手册:http://google-code-prettify.googlecode.com/svn/trunk/README.html 主页:http://code.google.com/p/google-code-prettify/