1. 程式人生 > 程式設計 >SyntaxHighlighter 去掉右側滾動條的方法

SyntaxHighlighter 去掉右側滾動條的方法

在Chrome瀏覽器中程式碼區始終有一個滾動條,firefox不會有這種情況。網上有很多解決方法,修改plugin/syntaxhighlisghter/3.0.81/css目錄下shCoreDefault.css中的..syntaxhighlighter區域,加上padding:1px;就可以了。

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

下面是其他網友的補充

SyntaxHighlighter這個是一個高亮外掛。現在被用於很多網站的程式碼顯示。但是SyntaxHighlighter3.0.83,由於自適應寬和高,導致一直有滾動條的問題。

其實這個問題可以修改css檔案可以去掉。修改主題檔案shCoreDefault.css(預設模版)

去掉右側滾動條:

大概在shCoreDefault.css檔案39行位置:

padding:0 !important;

修改為:

padding: 1px 0 !important;

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

去掉下側的滾動條:

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

建議:還是輸程式碼的時候注意長度的,只要不超過一定的長度,是不會出現滾動條的。

1.自動換行

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

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

2.自動隱藏

.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;

overflow: auto !important;
font-size: 1em !important;
}

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

到此這篇關於SyntaxHighlighter 去掉右側滾動條的方法的文章就介紹到這了,更多相關SyntaxHighlighter滾動條內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!