Google Code Pretiffy轻量级代码高亮插件

Google Code Pretiffy 是 Google 的一个用来对代码进行语法着色的 JavaScript 库,支持 C/C++, Java, Python, Ruby, PHP, VisualBasic, AWK, Bash, SQL, HTML, XML, CSS, JavaScript, Makefiles和部分Perl。code.google.com、stackoverflow.com、api.jquery.com等知名网站都在使用它

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

特点

  • 工作基于前台页面
  • 即使代码中包含行号、链接等等,也可运行。
  • 简单的API :只需加载一点JS和CSS,以及添加一个onLoad事件。
  • 轻量级:绝对的小体积并不会阻碍加载页面。 可通过CSS定制样式。
  • 通过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用户

google code prettify for wordpress

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

主页:http://code.google.com/p/google-code-prettify/

“Google Code Pretiffy轻量级代码高亮插件”的26个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注