使用SyntaxHighlighter實現(xiàn)HTML高亮顯示代碼的方法
更新時間:2010年02月04日 15:55:30 作者:
syntaxhighlighter是一個小開源項目,它可以在網(wǎng)頁中對各種程序源代碼語法進行加亮顯示。
http://chabaoo.cn/jiaoben/15599.html
syntaxhighlighter是一個小開源項目,它可以在網(wǎng)頁中對各種程序源代碼語法進行加亮顯示。支持當前流行的各種編程語言:
C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML
使用方法:
1、假設網(wǎng)頁文件test.htm存放在一個目錄,則將dp.SyntaxHighlighter解壓縮到該目錄下的子目錄,假設為images
2、在網(wǎng)頁的<head></head>之間插入以下代碼:
<link type="text/css" rel="stylesheet" href="images/Styles/SyntaxHighlighter.css"></link>
3、在網(wǎng)頁要顯示程序源代碼的地方插入以下代碼(其中的class="js"表示以js語法顯示源代碼,其他可設定的class值分別為
c#、css、c、delphi、java、js、php、python、ruby、sql、vb、xml):
<textarea name="code" class="js" rows="15" cols="100">
//程序源代碼放在這兒
</textarea>
4、在網(wǎng)頁尾部的</body>之前插入以下代碼:
<script class="javascript" src="images/Scripts/shCore.js"></script>
<script class="javascript" src="images/Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="images/Scripts/shBrushPhp.js"></script>
<script class="javascript" src="images/Scripts/shBrushJScript.js"></script>
<script class="javascript" src="images/Scripts/shBrushJava.js"></script>
<script class="javascript" src="images/Scripts/shBrushVb.js"></script>
<script class="javascript" src="images/Scripts/shBrushSql.js"></script>
<script class="javascript" src="images/Scripts/shBrushXml.js"></script>
<script class="javascript" src="images/Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="images/Scripts/shBrushPython.js"></script>
<script class="javascript" src="images/Scripts/shBrushRuby.js"></script>
<script class="javascript" src="images/Scripts/shBrushCss.js"></script>
<script class="javascript" src="images/Scripts/shBrushCpp.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
syntaxhighlighter是一個小開源項目,它可以在網(wǎng)頁中對各種程序源代碼語法進行加亮顯示。支持當前流行的各種編程語言:
C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML
使用方法:
1、假設網(wǎng)頁文件test.htm存放在一個目錄,則將dp.SyntaxHighlighter解壓縮到該目錄下的子目錄,假設為images
2、在網(wǎng)頁的<head></head>之間插入以下代碼:
復制代碼 代碼如下:
<link type="text/css" rel="stylesheet" href="images/Styles/SyntaxHighlighter.css"></link>
3、在網(wǎng)頁要顯示程序源代碼的地方插入以下代碼(其中的class="js"表示以js語法顯示源代碼,其他可設定的class值分別為
c#、css、c、delphi、java、js、php、python、ruby、sql、vb、xml):
復制代碼 代碼如下:
<textarea name="code" class="js" rows="15" cols="100">
//程序源代碼放在這兒
</textarea>
4、在網(wǎng)頁尾部的</body>之前插入以下代碼:
復制代碼 代碼如下:
<script class="javascript" src="images/Scripts/shCore.js"></script>
<script class="javascript" src="images/Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="images/Scripts/shBrushPhp.js"></script>
<script class="javascript" src="images/Scripts/shBrushJScript.js"></script>
<script class="javascript" src="images/Scripts/shBrushJava.js"></script>
<script class="javascript" src="images/Scripts/shBrushVb.js"></script>
<script class="javascript" src="images/Scripts/shBrushSql.js"></script>
<script class="javascript" src="images/Scripts/shBrushXml.js"></script>
<script class="javascript" src="images/Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="images/Scripts/shBrushPython.js"></script>
<script class="javascript" src="images/Scripts/shBrushRuby.js"></script>
<script class="javascript" src="images/Scripts/shBrushCss.js"></script>
<script class="javascript" src="images/Scripts/shBrushCpp.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
您可能感興趣的文章:
- SyntaxHighlighter 去掉右側滾動條的方法
- 防止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轉SyntaxHighlighter與Mysql正則表達式實現(xiàn)分析
- FCKeditor 和 SyntaxHighlighter 代碼高亮插件的整合
- SyntaxHighlighter 語法高亮插件的使用教程
- FCKEditor SyntaxHighlighter整合實現(xiàn)代碼高亮顯示
- SyntaxHighlighter代碼加色使用方法
- syntaxhighlighter 使用方法
- 關于實現(xiàn)代碼語法標亮 dp.SyntaxHighlighter
- SyntaxHighlighter?Autoloader(自動加載)最優(yōu)方式
相關文章
js實現(xiàn)input密碼框提示信息的方法(附html5實現(xiàn)方法)
這篇文章主要介紹了js實現(xiàn)input密碼框提示信息的方法,涉及JavaScript頁面元素的獲取,屬性判斷及樣式設置等技巧,并附帶html5的相關實現(xiàn)方法,需要的朋友可以參考下2016-01-01javaScript中一些常見的數(shù)據(jù)類型檢查校驗
最近在面試的時候又被問到JS中檢查校驗數(shù)據(jù)類型的方法,所以這篇文章主要給大家介紹了關于javaScript中一些常見的數(shù)據(jù)類型檢查校驗的相關資料,需要的朋友可以參考下2022-05-05JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法
這篇文章主要介紹了JavaScript中停止執(zhí)行setInterval和setTimeout事件的方法,本文給出操作實例代碼和語法介紹,需要的朋友可以參考下2015-05-05