2010年10月16日星期六

[转载]让Blogspot支持语法高亮


让Blogspot支持语法高亮

语法高亮支持,几乎成了所有和计算机沾那么一点边的博主所必须的功能了。不过Blogger默认没有语法高亮支持。虽然如此,要加入语法高亮支持却并不困难。这主要得益于Blogger强大的模版编辑功能。

对Blogger的奉承话我就不多说了,开始讲解方法:

1. 下载语法高亮包(到这里)。

2. 下载并解压缩,我下载的版本是2.1.364,里面有三个目录:scripts,styles和src。

3. 把scripts里面的js文件上传到某个托管站。如果你和我一样穷的没有网站空间,你可以上传到Google Sites(Google Sites不支持外链,不过你可以上传到DropBox中)。其中最重要的文件是:shCore.js。其他都是各种语言的语法支持文件。你可以选择自己常用的上传。shLagacy.js可以不用上传。这个文件主要用来支持旧版高亮配置语法的。另外可以顺道把scripts里的clipboard.swf也上传了。

4. 上传styles里面的代码主题到托管空间。主要上传shCore.css,所有png文件和你想使用的主题文件。你想使用默认主题,上传:shThemeDefault.css就可以了。在上传shCore.css之前还需要做一件事,把191行,202行,207行,219行里的xxx.png,换成完整的图片地址,如下:
1#... {
2    ...
3    background-image:url('http://dl.dropbox.com/u/169xxxx/syntax_highlighter/magnifier.png')!important;
4    ...
5}
6/*其他类似*/

5. 打开博客后台,访问“Design” - “Edit HTML”,在<head>标签内加入下面的代码:
1<linkhref="http://dl.dropbox.com/u/169xxxx/syntax_highlighter/shCore.css"rel="stylesheet" type="text/css"></link>
2<linkhref="http://dl.dropbox.com/u/169xxxx/syntax_highlighter/shThemeDefault.css"rel="stylesheet" type="text/css"></link>
3<script language="javascript"src="http://dl.dropbox.com/u/169xxxx/syntax_highlighter/shCore.js">
4</script>
5<script language="javascript"src="http:/dl.dropbox.com/u/169xxxx/syntax_highlighter/shBrushJScript.js">
6</script>
在做出任何修改前,最好先备份默认模版,以防出错。

6.在</body>标签之前加入下面代码:
1<script type="text/javascript">
2    SyntaxHighlighter.config.bloggerMode = true;
3    SyntaxHighlighter.config.clipboardSwf = 'http://dl.dropbox.com/u/169xxxx/syntax_highlighter/clipboard.swf';
4    SyntaxHighlighter.all()
5</script>

7. 保存模版。
在撰写Blog的时候,可以这样:
<pre class="brush: js">
  alert('Hello world.');
  //Whatever code here
</pre>
会生成:
1alert('Hello world.');
2  //Whatever code here

关于语法高亮的安装和使用的更多详情,请参考项目wiki。额外参考:这里

update: 经过实践才发现Google Sites不支持外链。Orz,所以换成Dropbox了,测试似乎没有问题。请将文中的dropbox链接换成你自己的。