SyntaxHighlighter代码加色使用方法

2014/04/08 13:51
阅读数 9.2K

SyntaxHighlighter是一款用于web页面的代码高亮着色工具,可以用来着色多种语言,能让你的代码在网页上以类似IDE编辑器里的样子高亮关键字,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。最早见于Yahoo的YUI,当时还属于自由软件,最近打开官方网站发现已被goolge收编。 

官网: http://about.me/alexgorbatchev 
下载地址: http://alexgorbatchev.com/SyntaxHighlighter/ 
或 http://code.google.com/p/syntaxhighlighter/ 
演示地址: http://alexgorbatchev.com/SyntaxHighlighter/manual/demo/ 

它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言:C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML 。 

具体用法:

  1. 在代码前根据代码语言的不同加上不同的[%Lang]在代码后加上[/%Lang],%Lang = 你用的语言对应的Brush aliases(具体对应罗列于下)。例如[@cpp]#include <stdio.h>[/cpp](@去掉)。

  2. 或者只用一次%Lang,[@code lang=%Lang]你的代码[/code]或者[@source lang=%Lang]你的代码[@source lang=%Lang],其中lang都可以换成language。

点击Brush name 有官方网站的详细介绍和Demo,有兴趣的童鞋可以去看看。对于技术类的博客来说,这种语法高亮插件是必不可少的。

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion cf, coldfusion shBrushColdFusion.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erl, erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js


该工具核心基于javascript,使用起来很简单: 

1、假设网页文件test.htm存放在一个目录,将dp.SyntaxHighlighter解压缩,并复制其中的Scripts文件夹和styles文件夹,确保和test.html在同一个目录下面。 
2、在网页的<head></head>之间插入以下代码: 
<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link> 
3、在网页要显示程序源代码的地方插入以下代码,若是HTML类型的话,用XML(其它的如class="js"表示以js语法显示源代码,其他可设定的class值分别为c#、css、c、elphi、java、js、php、python、ruby、sql、vb、xml): 
<textarea name="code" rows="15" cols="100"> 
程序源代码放在这儿 
</textarea> 
说明: 
name="code"是必须的,不能更改; 
class="xml"是着色的方式,即需要着色的代码的类型,根据需要进行更改。 
4、在网页尾部的</body>之前插入以下代码: 

01 <script class="javascript" src="Scripts/shCore.js"></script>
02 <script class="javascript" src="Scripts/shBrushCSharp.js"></script>
03 <script class="javascript" src="Scripts/shBrushPhp.js"></script>
04 <script class="javascript" src="Scripts/shBrushJScript.js"></script>
05 <script class="javascript" src="Scripts/shBrushJava.js"></script>
06 <script class="javascript" src="Scripts/shBrushVb.js"></script>
07 <script class="javascript" src="Scripts/shBrushSql.js"></script>
08 <script class="javascript" src="Scripts/shBrushXml.js"></script>
09 <script class="javascript" src="Scripts/shBrushDelphi.js"></script>
10 <script class="javascript" src="Scripts/shBrushPython.js"></script>
11 <script class="javascript" src="Scripts/shBrushRuby.js"></script>
12 <script class="javascript" src="Scripts/shBrushCss.js"></script>
13 <script class="javascript" src="Scripts/shBrushCpp.js"></script>
14 <script class="javascript">
15 dp.SyntaxHighlighter.HighlightAll('code');
16 </script>

一个页面里面可以包含任意多个需要着色的代码段; 
压缩包中有各种着色代码类型的着色案例,大家可以参照使用。 

1. 首先在页面上添加如下代码(假设下载后的SyntaxHighlighter放在SyntaxHighlighter目录下面,注意目录结构): 

<script language="javascript"> </script> 

官方的安装中没有window.onload,我想这个还是需要的,毕竟,页面加载的时候我就需要给代码着色。 

01 <link type="text/css" rel="stylesheet" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
02 <script language="javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script>
03 <script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
04 <script language="javascript" src="SyntaxHighlighter/Scripts/shBrushXml.js"></script>
05 <script language="javascript">
06 window.onload = function () {
07 dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
08 dp.SyntaxHighlighter.HighlightAll('code');
09 }
10 </script>

2. 使用方法如下: 

方法一:使用pre 

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

方法二:使用textarea 

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

另外,这里还有一些高级特性的设置方法可供参考,诸如代码折叠等。


展开阅读全文
打赏
1
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
1
分享
返回顶部
顶部