|
下载地址：
或
演示地址：
使用方法：
1、假设网页文件test.htm存放在一个目录，则将dp.SyntaxHighlighter解压缩到该目录下的子目录，假设为images
2、在网页的<head></head>之间插入以下代码：
<link type="text/css" href="http://www.jb51.net/article/images/Styles/SyntaxHighlighter.css"></link>
3、在网页要显示程序源代码的地方插入以下代码（其中的class="js"表示以js语法显示源代码，其他可设定的class值分别为c#、css、c、delphi、java、js、php、python、ruby、sql、vb、xml）：
复制代码 代码如下:
<textarea rows="15" cols="100">
程序源代码放在这儿
</textarea>
4、在网页尾部的</body>之前插入以下代码：
复制代码 代码如下:
<html>
<head>
<title>测试</title>
<link type="text/css" href="http://www.jb51.net/article/Styles/SyntaxHighlighter.css"></link>
</head>
<body>
<textarea rows="15" cols="100">
public class a{
}
</textarea>
</body>
<script src="http://www.jb51.net/article/Scripts/shCore.js"></script>
<script src="http://www.jb51.net/article/Scripts/shBrushCSharp.js"></script>
<script src="http://www.jb51.net/article/Scripts/shBrushPhp.js"></script>
<script src="http://www.jb51.net/article/Scripts/shBrushJScript.js"></script>
<script src="http://www.jb51.net/article/Scripts/shBrushJava.js"></script>
<script src="http://www.jb51.net/article/Scripts/shBrushVb.js"></script>
<script src="http://www.jb51.net/article/Scripts/shBrushSql.js"></script>
<script src="http://www.jb51.net/article/Scripts/shBrushXml.js"></script>
<script src="http://www.jb51.net/article/Scripts/shBrushDelphi.js"></script>
<script src="http://www.jb51.net/article/Scripts/shBrushPython.js"></script>
<script src="http://www.jb51.net/article/Scripts/shBrushRuby.js"></script>
<script src="http://www.jb51.net/article/Scripts/shBrushCss.js"></script>
<script src="http://www.jb51.net/article/Scripts/shBrushCpp.js"></script>
<script>
dp.SyntaxHighlighter.ClipboardSwf ='Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</html>
SyntaxHighlighter 是Google Code 上的一个开源项目，主要用于给网页上的代码着色，使用十分方便，效果也不错，而且几乎支持常见的所有语言。
安装使用方法：
1. 首先在页面上添加如下代码（假设下载后的SyntaxHighlighter放在SyntaxHighlighter目录下面，注意目录结构）：
复制代码 代码如下:
<link type="text/css" href="http://www.jb51.net/article/SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="http://www.jb51.net/article/SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="http://www.jb51.net/article/SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="http://www.jb51.net/article/SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript">
window.onload = function ()
{
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>
官方的安装中没有window.onload，我想这个还是需要的，毕竟，页面加载的时候我就需要给代码着色。
2. 使用方法如下：
方法一：使用pre
复制代码 代码如下:
<pre>
... some code here ...
</pre>
方法二：使用textarea
复制代码 代码如下:
<textarea cols="60" rows="10">
... some code here ...
</textarea>
另外，这里还有一些高级特性的设置方法可供参考，诸如代码折叠等。
我在互动wiki 上安装成功，安装方法如上，第一步的修改代码放到doc.php文件的最后即可，以后编辑wiki的时候直接使用html模式即可按照第二步的方法给代码着色。
PS：CSDN的blog系统上使用的也是这个插件:>
=============================
第一步：增加样式包含
<link type=”text/css” rel=”stylesheet” href=http://www.jb51.net/article/”Styles/SyntaxHighlighter.css”></link>
第二步：增加代码
复制代码 代码如下:
<textarea name=”code” class=”php”>
代码放在这里
</textarea>
这里的class指的是语言有c,c#,vb,java,php,ruby,js,css,sql…
第三步包含所需要的js
复制代码 代码如下:
<script language=”javascript” src=http://www.jb51.net/article/”Scripts/shCore.js”></script>
<script language=”javascript” src=http://www.jb51.net/article/”Scripts/shBrushPhp.js”></script>(包含对应语言的文件)
<script language=”javascript”>
dp.SyntaxHighlighter.ClipboardSwf = ‘Scripts/clipboard.swf';// 复制代码要用到
dp.SyntaxHighlighter.HighlightAll('code');// 这里对应的就是上面的name
</script>
====================================
1.首先下载SyntaxHighlighter.
2.解压到SyntaxHighlighter目录中.
3.建立HTML文件:
复制代码 代码如下:
<pre>
...Ruby代码...
</pre>
可以应用在pre和textarea两种HTML标签内,name为code,class为要着色的语言,现在支持C, C#, CSS, Delphi, Java, JScript, Php, Python, Ruby, Sql, VB, XML这些语言.
4.加入所需的CSS和JS文件:
复制代码 代码如下: （编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
