如何在html中實現代碼高亮語法着色

論壇上有學友問起來怎樣在網頁中實現代碼的這種效果？

開始誤以爲是如何在網頁中實現上邊的編程，解釋後才知道

“想問的是怎樣實現圖片中那樣，在網頁裏實現插入的各種源程序代碼的高亮顯示。”

其實這就是用syntaxhighlighter 實現的代碼高亮語法着色

這裏找了一下硬盤以前存的資料。分享如下

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

syntaxhighlighter

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

目前的最新版本是 syntaxhighlighter2.1.364，具體怎麼用大家可以下個zip包用瀏覽器一打開就知道了，這裏摘錄如下

<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>

<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>

<script type="text/javascript">
    SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
    SyntaxHighlighter.all();
</script>


<pre class="brush: c-sharp;">
function test() : String
{
    return 10;
}
</pre>

 

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

注意這個版本代碼裏沒有demo，參考調用如下：

<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">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

<pre name="code" class="c-sharp">
... 這裏寫c#代碼 ...
</pre>

 

附說明：

如果網頁的html，css，js等等連基本的都看不懂的話，不要這麼急着學這些旁門左道的； 互聯網的的信息多，太多了的時候對初學者就是海量垃圾，本來5分鐘搞定的資料 可能初學者在網上用了5小時。

這也是爲什麼我一直建議 學習的人一定要找個面對面的老師，不要自學的原因之一，