山自高兮水自深,当尘雾消散,唯事实流传。

2008-12-27

SyntaxHighlighter实现Blog代码语法高亮无废话流程

一、Hack过程有两步:

1、下载最新的SyntaxHighLighter,压缩包内有三个文件夹(Script、Styles、Uncompressed),如果不信任陌生链接的速度,可以将文件传到自己的服务器上,需上传的文件有Script目录下的全部文件,Styles目录下的css文件,这里以http://hotspeedli.googlepages.com为例;

2、进入Blogger后台的“修改Html”,在“修改模板”的代码框内找到这句</body>,在其前面贴入代码:


<link href='http://hotspeedli.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script class="'javascript'" src="'http://hotspeedli.googlepages.com/shCore.js'/">
<script class="'javascript'" src="'http://hotspeedli.googlepages.com/shBrushPhp.js'/">
<script class="'javascript'" src="'http://hotspeedli.googlepages.com/shBrushJScript.js'/">
<script class="'javascript'" src="'http://hotspeedli.googlepages.com/shBrushSql.js'/">
<script class="'javascript'" src="'http://hotspeedli.googlepages.com/shBrushXml.js'/">
<script class="'javascript'" src="'http://hotspeedli.googlepages.com/shBrushDelphi.js'/">
<script class="'javascript'" src="'http://hotspeedli.googlepages.com/shBrushPython.js'/">
<script class="'javascript'" src="'http://hotspeedli.googlepages.com/shBrushRuby.js'/">
<script class="'javascript'" src="'http://hotspeedli.googlepages.com/shBrushCss.js'/">
<script class="'javascript'" src="'http://hotspeedli.googlepages.com/shBrushCpp.js'/">
<script class="'javascript'">
dp.SyntaxHighlighter.ClipboardSwf = 'http://hotspeedli.googlepages.com/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode(); 
dp.SyntaxHighlighter.HighlightAll('code');
</script>

将代码中的带有http://hotspeedli.googlepages.com的地址替换成自己的地址,指向正确的js和css文件路径。
这里指出我自己在操作过程中遇到的问题——完成上述操作之后,有行号和textarea效果显示,却没有代码高亮效果,原因是<link>括号内的css地址不正确,如果代码中的js和css路径没有错误,应该没有什么问题。

二、SyntaxHighLighter使用
使用方法官方有具体的开发文档,这里就不再多作唠叨,有两种包裹代码方式:
textarea包裹方式

<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>

pre包裹方式
<pre name="code" class="c-sharp">
... some code here ...
</pre>

1、pre括号内的<(&lt;)、>(&gt;)、&(&amp;)字符要转换成括号内的内容,textarea不适用于在javascript内容;
2、name的值写code就可以了,这是因为代码中的dp.SyntaxHighlighter.HighlightAll(code)是作用于所有标识了code的源码块;
3、class参数值参照列表
Language Aliases
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt

没有评论: