使用 SyntaxHighlighter 实现代码高亮
如果我们已经将 FCKeditor 和 SyntaxHighlighter 代码高亮插件整合好（参看http://www.cnblogs.com/catprayer/archive/2010/04/24/1719521.html），让我们来看看如何用 SyntaxHighlighter 来实现代码高亮。
1，下载源码包：syntaxhighlighter_2.1.364.zip （http://alexgorbatchev.com/wiki/SyntaxHighlighter），需要注意的是，这个源码包和上面的插件是不一样的。
解压后：
如果以前没有接触过的话，可以参考 "test.html" 来看一下是如何实现的。
2，可以使用 jQuery 及 官方插件 jQuery UI 来做一个好看的页面。
codeHeightLight.php :
1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
2 < html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en" >
3 < head >
4 < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
5 < title > SyntaxHighlighter Build Test Page </ title >
6 <!-- jQuery + UI -->
7 < script type ="text/javascript" src ="jQuery/jquery-1.4.2.min.js" ></ script >
8 < script type ="text/javascript" src ="jQuery/mess_load_help_min.js" ></ script >
9 < link type ="text/css" rel ="stylesheet" href ="jQuerycssbase/common.css" />
10 < link type ="text/css" rel ="stylesheet" href ="jQuerycssbase/jquery.ui.all.css" />
11 <!-- -FCKeditor -->
12 < script type ="text/javascript" src ="fckeditor/fckeditor.js" ></ script >
13 < script >
14 $( function (){
15 // 加载编辑器
16 var oFCKeditor = new FCKeditor( ' textarea ' , 700 , 350 , ' Basic ' );
17 oFCKeditor.ReplaceTextarea();
18 // 进行处理
19 $dialogdiv = $( " #dialogdiv " );
20 $myform = $( " #myform " );
21 $dialogdiv.dialog({
22 title: " 代码高亮生成器 " ,
23 height: 467 ,
24 width: 740 ,
25 autoOpen: true ,
26 resizable: false ,
27 modal: true ,
28 buttons: {
29 ' 生成高亮代码 ' : function (){
30 $myform.submit();
31 $( this ).dialog( ' close ' );
32 },
33 ' 关闭窗口 ' : function (){
34 window.self.close();
35 // 关闭浏览器窗口
36 }
37 }
38 });
39 });
40 </ script >
41 </ head >
42
43 < body >
44 < div id ="dialogdiv" >
45 < form id ="myform" action ="checkCode.php" method ="POST" >
46 < textarea id ="textarea" name ="textarea" ></ textarea >
47 </ form >
48 </ div >
49 </ body >
50 </ html >
checkCode.php:
1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
2 < html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en" >
3 < head >
4 < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />
5 < title > SyntaxHighlighter Build Test Page </ title >
6 <!-- SyntaxHighlighter -->
7 < script type ="text/javascript" src ="scripts/shCore.js" ></ script >
8 < script type ="text/javascript" src ="scripts/shBrushBash.js" ></ script >
9 < script type ="text/javascript" src ="scripts/shBrushCpp.js" ></ script >
10 < script type ="text/javascript" src ="scripts/shBrushCSharp.js" ></ script >
11 < script type ="text/javascript" src ="scripts/shBrushCss.js" ></ script >
12 < script type ="text/javascript" src ="scripts/shBrushDelphi.js" ></ script >
13 < script type ="text/javascript" src ="scripts/shBrushDiff.js" ></ script >
14 < script type ="text/javascript" src ="scripts/shBrushGroovy.js" ></ script >
15 < script type ="text/javascript" src ="scripts/shBrushJava.js" ></ script >
16 < script type ="text/javascript" src ="scripts/shBrushJScript.js" ></ script >
17 < script type ="text/javascript" src ="scripts/shBrushPhp.js" ></ script >
18 < script type ="text/javascript" src ="scripts/shBrushPlain.js" ></ script >
19 < script type ="text/javascript" src ="scripts/shBrushPython.js" ></ script >
20 < script type ="text/javascript" src ="scripts/shBrushRuby.js" ></ script >
21 < script type ="text/javascript" src ="scripts/shBrushScala.js" ></ script >
22 < script type ="text/javascript" src ="scripts/shBrushSql.js" ></ script >
23 < script type ="text/javascript" src ="scripts/shBrushVb.js" ></ script >
24 < script type ="text/javascript" src ="scripts/shBrushXml.js" ></ script >
25 < link type ="text/css" rel ="stylesheet" href ="styles/shCore.css" />
26 < link type ="text/css" rel ="stylesheet" href ="styles/shThemeDefault.css" />
27 < script type ="text/javascript" >
28 SyntaxHighlighter.config.clipboardSwf = ' scripts/clipboard.swf ' ;
29 SyntaxHighlighter.all();
30 </ script >
31 </ head >
32 < body >
33 < div id ="content" >
34 <?
35 echo stripslashes($_POST['textarea']); //去除转义符（因为 PHP 会自动转义）
36 ?>
37 </ div >
38 </ body >
39 </ html >
实现效果：
弹出框：
点击
：
写入代码：
最终效果：
效果不错吧？！哈哈~~ 快试试吧！！！！！！
让我们再来看看它到底是怎么处理高亮的：
看看它的 InnerHtml：
< DIV id =highlighter_654624 class ="syntaxhighlighter jscript" >
< DIV class ="bar " >
< DIV class =toolbar >< A style ="WIDTH: 16px; HEIGHT: 16px" class ="item viewSource" title ="view source" href ="#viewSource" highlighterId ="highlighter_654624" commandName ="viewSource" > view source </ A >
< DIV class ="item copyToClipboard" >
< OBJECT id =highlighter_654624_clipboard title ="copy to clipboard" codeBase ="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" classid =clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 width =16 height =16 type =application/x-shockwave-flash >< PARAM NAME ="_cx" VALUE ="423" >< PARAM NAME ="_cy" VALUE ="423" >< PARAM NAME ="FlashVars" VALUE ="" >< PARAM NAME ="Movie" VALUE ="scripts/clipboard.swf" >< PARAM NAME ="Src" VALUE ="scripts/clipboard.swf" >< PARAM NAME ="WMode" VALUE ="Transparent" >< PARAM NAME ="Play" VALUE ="0" >< PARAM NAME ="Loop" VALUE ="-1" >< PARAM NAME ="Quality" VALUE ="High" >< PARAM NAME ="SAlign" VALUE ="" >< PARAM NAME ="Menu" VALUE ="0" >< PARAM NAME ="Base" VALUE ="" >< PARAM NAME ="AllowScriptAccess" VALUE ="always" >< PARAM NAME ="Scale" VALUE ="ShowAll" >< PARAM NAME ="DeviceFont" VALUE ="0" >< PARAM NAME ="EmbedMovie" VALUE ="0" >< PARAM NAME ="BGColor" VALUE ="" >< PARAM NAME ="SWRemote" VALUE ="" >< PARAM NAME ="MovieData" VALUE ="" >< PARAM NAME ="SeamlessTabbing" VALUE ="1" >< PARAM NAME ="Profile" VALUE ="0" >< PARAM NAME ="ProfileAddress" VALUE ="" >< PARAM NAME ="ProfilePort" VALUE ="0" >< PARAM NAME ="AllowNetworking" VALUE ="all" >< PARAM NAME ="AllowFullScreen" VALUE ="false" ></ OBJECT ></ DIV >< A style ="WIDTH: 16px; HEIGHT: 16px" class ="item printSource" title =print href ="#printSource" highlighterId ="highlighter_654624" commandName ="printSource" > print </ A >< A style ="WIDTH: 16px; HEIGHT: 16px" class ="item about" title =? href ="#about" highlighterId ="highlighter_654624" commandName ="about" > ? </ A ></ DIV ></ DIV >
< DIV class =lines >
< DIV class ="line alt1" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 01 </ CODE ></ TD >
< TD class =content >< CODE class ="jscript plain" > $( </ CODE >< CODE class ="jscript keyword" > function </ CODE >< CODE class ="jscript plain" > (){ </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt2" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 02 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript comments" > //加载编辑器 </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt1" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 03 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript keyword" > var </ CODE > < CODE class ="jscript plain" > oFCKeditor = </ CODE >< CODE class ="jscript keyword" > new </ CODE > < CODE class ="jscript plain" > FCKeditor( </ CODE >< CODE class ="jscript string" > 'textarea' </ CODE >< CODE class ="jscript plain" > , 700, 350, </ CODE >< CODE class ="jscript string" > 'Basic' </ CODE >< CODE class ="jscript plain" > ); </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt2" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 04 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > oFCKeditor.ReplaceTextarea(); </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt1" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 05 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript comments" > //进行处理 </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt2" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 06 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > $dialogdiv = $( </ CODE >< CODE class ="jscript string" > "#dialogdiv" </ CODE >< CODE class ="jscript plain" > ); </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt1" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 07 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > $myform = $( </ CODE >< CODE class ="jscript string" > "#myform" </ CODE >< CODE class ="jscript plain" > ); </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt2" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 08 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > $dialogdiv.dialog({ </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt1" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 09 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > title: </ CODE >< CODE class ="jscript string" > "代码高亮生成器" </ CODE >< CODE class ="jscript plain" > , </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt2" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 10 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > height: 467, </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt1" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 11 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > width: 740, </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt2" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 12 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > autoOpen: </ CODE >< CODE class ="jscript keyword" > true </ CODE >< CODE class ="jscript plain" > , </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt1" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 13 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > resizable: </ CODE >< CODE class ="jscript keyword" > false </ CODE >< CODE class ="jscript plain" > , </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt2" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 14 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > modal: </ CODE >< CODE class ="jscript keyword" > true </ CODE >< CODE class ="jscript plain" > , </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt1" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 15 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > buttons: { </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt2" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 16 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript string" > '生成高亮代码' </ CODE >< CODE class ="jscript plain" > : </ CODE >< CODE class ="jscript keyword" > function </ CODE >< CODE class ="jscript plain" > (){ </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt1" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 17 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > $myform.submit(); </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt2" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 18 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > $( </ CODE >< CODE class ="jscript keyword" > this </ CODE >< CODE class ="jscript plain" > ).dialog( </ CODE >< CODE class ="jscript string" > 'close' </ CODE >< CODE class ="jscript plain" > ); </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt1" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 19 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > }, </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt2" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 20 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript string" > '关闭窗口' </ CODE >< CODE class ="jscript plain" > : </ CODE >< CODE class ="jscript keyword" > function </ CODE >< CODE class ="jscript plain" > (){ </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt1" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 21 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > window.self.close(); </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt2" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 22 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript comments" > //关闭浏览器窗口 </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt1" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 23 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > } </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt2" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 24 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > } </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt1" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 25 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > }); </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV >
< DIV class ="line alt2" >
< TABLE >
< TBODY >
< TR >
< TD class =number >< CODE > 26 </ CODE ></ TD >
< TD class =content >< CODE class =spaces > </ CODE >< CODE class ="jscript plain" > }); </ CODE ></ TD ></ TR ></ TBODY ></ TABLE ></ DIV ></ DIV ></ DIV >
< P > </ P >