|
<link type="text/css" href="http://www.jb51.net/article/lib/SyntaxHighlighter/Styles/SyntaxHighlighter.css" />
<script src="http://www.jb51.net/article/lib/SyntaxHighlighter/Scripts/shCore.js"></script>
<script src="http://www.jb51.net/article/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");
};
之后,刷新下页面,你就会发现,代码已经被着上了相应的颜色了
======================
将你要高亮显示的代码放在 pre 或 textarea 中
复制代码 代码如下:
<pre>
... some code here ...
</pre>
<textarea cols="60" rows="10">
... some code here ...
</textarea>
class选项允许你单独配置文本块。
nogutter 将不会显示行号。
nocontrols 将不会在顶部显示控制器。
collapse 将默认折叠代码。
firstline[value] 行计数开始值。默认值是 1
showcolumns 将在第一行显示行列。
这些选项和别名放置在一起，使用冒号 : 字符分隔。
复制代码 代码如下:
<pre>
... 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" href="http://www.jb51.net/article/css/SyntaxHighlighter.css"></link>
<script language="javascript" src="http://www.jb51.net/article/js/shCore.js"></script>
<script language="javascript" src="http://www.jb51.net/article/js/shBrushCSharp.js"></script>
<script language="javascript" src="http://www.jb51.net/article/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 调用的值将重载配置的对应选项.
下载地址：
附一个小例子说一下 textarea 和 pre 的区别
复制代码 代码如下:
<html>
<head>
<title>高亮测试</title>
<link type="text/css" href="http://www.jb51.net/article/Styles/SyntaxHighlighter.css"/>
<script language="javascript" src="http://www.jb51.net/article/Scripts/shCore.js"></script>
<script language="javascript" src="http://www.jb51.net/article/Scripts/shBrushXml.js"></script>
</head>
<body>
<textarea rows="15" cols="100">
程序源代码放在这儿afds
dp.SyntaxHighlighter.HighlightAll('code');
dp.SyntaxHighlighter.HighlightAll('code2');
请注译掉这二句查看效果,注意 textarea 和 pre 的分别。pre中的 《 号需要转译，要不然就原样输出了,在高亮代码没有生效的情况下。
<h1>adsfadfadf</h1>
-------------------
<h1>adsfadfadf</h1>
</textarea>
<pre rows="15" cols="100">
程序源代码放在这儿afds
dp.SyntaxHighlighter.HighlightAll('code');
dp.SyntaxHighlighter.HighlightAll('code2');
<h1>adsfadfadf</h1>
-------------------
<h1>adsfadfadf</h1>
</pre>
<script>
dp.SyntaxHighlighter.HighlightAll('code');
dp.SyntaxHighlighter.HighlightAll('code2');
</script>
</body>
</html>
（编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
