SyntaxHighlighter | トラブルシューティング | 縦スクロールバーが常に表示される場合の解決方法

SyntaxHighlighterを使ってソースコードを表示したときに、縦スクロールバーが常に表示される問題の解決方法について説明する。

縦スクロールバーが常に表示される場合の解決方法

使用しているブラウザによって表示のされ方は異なるが、ソースコードを表示するときに縦スクロールバーが常に表示される場合がある。

縦スクロールバーを非表示にするには、現在使用しているshCore.cssファイル、またはshCoreXXX.cssファイルをテキストエディタで開き、次のような内容がある場所を探す。

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

ライブラリファイル自体を変更すると問題になる可能性があるため、次のようにCSSを別途作成してプロパティを追加する。

<style>
  .syntaxhighlighter {
    overflow-y : hidden! important;
  }
</style>

コードを実行

設定はこれで完了である。プロパティを追加した後に表示を確認すると、縦スクロールバーは表示されなくなる。

Firefoxではもともと表示されておらず、ChromeおよびIE11でも表示されないことを確認した。