SyntaxHighlighter 語法高亮插件的使用教程
更新時間:2010年02月20日 10:35:39 作者:
現(xiàn)在做it編程類信息的網(wǎng)站,提供的源碼如果能提供代碼高亮對代碼的閱讀效果會提高不少。
首先到這里下載其源碼。里面東西挺多的,我們基本上可以把它放到兩個文件夾就是。其中shCore.js與shCore.js與clipboard.swf放到j(luò)s文件夾中,shCore.css還有另一個CSS文件(隨你挑一個吧)與所有圖片放到style文件夾中。如果你想高亮html或xml代碼,那么就在js多放一個shBrushXml.js,如果要高亮javascript代碼,就要多加一個shBrushJScript.js代碼。最后就是在我們的網(wǎng)頁上引用它們。
<link type="text/css" rel="stylesheet" href="style/shCore.css"/>
<link type="text/css" rel="stylesheet" href="style/shThemeRDark.css"/>
<script src="js/shCore.js" type="text/javascript" ></script>
<script src="js/shBrushJScript.js" type="text/javascript" ></script>
<script src="js/shBrushCss.js" type="text/javascript" ></script>
<script src="js/shBrushXml.js" type="text/javascript" ></script>
然后再在頁面上新建一個script標簽,在里面添加代碼,進行配置與調(diào)用那個flash文件。
SyntaxHighlighter.config.clipboardSwf = 'js/clipboard.swf';
SyntaxHighlighter.all();
這些代碼是無需放于window.onload中的。再最后是如何使用,把要高亮的代碼放于一個pre文件中,這些代碼記得要事先處理,把<變成<,把>變成>。然后添加一個特殊的類型,brush加引號加上你們的代碼的類型。如要高亮javascript則要class="brush:javascript",高亮css則要class="brush:css"。當然成功與否還在于你是否引進相關(guān)的javascript文件(指shBrushJScript.js等)
注意,這時代碼不但只高亮了,還會多出行號與工具欄,這就要更細致的配置。它們都在那個類名上做手腳,如把行號禁止了,就要class="brush:javascript;gutter:false;"。
<pre class="brush:javascript;gutter:false;toolbar:false">
dom.ready(function(){
test("dom.ready");
});
</pre>
復制代碼 代碼如下:
<link type="text/css" rel="stylesheet" href="style/shCore.css"/>
<link type="text/css" rel="stylesheet" href="style/shThemeRDark.css"/>
<script src="js/shCore.js" type="text/javascript" ></script>
<script src="js/shBrushJScript.js" type="text/javascript" ></script>
<script src="js/shBrushCss.js" type="text/javascript" ></script>
<script src="js/shBrushXml.js" type="text/javascript" ></script>
然后再在頁面上新建一個script標簽,在里面添加代碼,進行配置與調(diào)用那個flash文件。
復制代碼 代碼如下:
SyntaxHighlighter.config.clipboardSwf = 'js/clipboard.swf';
SyntaxHighlighter.all();
這些代碼是無需放于window.onload中的。再最后是如何使用,把要高亮的代碼放于一個pre文件中,這些代碼記得要事先處理,把<變成<,把>變成>。然后添加一個特殊的類型,brush加引號加上你們的代碼的類型。如要高亮javascript則要class="brush:javascript",高亮css則要class="brush:css"。當然成功與否還在于你是否引進相關(guān)的javascript文件(指shBrushJScript.js等)
注意,這時代碼不但只高亮了,還會多出行號與工具欄,這就要更細致的配置。它們都在那個類名上做手腳,如把行號禁止了,就要class="brush:javascript;gutter:false;"。
這些參數(shù)具體可見這里
復制代碼 代碼如下:
<pre class="brush:javascript;gutter:false;toolbar:false">
dom.ready(function(){
test("dom.ready");
});
</pre>
您可能感興趣的文章:
- SyntaxHighlighter 去掉右側(cè)滾動條的方法
- 防止SyntaxHighlighter.js的代碼高亮時閃一下的解決方法
- SyntaxHighlighter自動識別并加載腳本語言
- z-blog SyntaxHighlighter 長代碼無法換行解決辦法(基于jquery)
- SyntaxHighlighter 3.0.83使用筆記
- ckeditor syntaxhighlighter代碼高亮插件配置分享
- CKEditor中加入syntaxhighlighter代碼高亮插件
- z-blog SyntaxHighlighter 長代碼無法換行解決辦法(jquery)
- 解決SyntaxHighlighter 代碼高亮不換行問題的解決方法
- FCKeditor + SyntaxHighlighter 讓代碼高亮著色插件
- 代碼著色之SyntaxHighlighter項目(最流行的代碼高亮)
- syntaxhighlighter 去掉右上角問號圖標的三種方法
- 為SyntaxHighlighter添加新語言的方法
- SyntaxHighlighter配合CKEditor插件輕松打造代碼語法著色
- SyntaxHighlighter語法高亮插件使用說明
- ckeditor syntaxhighlighter代碼高亮插件,完美修復
- coolcode轉(zhuǎn)SyntaxHighlighter與Mysql正則表達式實現(xiàn)分析
- FCKeditor 和 SyntaxHighlighter 代碼高亮插件的整合
- 使用SyntaxHighlighter實現(xiàn)HTML高亮顯示代碼的方法
- FCKEditor SyntaxHighlighter整合實現(xiàn)代碼高亮顯示
- SyntaxHighlighter代碼加色使用方法
- syntaxhighlighter 使用方法
- 關(guān)于實現(xiàn)代碼語法標亮 dp.SyntaxHighlighter
- SyntaxHighlighter?Autoloader(自動加載)最優(yōu)方式
相關(guān)文章
Ueditor和CKeditor 兩款編輯器的使用與配置方法
這篇文章主要介紹了Ueditor和CKeditor 兩款編輯器的使用與配置方法,需要的朋友可以參考下2017-03-03
javascript開發(fā)隨筆3 開發(fā)iframe富文本編輯器的一點體會
前段時間有個需求是開發(fā)富文本編輯器,這個之前隨做過,但看了需求,發(fā)現(xiàn)有些地方還需google2011-11-11
asp.net CKEditor和CKFinder的應(yīng)用
CKEditor和CKFinder在ASP.NET中的應(yīng)用,需要的朋友可以參考下。2010-01-01
當使用ckeditor控件時,需要校驗輸入內(nèi)容是否為空的一種解決辦法(轉(zhuǎn)帖)
這樣是我們寫程序中最經(jīng)常的寫法 提交之前進行驗證內(nèi)容是否為空!2011-01-01

