SyntaxHighlighter 3.0.83使用筆記
更新時間：2015年01月26日 09:14:08 投稿：hebedich
本文主要介紹了SyntaxHighlighter的配置及代碼的使用，并附上在博客園中使用SyntaxHighlighter 3.0.83的案例，非常實用，這里推薦給大家。
1、下載
SyntaxHighlighter 3.0.83 : http://alexgorbatchev.com/SyntaxHighlighter
2、配置
(1) SyntaxHighlighter解析的默認標簽，默認為pre
復制代碼 代碼如下:
SyntaxHighlighter.config.tagName="div";
(2) 去除HTML換行標記
如果您的軟件會在每行末尾添加< br /> 標記，此選項允許您忽略這些標記。
shCore.js中實現代碼為：
復制代碼 代碼如下:
if (sh.config.stripBrs == true)
str = str.replace(br, '');
SyntaxHighlighter.config.stripBrs=true;
(3) 不顯示工具條
復制代碼 代碼如下:
SyntaxHighlighter.defaults['toolbar'] = false;
3、代碼中使用
3.1 brush為必選項，其余為可選：
復制代碼 代碼如下:
<div class="brush:java;class-name:mycode;highlight:[1,3];">some java code</div>
brush取值：java/xml/sql/c/js/css等，詳見：http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
3.2 著色調用:
復制代碼 代碼如下:
SyntaxHighlighter.highlight();
或
復制代碼 代碼如下:
SyntaxHighlighter.all();
all()與highlight()區(qū)別在于all()是注冊到onload()事件中的。
4、在博客園中使用
博客園默認支持SyntaxHighlighter。代碼修改默認值（因為jQuery不支持設置!important的樣式所以需要設置cssText）：
復制代碼 代碼如下:
var sh = $(".syntaxhighlighter");
var code = sh.find("code");
var line = sh.find(".line");
var caption = sh.find("table caption");
sh.css("cssText", "width: auto !important");
code.add(line)
.add(caption)
.css("cssText", "font-size: 20px !important;white-space: nowrap !important;line-height: 1.5em !important;");
以上就是本文的全部內容了，小伙伴們對SyntaxHighlighter的使用方法是否有了新的認識呢，希望大家能夠喜歡本文。
您可能感興趣的文章:
- SyntaxHighlighter 去掉右側滾動條的方法
- 防止SyntaxHighlighter.js的代碼高亮時閃一下的解決方法
- SyntaxHighlighter自動識別并加載腳本語言
- z-blog SyntaxHighlighter 長代碼無法換行解決辦法(基于jquery)
- ckeditor syntaxhighlighter代碼高亮插件配置分享
- CKEditor中加入syntaxhighlighter代碼高亮插件
- z-blog SyntaxHighlighter 長代碼無法換行解決辦法(jquery)
- 解決SyntaxHighlighter 代碼高亮不換行問題的解決方法
- FCKeditor + SyntaxHighlighter 讓代碼高亮著色插件
- 代碼著色之SyntaxHighlighter項目(最流行的代碼高亮)
- syntaxhighlighter 去掉右上角問號圖標的三種方法
- 為SyntaxHighlighter添加新語言的方法
- SyntaxHighlighter配合CKEditor插件輕松打造代碼語法著色
- SyntaxHighlighter語法高亮插件使用說明
- ckeditor syntaxhighlighter代碼高亮插件，完美修復
- coolcode轉SyntaxHighlighter與Mysql正則表達式實現分析
- FCKeditor 和 SyntaxHighlighter 代碼高亮插件的整合
- SyntaxHighlighter 語法高亮插件的使用教程
- 使用SyntaxHighlighter實現HTML高亮顯示代碼的方法
- FCKEditor SyntaxHighlighter整合實現代碼高亮顯示
- SyntaxHighlighter代碼加色使用方法
- syntaxhighlighter 使用方法
- 關于實現代碼語法標亮 dp.SyntaxHighlighter
- SyntaxHighlighter?Autoloader(自動加載)最優(yōu)方式
相關文章
這篇文章主要介紹了微信小程序如何調用圖片接口API并居中顯示,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-06-06
分頁這種組件，幾乎每一種框架都有這樣的組件，這篇文章主要介紹了MVVM框架下實現分頁功能示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
JSON與String互轉的實現方法(Javascript)
下面小編就為大家?guī)硪黄狫SON與String互轉的實現方法(Javascript) 。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-09-09
JS操作select下拉框動態(tài)變動(創(chuàng)建/刪除/獲取)
動態(tài)創(chuàng)建及刪除select、添加及刪除選項option、獲得選項option的值、獲得選項option的文本等等，感興趣的朋友可以參考下哈2013-06-06
關于meta viewport中target-densitydpi屬性詳解（推薦）
這篇文章主要介紹了關于meta viewport中target-densitydpi屬性詳解，通過不同的縮放比例實現了不同的預覽效果，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。2017-08-08
全面解析JavaScript中“&&”和“||”操作符(總結篇)
這篇文章主要介紹了全面解析JavaScript中“&&”和“||”操作符(總結篇)的相關資料,需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細介紹了JavaScript實現簡單動態(tài)表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了JavaScript中html畫布的使用與頁面存儲技術,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-08
本文主要介紹了js中Array.sort()利用零值多維排序，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
做這個輪播圖的組件，我們先從一個最簡單的 DOM 操作入手。使用 DOM 操作把整個輪播圖的功能先實現出來，然后在一步一步去考慮怎么把它設計成一個組件系統(tǒng)2021-04-04