SyntaxHighlighterカスタマイズメモ

ソースコードを美しく表示してくれるSyntaxHighlighter(シンタクスハイライター)を、更に便利に使うためのカスタマイズ方法をご紹介です。
コンテナにTextAreaを使おう!
SyntaxHighlighterのデフォルトのコンテナとしては、PREタグを使うことになっているのですが、TextAreaだって使えるんです。
方法は、SyntaxHighlighterを読み込むところで SyntaxHighlighter.config.tagName="textarea"; を指定します。
メリットとしては、< とか > を < とか > と書き換えなくてもそのまま表示してくれるというのがひとつ。
もう一つは、PREタグだとソースが横に長い場合において、SyntaxHighlighterの装飾が完了するまではソースが画面からはみ出して表示されてしまいますが、それを回避することができます。
また、何らかの理由でSyntaxHighlighterが機能しなかった場合にも、表示を画面の幅に合わせてくれるTextAreaの方が、個人的には良いように思っています。
ただし一つ注意点があって、装飾したいソース内にTextAreaタグがある場合は、TextAreaタグの< や > は < や > に変換しておく必要があります。
右上の[?]を非表示にしよう!
デフォルトの状態のSyntaxHighlighterでは、ソースの右上に小さく緑の[?]が表示されています。
これを非表示にするには、SyntaxHighlighterを読み込むところで SyntaxHighlighter.defaults['toolbar'] = false; を指定します。
そもそもコレは何かというと、所謂[SyntaxHighlighterについて]を表示するためのリンクなのですが、これまたソースが横に長いとスクロールに付いてきたりして、ソースが見難くなっちゃうんですよね。必ず右上に固定されてるのなら表示しててもいいんですけどね。
HTMLと多言語の混在ソースを装飾しよう!
クラスの指定に html-script:true を追加してやればOKです
例えば、HTML と JavaScript が混在している場合は、classの指定を class="brush:js html-script:true" としてやります。
CSSと混在する場合はこんな感じ
いちいち指定するのは面倒! という事であれば、読み込み時に SyntaxHighlighter.defaults['html-script'] = true; を指定しておけばOKです。
指定行をハイライトしよう!
コンテナのclass指定に、highlightという項目を追加して指定します。
1行だけの場合はその行数を、
複数行の場合は行数を[]で囲ってカンマ(,)区切りで指定します。
Enjoy!
参照リンク
・SyntaxHighlighter - Configuration
・SyntaxHighlighter3をtextareaで使う elenoi's note
・「SyntaxHighlighter」で知らなきゃ損する7つのカスタマイズ - 知らなきゃ絶対損するPCマル秘ワザ