當(dāng)前位置:首頁 >  站長 >  編程技術(shù) >  正文

SyntaxHighlighter去掉右側(cè)滾動條的方法

 2020-10-15 14:33  來源: 腳本之家   我來投稿 撤稿糾錯

  域名預(yù)訂/競價,好“米”不錯過

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

在Chrome瀏覽器中代碼區(qū)始終有一個滾動條,firefox不會有這種情況。網(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;/*就是這個*/
}

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

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

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

去掉右側(cè)滾動條:

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

padding:0 !important;

修改為:

padding: 1px 0 !important;

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

去掉下側(cè)的滾動條:

其實我也沒有找到兩全其美的方法,為什么這么說呢。這里我提供2種方法,但是多有缺陷。

建議:還是輸代碼的時候注意長度的,只要不超過一定的長度,是不會出現(xiàn)滾動條的。

1.自動換行

.syntaxhighlighter .line {

white-space: pre !important;

}

修改這個pre為normal的話,前面的行數(shù)就會錯位。

2.自動隱藏

.syntaxhighlighter {

width: 100% !important;

margin: 1em 0 1em 0 !important;

position: relative !important;

overflow: auto !important;

font-size: 1em !important;

}

修改overflow的auto為hidden,超過自動隱藏。這個方法更美觀點,但是不方面查看代碼。

本文來自腳本之家,原文鏈接:https://www.jb51.net/article/182678.htm

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關(guān)標(biāo)簽
syntaxhighlighter插件

相關(guān)文章

熱門排行

信息推薦