SyntaxHighlighter-完美的语法高亮器

作者:vkvi译 来源:千一网络(原创) 日期: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/

你前面那位网友看了:Uri.AbsoluteUri 与 Uri.ToString() 的区别

▲▲▲嘿,欢迎转载传播本站原创文章,尽量保留来源噢。▲▲▲

文章评论
赞助商们