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