google-code-prettify 使用心得

google-code-prettify, 是一个由 google 公司开源的代码美化JS库。 作用是在HTML页面上美化代码,实现语法高亮效果。

效果示例

使用Java代码演示。效果如下:

package demo;

public class Demo {

  public static void main(String[] args) {
    System.out.println("Hello World! ");  
  }

}

看起来,效果还不错! 接下来介绍如何实现。

下载源代码

源码托管地址: https://github.com/google/code-prettify

下载地址: https://github.com/google/code-prettify/releases

编译源码

编译源码之前, 修改 run_prettify.js 文件里的 LOADER_BASE_URL 变量。

// 修改前。
var LOADER_BASE_URL = 'https://google-code-prettify.googlecode.com/svn/loader';

这个 LOADER_BASE_URL 是加载相关CSS样式表和美化不同编程语言的JS脚本文件的路径地址。 在国内, googlecode.com 域名是访问不了的(需要翻墙才行)。这就需要修改成自己的JS库托管地址了。

// 修改后(服务器上托管 google-code-prettify 的路径)。
var LOADER_BASE_URL = '/javascripts/google-code-prettify';

改完之后,使用 make 命令编译源码,生成 distrib 文件夹。 里面包含 google-code-prettify 文件夹。

  • 进入 google-code-prettify 文件夹;
  • 创建 skins 文件夹,将 styles/sunburst.css 复制到 skins 文件夹里;
  • 一切准备就绪,将 google-code-prettify 文件夹复制到服务器上托管吧!

如何使用

在HTML文件中引入JS库文件,并指定主题样式表 sunburst 。可选步骤,个人感觉这个主题比较美观。

<script src="/javascripts/google-code-prettify/run_prettify.js?skin=sunburst"></script>

在代码块里加入 prettify 样式并指定相关编程语言的样式 lang-java

<pre class="prettify lang-java">
System.out.println("Hello World!");
</pre>

显示效果

System.out.println("Hello World!");

注意事项

  • 检查,JS库文件和CSS文件在服务器上 /javascripts/google-code-prettify 路径中 (或者自定义的路径)。
  • 检查,在路径 skins 文件夹里,包含 sunburst.css 样式文件。