syntaxhighlighter 使用配置参数详解代码高亮纯JS

最新推荐文章于 2024-08-10 08:35:27 发布

bndxgae

最新推荐文章于 2024-08-10 08:35:27 发布

阅读量1.9k

点赞数

文章标签： javascript stylesheet class delphi xhtml c#

syntaxhighlighter 使用配置参数详解代码高亮纯JS

2008-09-26 20:33

将你要高亮显示的代码放在 pre 或 textarea 中

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

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

class选项允许你单独配置文本块。

nogutter     将不会显示行号。
nocontrols     将不会在顶部显示控制器。
collapse     将默认折叠代码。
firstline[value]     行计数开始值。默认值是 1
showcolumns     将在第一行显示行列。

这些选项和别名放置在一起，使用冒号 : 字符分隔。

<pre name=" code" class=" html:nocontrols:firstline[10]">
... some code here ...
</pre>

语言     别名
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

在页面最后添加JS和CSS引用    JS有很多，若是语言固定的话，只要引入 shCore 和 shBrushXml(相应) 的JS文件就行了
<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');//这里的 ‘code’ 为上面放置代码的容器
</script>

    * SyntaxHighlighter－HighlightAll 方法

这是一个全局函数，它找出网页上所有的代码块，将他们转换成高亮的代码块。
参数

function dp.SyntaxHighlighter.HighlightAll(name, [showGutter], [showControls],
[collapseAll], [firstLine], [showColumns])

name         必要     <pre> 和 <textarea> 元素使用的名称。
showGutter     可选     打开或关闭所有处理的代码块的行号。（默认为 true）
showControls     可选     打开或关闭所有处理的 <pre> 的控制器。（默认为 true）
collapseAll     可选     打开或关闭所有处理的 <pre> 的折叠。如果 showControls 是 false 或被交换了，这个值将被忽略。（默认为 false）
firstLine     可选     允许指定行号开始的第一行。当你想指明代码块在文件的哪个相对位置时有用。（默认为 1）
showColumns     可选     将在第一行显示行列。（默认为 false）

所有传到 HighlightAll 调用的值将重载配置的对应选项.

下载地址：
http://code.google.com/p/syntaxhighlighter/

附一个小例子说一下 textarea 和 pre 的区别

<html>
<head>
<title>高亮测试</title>

    <link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"/>
    <script language="javascript" src="Scripts/shCore.js"></script>
    <script language="javascript" src="Scripts/shBrushXml.js"></script>
</head>
<body>



<textarea name="code" class="xml" rows="15" cols="100">
程序源代码放在这儿afds
dp.SyntaxHighlighter.HighlightAll('code');
dp.SyntaxHighlighter.HighlightAll('code2');
请注译掉这二句查看效果,注意 textarea 和 pre 的分别。pre中的《号需要转译，要不然就原样输出了,在高亮代码没有生效的情况下。

    <h1>adsfadfadf</h1>
    -------------------
<h1>adsfadfadf</h1>
</textarea>

<pre name="code2" class="xml" rows="15" cols="100">
程序源代码放在这儿afds
dp.SyntaxHighlighter.HighlightAll('code');
dp.SyntaxHighlighter.HighlightAll('code2');

    <h1>adsfadfadf</h1>
    -------------------
<h1>adsfadfadf</h1>

</pre>

<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
dp.SyntaxHighlighter.HighlightAll('code2');
</script>

</body>
</html>