这段时间一直在纠结于代码高亮与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/