2010年6月3日星期四

让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，换成完整的图片地址，如下：
#... {
    ...
    background-image: url('http://dl.dropbox.com/u/169xxxx/syntax_highlighter/magnifier.png') !important;
    ...
}
/*其他类似*/

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

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

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

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

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

没有评论:

发表评论

订阅： 博文评论 (Atom)