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

由于HTML本身并不认空格,因此网页中如果要展现程序代码通常会用<pre>标签来保留缩进、空格等格式。作为程序员的Blog,对此的需求更是高很多。单单利用<pre>标签保留代码格式还不能让代码看起来很漂亮,通常在IDE中都会有语法高亮的特性,利用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="prettyprint lang-X"> </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.prettyprint { padding: 2px; border: 1px solid #888; font-family: Courier New; font-size: 9px;}

修正auto-excerpt产生带格式的摘要

WordPress的正文通常都是显示全文,这样一来如果文章非常长的话,blog的首页的用户体验会很不好。网上有很多提到通过将index.php中的the_content改成the_excerpt来讲首页的文章内容显示为摘要的方法,但是这样的摘要要自己去写。

WordPress的plugin库里面有一个auto-excerpt的插件,可以自动将文章的前几百字截取下来作为文章的摘要。确实是方便,但是却有一个小小的问题,截取出来的文字格式全部都丢失了,包括段落、链接等等。

通过对这个插件的代码做一点小小的改动可以恢复文字的格式。在后台管理中找到这个插件——edit

function auto_excerpt($content) {
    $content = substr(strip_tags($content),0,418)." [...]";
    return $content;
}

代码中可以看到,这个插件是用strip_tags来去除正文中的所有html标签,然后截取前418个字符。其实strip_tags还有一个可选的参数,可以指定忽略掉某些标签。为了保留基本格式,可以选择在strip_tags中忽略掉p、br、a等标签恢复文字的格式。

function auto_excerpt($content) {
    $content = substr(strip_tags($content, '<p><br>'),0,418)."<br/> [...]";
    return $content;
}

如果想在缩略图中保留图片,也可以在忽略标签列表中加上<img>标签。