右スクロールバーを削除するSyntaxHighlighterメソッド

Chromeではコード領域に常にスクロールバーがありますが、firefoxにはこれがありません。ウェブ上には多くの解決策があり、.syntaxhighlighterのエリアを変更したり、.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;/*this is it*/
} 

他のユーザーが追加した内容は以下の通りです。

SyntaxHighlighter ハイライトプラグインです。現在、多くのWebサイトでコード表示に使用されています。しかし、SyntaxHighlighter 3.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;
}

このプリをノーマルに変更すると、前の行がずれてしまいます。

2. 自動非表示

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

overflowのautoをhiddenに修正し、overflowが自動的に隠されるようにする。この方法はより美的に優れていますが、コードの閲覧には不向きです。

SyntaxHighlighterの右側のスクロールバーを消す方法については、この記事が全てです。SyntaxHighlighterのスクロールバーに関連する他のコンテンツについては、BinaryDevelopの過去記事を検索するか、以下の関連記事を引き続きご覧ください。