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

 

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

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

 安装使用

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

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

<p style="text-indent:2em;">
    <strong>使用方法</strong>
</p>
<p style="text-indent:2em;">
    在 <tt><pre class="prettyprint">...</pre></tt> 或 <tt><code class="prettyprint">...</code></tt> 中间放上代码片段,它就会自动被美化了.
</p>
<p style="text-indent:2em;" align="left">
    <strong>使用前效果</strong>
</p>
<p style="text-indent:2em;">
    class Voila {<br />

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.
}
    </p><p style="text-indent:2em;">
        <strong>修改默认主题方式:</strong>
    </p>

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


        &nbsp;

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

发表回复

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