# 2010-09-16  利用google-code-prettify做网页内源码的语法高亮

由于HTML本身并不认空格，因此网页中如果要展现程序代码通常会用\`\`\`\`\`标签来保留缩进、空格等格式。

作为程序员的Blog，对此的需求更是高很多。单单利用\`\`\`\`\`标签保留代码格式还不能让代码看起来很漂亮，通常在IDE中都会有语法高亮的特性，利用[google-code-prettify](http://code.google.com/p/google-code-prettify/)可以很方便的在网页中实现这一功能。

官方主页在此：<http://code.google.com/p/google-code-prettify/> 下载最新的源码之后，在网页的HEAD部分加入以下两行

```
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
```

然后在需要高亮代码的地方，将代码放在 pre 标签中。在class中lang-X的X可以是下面几种语言之一： bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl"

如果是在Wordpress中的话，可以使用Code Block Enabler这个插件。

在配置完成之后，还有一个小小的缺憾。通常程序的代码都是使用等宽字体，最常见的就是Courier New字体。而google-code-prettify并没有设置代码的字体。简单的对其css文件作一个小小的修改即可实现这一点，打开WordPress的wp-content/plugins/code-block-enabler/prettify.css文件，找到pre.prettyprint的定义后面加上字体的定义，改为：

```
<pre class="prettyprint lang-css">
pre.prettyprint { padding: 2px; border: 1px solid #888; font-family: Courier New; font-size: 9px;}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://blog.log4think.com/syntax-highlight-by-prettify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.