如何在html中实现代码高亮语法着色

论坛上有学友问起来怎样在网页中实现代码的这种效果？

开始误以为是如何在网页中实现上边的编程，解释后才知道

“想问的是怎样实现图片中那样，在网页里实现插入的各种源程序代码的高亮显示。”

其实这就是用syntaxhighlighter 实现的代码高亮语法着色

这里找了一下硬盘以前存的资料。分享如下

------------------------------------------------------------

syntaxhighlighter

官方网址：http://alexgorbatchev.com/wiki/SyntaxHighlighter

目前的最新版本是 syntaxhighlighter2.1.364，具体怎么用大家可以下个zip包用浏览器一打开就知道了，这里摘录如下

Code:

1. <script type="text/javascript" src="scripts/shCore.js"></script>  
2. <script type="text/javascript" src="scripts/shBrushCSharp.js"></script>  
3.   
4. <link type="text/css" rel="stylesheet" href="styles/shCore.css"/>  
5. <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>  
6.   
7. <script type="text/javascript">  
8.     SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';   
9.     SyntaxHighlighter.all();   
10. </script>  
11.   
12.   
13. <pre class="brush: c-sharp;">  
14. function test() : String   
15. {   
16.     return 10;   
17. }   
18. </pre>  

 

网上能找到最多的是 1.5版本 网址：http://code.google.com/p/syntaxhighlighter/（我这正用的fckeditor的就是1.5的插件）

注意这个版本代码里没有demo，参考调用如下：

Code:

1. <link type="text/css" rel="stylesheet" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>    
2. <script language="javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script>    
3. <script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>    
4.   
5. <script language="javascript">    
6. window.onload = function () {    
7. dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';    
8. dp.SyntaxHighlighter.HighlightAll('code');    
9. }    
10. </script>    
11.   
12. <pre name="code" class="c-sharp">    
13. ... 这里写c#代码 ...    
14. </pre>   

 

附说明：

如果网页的html，css，js等等连基本的都看不懂的话，不要这么急着学这些旁门左道的； 互联网的的信息多，太多了的时候对初学者就是海量垃圾，本来5分钟搞定的资料 可能初学者在网上用了5小时。

这也是为什么我一直建议 学习的人一定要找个面对面的老师，不要自学的原因之一，