代码着色之SyntaxHighlighter项目(最流行的代码高亮)
|
下载地址：http://www.dreamprojections.com/syntaxhighlighter/ 使用方法： 1、假设网页文件test.htm存放在一个目录，则将dp.SyntaxHighlighter解压缩到该目录下的子目录，假设为images <link type="text/css" rel="stylesheet" href="images/Styles/SyntaxHighlighter.css"></link> 3、在网页要显示程序源代码的地方插入以下代码（其中的class="js"表示以js语法显示源代码，其他可设定的class值分别为c#、css、c、delphi、java、js、php、python、ruby、sql、vb、xml）： 复制代码 代码如下: <textarea name="code" class="js" rows="15" cols="100"> 程序源代码放在这儿 </textarea> 4、在网页尾部的</body>之前插入以下代码： 复制代码 代码如下: <html> <head> <title>测试</title> <link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link> </head> <body> <textarea name="code" class="java" rows="15" cols="100"> public class a{ } </textarea> </body> <script class="javascript" src="Scripts/shCore.js"></script> <script class="javascript" src="Scripts/shBrushCSharp.js"></script> <script class="javascript" src="Scripts/shBrushPhp.js"></script> <script class="javascript" src="Scripts/shBrushJScript.js"></script> <script class="javascript" src="Scripts/shBrushJava.js"></script> <script class="javascript" src="Scripts/shBrushVb.js"></script> <script class="javascript" src="Scripts/shBrushSql.js"></script> <script class="javascript" src="Scripts/shBrushXml.js"></script> <script class="javascript" src="Scripts/shBrushDelphi.js"></script> <script class="javascript" src="Scripts/shBrushPython.js"></script> <script class="javascript" src="Scripts/shBrushRuby.js"></script> <script class="javascript" src="Scripts/shBrushCss.js"></script> <script class="javascript" src="Scripts/shBrushCpp.js"></script> <script class="javascript"> dp.SyntaxHighlighter.ClipboardSwf ='Scripts/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script> </html> SyntaxHighlighter 是Google Code 上的一个开源项目，主要用于给网页上的代码着色，使用十分方便，效果也不错，而且几乎支持常见的所有语言。 安装使用方法： 1. 首先在页面上添加如下代码（假设下载后的SyntaxHighlighter放在SyntaxHighlighter目录下面，注意目录结构）： 复制代码 代码如下: <link type="text/css" rel="stylesheet" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link> <script language="javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script> <script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCSharp.js"></script> <script language="javascript" src="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 name="code" class="c-sharp"> ... some code here ... </pre> 方法二：使用textarea 复制代码 代码如下: <textarea name="code" class="c#" cols="60" rows="10"> ... some code here ... </textarea> 另外，这里还有一些高级特性的设置方法可供参考，诸如代码折叠等。 我在互动wiki 上安装成功，安装方法如上，第一步的修改代码放到doc.php文件的最后即可，以后编辑wiki的时候直接使用html模式即可按照第二步的方法给代码着色。 ============================= <link type=”text/css” rel=”stylesheet” href=”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=”Scripts/shCore.js”></script> <script language=”javascript” src=”Scripts/shBrushPhp.js”></script>(包含对应语言的文件) <script language=”javascript”> dp.SyntaxHighlighter.ClipboardSwf = ‘Scripts/clipboard.swf';// 复制代码要用到 dp.SyntaxHighlighter.HighlightAll('code');// 这里对应的就是上面的name </script> ==================================== 1.首先下载SyntaxHighlighter. 3.建立HTML文件: 复制代码 代码如下: <pre name="code" class="Ruby"> ...Ruby代码... </pre> 可以应用在pre和textarea两种HTML标签内,name为code,class为要着色的语言,现在支持C,C#,CSS,Delphi,Java,JScript,Php,Python,Ruby,Sql,VB,XML这些语言. 4.加入所需的CSS和JS文件: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="./lib/SyntaxHighlighter/Styles/SyntaxHighlighter.css" /> <script src="./lib/SyntaxHighlighter/Scripts/shCore.js"></script> <script src="./lib/SyntaxHighlighter/Scripts/shBrushRuby.js"></script> 这里只用了Ruby,其他的类似. 5.接下来就是在window的onload事件内,让SyntaxHighlighter工作起来. 复制代码 代码如下: window.onload = function() { 之后,刷新下页面,你就会发现,代码已经被着上了相应的颜色了 ====================== 复制代码 代码如下: <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 将不会在顶部显示控制器。 复制代码 代码如下: <pre name="code" class="html:nocontrols:firstline[10]"> ... some code here ... 语言 别名 C++ cpp,c,c++ 在页面最后添加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 方法 这是一个全局函数，它找出网页上所有的代码块，将他们转换成高亮的代码块。 name 必要 <pre> 和 <textarea> 元素使用的名称。 showGutter 可选 打开或关闭所有处理的代码块的行号。（默认为 true） 所有传到 HighlightAll 调用的值将重载配置的对应选项. 下载地址： http://code.google.com/p/syntaxhighlighter/
复制代码 代码如下: <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> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |