SyntaxHighlighter3のカスタマイズ

Thu, 16 Dec 2010 21:16:18 +0900

ソースをキレイに表示してくれる「SyntaxHighlighter3」ですが、少々不満あり。カスタマイズ方法を詳しく書いてくれているページ発見！

行を折り返す方法（2013/02/27追記）

Ver2.Xではできていた行の折り返しがSyntaxHighlighter3.0.83では標準ではできませんが、shCore.cssの71行目辺りを以下のように変更すればできるようです。

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

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

「pre-wrap」または「nomal」でもいいそうです。

その他のブラウザはわかりませんが、IE10とChromeではできました。以下のサイトを参考にしました。その他、行番号の無効化や奇数行と偶数行の背景色を変更する方法も書かれています。