SyntaxHighlighter?Autoloader(自動加載)最優(yōu)方式
一、SyntaxHighlighter介紹
SyntaxHighlighter是一款用于web頁面的代碼著色工具,可以用來著色多種語言,可以是HTML,CSS,Javascript,還可以是C,JAVA等編程語言。它可以在網(wǎng)頁中對各種程序源代碼語法進行加亮顯示。支持當前流行的各種編程語言:C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML。
因為使用SyntaxHighlighter的時候會使用到多種語言,一次必載入全部的語言配置文件下載的東西會比較多,所以SyntaxHighlighter提供了一個shAutoloader.js腳本。
二、使用教程
1、將下載的SyntaxHighlighter文件解壓縮,只保留里面的Scripts文件夾和styles文件夾。
2、在網(wǎng)頁的<head></head>之間引入css文件:
<link rel="stylesheet" type="text/css" href="/static/syntaxhighlighter/Styles/shCoreDefault.css"></link>
3、在網(wǎng)頁的</body>標簽前面引入js文件:
<script class="javascript" src="/static/syntaxhighlighter/Scripts/shCore.js"></script> <script class="javascript" src="/static/syntaxhighlighter/Scripts/shAutoloader.js"></script> <script class="javascript"> function path() { var args = arguments,result = []; for (var i = 0; i < args.length; i++) result.push(args[i].replace('$', '/static/syntaxhighlighter/Scripts/')); return result; } $(function() { SyntaxHighlighter.autoloader.apply(null, path( 'php $shBrushPhp.js', 'java $shBrushJava.js', 'objc obj-c $shBrushObjC.js', 'actionscript3 as3 $shBrushAS3.js', 'bash shell $shBrushBash.js', 'coldfusion cf $shBrushColdFusion.js', 'c# c-sharp csharp $shBrushCSharp.js', 'delphi pascal $shBrushDelphi.js', 'jfx javafx $shBrushJavaFX.js', 'js jscript javascript $shBrushJScript.js', 'perl pl $shBrushPerl.js', 'py python $shBrushPython.js', 'ruby rails ror rb $shBrushRuby.js', 'vb vbnet $shBrushVb.js', 'xml xhtml xslt html $shBrushXml.js' )); SyntaxHighlighter.defaults['gutter'] = true;//是否顯示代碼行數(shù) SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.defaults['auto-links'] = false; SyntaxHighlighter.defaults['quick-code'] = false; SyntaxHighlighter.all(); }) </script>
三、使用方法
一:使用pre
<pre name="code" class="php"> //這里是你需要高亮的代碼 </pre>
<div class="jb51code"><pre class="brush:py;"> //python代碼 </pre></div>
二:使用textarea
<textarea name="code" class="c#" cols="60" rows="10"> //這里是你需要高亮的代碼 </textarea>
四、高級技巧 按需加載
但文章詳細頁面經(jīng)常不會有任何代碼,所以這些js文件以及js代碼需要判斷是否執(zhí)行:
//判斷文章是否需要加載代碼高亮插件 var isCode = Model.Html.ToString().Contains( "<pre class=\"brush:" ); if (isCode){ //這里放置上面的js文件鏈接以及js代碼。 }
如果沒有使用框架可以使用下面的代碼
if($('div.jb51code').length>0){ //這里放置上面的js文件鏈接以及js代碼。 }
到此這篇關于SyntaxHighlighter Autoloader(自動加載)最優(yōu)方式的文章就介紹到這了,更多相關SyntaxHighlighter 自動加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
- 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 語法高亮插件的使用教程
- 使用SyntaxHighlighter實現(xiàn)HTML高亮顯示代碼的方法
- FCKEditor SyntaxHighlighter整合實現(xiàn)代碼高亮顯示
- SyntaxHighlighter代碼加色使用方法
- syntaxhighlighter 使用方法
- 關于實現(xiàn)代碼語法標亮 dp.SyntaxHighlighter
相關文章
瀏覽器執(zhí)行history.go(-1) FCKeditor編輯框內(nèi)顯示html源代碼的解決方法
使用FCKeditor編輯文章,出于某種原因提交失敗,此時瀏覽器執(zhí)行返回動作,F(xiàn)ckEditor編輯框內(nèi)顯示html代碼。2010-12-12使用ZeroClipboard解決跨瀏覽器復制到剪貼板的問題
Zero Clipboard 利用透明的Flash讓其漂浮在復制按鈕之上,這樣其實點擊的不是按鈕而是 Flash ,這樣將需要的內(nèi)容傳入Flash,再通過Flash的復制功能把傳入的內(nèi)容復制到剪貼板2014-06-06ajax php實現(xiàn)給fckeditor文本編輯器增加圖片刪除功能
工作需要需要fck編輯器的服務器瀏覽加個圖片刪除的功能,我們利用ajax php實現(xiàn)的有需要的朋友可以參考下2012-12-12FCK判斷內(nèi)容是否為空(如果只是去空格,那么這種方式是錯誤的)
一般來說,像input里面的值都可以通過將內(nèi)容去空格判斷是否為空,但是FCK沒那么簡單,因為當你多打幾個空格或者多打一些回車,它會自動地生成一些<p>標簽,如果再用原先去空格判斷的方法,顯然是不可取的。2010-12-12php下FCKeditor2.6.5網(wǎng)頁編輯器的使用方法
php下FCKeditor2.6.5網(wǎng)頁編輯器的使用方法,需要的朋友可以參考下。2009-12-12在kindEditor中獲取當前光標的位置索引的實現(xiàn)代碼
一直在用KindEditor,今天要用到光標的位置,然后就gg一下辦法,后來發(fā)現(xiàn)這東西的編輯區(qū)域居然是iframe里面的一個body,不是textarea/input,后來就翻開了他的代碼看,發(fā)現(xiàn)有個insertHtml2011-11-11