在Chrome瀏覽器中代碼區(qū)始終有一個(gè)滾動(dòng)條，firefox不會(huì)有這種情況。網(wǎng)上有很多解決方法，修改plugin/syntaxhighlisghter/3.0.81/css目錄下shCoreDefault.css中的..syntaxhighlighter區(qū)域，加上padding:1px;就可以了。

.syntaxhighlighter { 
width: 100% !important; 
margin: 1em 0 1em 0 !important; 
position: relative !important; 
overflow: auto !important; 
font-size: 1em !important; 
padding:1px;/*就是這個(gè)*/
} 

下面是其他網(wǎng)友的補(bǔ)充

SyntaxHighlighter這個(gè)是一個(gè)高亮插件?，F(xiàn)在被用于很多網(wǎng)站的代碼顯示。但是SyntaxHighlighter3.0.83，由于自適應(yīng)寬和高，導(dǎo)致一直有滾動(dòng)條的問(wèn)題。

其實(shí)這個(gè)問(wèn)題可以修改css文件可以去掉。修改主題文件shCoreDefault.css（默認(rèn)模版）

去掉右側(cè)滾動(dòng)條：

大概在shCoreDefault.css文件39行位置：

padding:0 !important;

修改為：

padding: 1px 0 !important;

網(wǎng)上可能是36行 margin: 0 !important;修改為 margin:1px 0 !important;這樣修改雙擊選中后會(huì)有錯(cuò)位問(wèn)題。

去掉下側(cè)的滾動(dòng)條：

其實(shí)我也沒(méi)有找到兩全其美的方法，為什么這么說(shuō)呢。這里我提供2種方法，但是多有缺陷。

建議：還是輸代碼的時(shí)候注意長(zhǎng)度的，只要不超過(guò)一定的長(zhǎng)度，是不會(huì)出現(xiàn)滾動(dòng)條的。

1.自動(dòng)換行

.syntaxhighlighter .line {
white-space: pre !important;
}

修改這個(gè)pre為normal的話，前面的行數(shù)就會(huì)錯(cuò)位。

2.自動(dòng)隱藏

.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
}

修改overflow的auto為hidden，超過(guò)自動(dòng)隱藏。這個(gè)方法更美觀點(diǎn)，但是不方面查看代碼。

到此這篇關(guān)于SyntaxHighlighter 去掉右側(cè)滾動(dòng)條的方法的文章就介紹到這了,更多相關(guān)SyntaxHighlighter滾動(dòng)條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論