SyntaxHighlighter－完美的语法高亮器

作者：vkvi译 来源：ITPOW（原创） 日期：2008-3-24

SyntaxHighlighter 是一款非常好的语法高亮器，它支持多种语言。它不像一般的语法高亮器在复制时将行号也一同复制，并且 SyntaxHighlighter 使用非常简单。

使用

放置代码

将你的代码放置在页面的 <pre> 标签间。设置 name 属性为 code ，并且将 class 属性设置为你想使用的语言别名中的一种。

<pre name="code" class="c-sharp">
... some code here ...
</pre>

注意：一个需要特别注意的是三角开括号 <。在任何情况下，它必须被替换成 HTML 中等价的 &lt;。如果没有这样做不会打乱页面，但可能会打乱源代码的显示。

<pre> 的另一种选择是使用 <textarea> 标签。那种情况下就没有 < 字符的问题。其主要问题是如果某种原因 JavaScript 不能工作（比如在 RSS 源中），它看起来就不如 <pre> 标签那么好。 

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

扩展配置

这里可以传递一些配置选项到代码块。通过冒号分隔参数。 

<pre name="code" class="html:collapse">
... some code here ...
</pre>

让它工作起来

最后，要让所有的东西在你的网页上适当地展现出来，你必须添加 JavaScript 到页面。 

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

这里你可以把 js 文件夹下的所有 .js 文件都引入，以便可以高亮多种语言。另外要说明，下载的压缩包中，这些 .js 文件可能不位于 js 文件夹下，而位于 Scripts 文件夹下。译者注。

最理想的结果，将上述代码放在页面的最后面。进入 HighlightAll 了解函数的更多内容。

下载

本地下载 SyntaxHighlighter v1.5.1。

原文

http://code.google.com/p/syntaxhighlighter/

相关文章