使用SyntaxHighlighter来给代码着色

 1.首先下载SyntaxHighlighter.

 

2.解压到SyntaxHighlighter目录中.

 

3.建立HTML文件:

 

<pre name="code" class="Ruby">

 ...Ruby代码...

</pre>

 

可以应用在pre和textarea两种HTML标签内,name为code,class为要着色的语言,现在支持C, C#, CSS, Delphi, Java, JScript, Php, Python, Ruby, Sql, VB, XML这些语言.

 

4.加入所需的CSS和JS文件:

<link rel="stylesheet" type="text/css" href="./lib/SyntaxHighlighter/Styles/SyntaxHighlighter.css" />

<script src="./lib/SyntaxHighlighter/Scripts/shCore.js"></script>

<script src="./lib/SyntaxHighlighter/Scripts/shBrushRuby.js"></script>

 

这里只用了Ruby,其他的类似.

 

5.接下来就是在window的onload事件内,让SyntaxHighlighter工作起来.

window.onload = function() {

dp.SyntaxHighlighter.ClipboardSwf = './lib/SyntaxHighlighter/Scripts/clipboard.swf';

dp.SyntaxHighlighter.HighlightAll("code");

};

 

之后,刷新下页面,你就会发现,代码已经被着上了相应的颜色了.