google-code-prettify 代码高亮的使用

2012年3月19日 发表评论 阅读评论

 

google-code-prettify是一款非常轻量的语法高亮js库,用来对各种页面上的源码进行语法着色。压缩后的代码才17K ,很小,对于喜欢精简的人来说
prettify是最适合不过的了。在google的各种文档中 还有google code中都能看到它的身影。其项目主页为http://code.google.com/p/google-code-prettify/

其项目主页提供的用法和效果如下:

 安装使用

  1. 下载 文件
  2. 在你的文件中包含这儿的脚本和样式表(你要保证这儿的 css 和 js 文件按在你的服务器上, 并且调整在 scriptlink标签中的路径)

    <link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>
  3. 添加onload="prettyPrint()" 到你的文件的 body 标签中.
  4. 修改样式表,使用你自己喜欢的颜色.

使用方法

<pre class="prettyprint">...</pre><code class="prettyprint">...</code> 中间放上代码片段,它就会自动被美化了.

使用前效果

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
  // will not interfere with embedded tags.
}

使用后效果:

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
  // will not interfere with embedded tags.
}

修改默认主题方式:

        如果你不喜欢默认的效果,还可以使用下其另外的主题,官方也提供了几个,具体见页面:http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html修改也很简单将prettify.css文件的内容修改为几个主题代码里的内容就行了,如默认的内容是:http://code.google.com/p/google-code-prettify/source/browse/trunk/src/prettify.css

 

从该下载页面下载的源代码程序里的文件似乎多了点(里面提供了一些用法demo和高亮调用的js代码)。因为js和css代码我也看不懂,所以里面的内容也不加评论和说明。第三方编辑器kindeditor-4.0.5里使用的高亮代码也是prettify,里面只用到了google-code-prettify项目里的两个文件:prettify.css和prettify.js,而其又增加了一个code.js文件用来定义各种语言高效的类型。显然这种方法也可以实现prettify代码高亮的调用。因此看来,想在自己的站点上使用代码简单高效高亮的,可以直接用google-code-prettify去实现,也可以通过使用kindeditor编缉器(kindeditor编缉器也是一个不错的中文编辑器,目前开源中国使用的就是该编辑器)。




本站的发展离不开您的资助,金额随意,欢迎来赏!

You can donate through PayPal.
My paypal id: itybku@139.com
Paypal page: https://www.paypal.me/361way

分类: 开源软件 标签:
  1. 本文目前尚无任何评论.