SyntaxHighlighterカスタマイズメモ

ソースコードを美しく表示してくれるSyntaxHighlighter（シンタクスハイライター）を、更に便利に使うためのカスタマイズ方法をご紹介です。

目次：
　・コンテナにTextAreaを使おう！
　・右上の[？]を非表示にしよう！
　・HTMLと多言語の混在ソースを装飾しよう！
　・指定行をハイライトしよう！

コンテナにTextAreaを使おう！

SyntaxHighlighterのデフォルトのコンテナとしては、PREタグを使うことになっているのですが、TextAreaだって使えるんです。

方法は、SyntaxHighlighterを読み込むところで SyntaxHighlighter.config.tagName="textarea"; を指定します。

<link type="text/css" rel="stylesheet" href="./lib/syntaxhighlighter/styles/shCoreDefault.css" /> <script type="text/javascript" src="./lib/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript"> SyntaxHighlighter.config.tagName="textarea"; SyntaxHighlighter.all(); </script>

メリットとしては、< とか > を &lt; とか &gt; と書き換えなくてもそのまま表示してくれるというのがひとつ。

もう一つは、PREタグだとソースが横に長い場合において、SyntaxHighlighterの装飾が完了するまではソースが画面からはみ出して表示されてしまいますが、それを回避することができます。

また、何らかの理由でSyntaxHighlighterが機能しなかった場合にも、表示を画面の幅に合わせてくれるTextAreaの方が、個人的には良いように思っています。

ただし一つ注意点があって、装飾したいソース内にTextAreaタグがある場合は、TextAreaタグの< や > は &lt; や &gt; に変換しておく必要があります。

右上の[？]を非表示にしよう！

デフォルトの状態のSyntaxHighlighterでは、ソースの右上に小さく緑の[？]が表示されています。

これを非表示にするには、SyntaxHighlighterを読み込むところで SyntaxHighlighter.defaults['toolbar'] = false; を指定します。

<link type="text/css" rel="stylesheet" href="./lib/syntaxhighlighter/styles/shCoreDefault.css" /> <script type="text/javascript" src="./lib/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript"> SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all(); </script>

そもそもコレは何かというと、所謂[SyntaxHighlighterについて]を表示するためのリンクなのですが、これまたソースが横に長いとスクロールに付いてきたりして、ソースが見難くなっちゃうんですよね。必ず右上に固定されてるのなら表示しててもいいんですけどね。

HTMLと多言語の混在ソースを装飾しよう！

クラスの指定に html-script:true を追加してやればOKです

例えば、HTML と JavaScript が混在している場合は、classの指定を class="brush:js html-script:true" としてやります。

<textarea class="brush:js html-script:true" style="width:100%;"> <script type="text/javascript"> function hoga() { var a=1; ︙ } </script> </textarea>

CSSと混在する場合はこんな感じ

<textarea class="brush:css html-script:true" style="width:100%;"> <style type="text/css"> #huga { width: 100px; margin: 5px; ︙ } </style> </textarea>

いちいち指定するのは面倒！ という事であれば、読み込み時に SyntaxHighlighter.defaults['html-script'] = true; を指定しておけばOKです。

<link type="text/css" rel="stylesheet" href="./lib/syntaxhighlighter/styles/shCoreDefault.css" /> <script type="text/javascript" src="./lib/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript"> SyntaxHighlighter.defaults['html-script'] = true; SyntaxHighlighter.all();

指定行をハイライトしよう！

コンテナのclass指定に、highlightという項目を追加して指定します。

１行だけの場合はその行数を、

<textarea class="brush:css html-script:true highlight:1" style="width:100%;"> <style type="text/css"> #huga { width: 100px; margin: 5px; ︙ } </style> </textarea>

複数行の場合は行数を[]で囲ってカンマ(,)区切りで指定します。

<textarea class="brush:css html-script:true highlight:[3,4,5,6,7]" style="width:100%;"> <style type="text/css"> #huga { width: 100px; margin: 5px; ︙ } </style> </textarea>

Enjoy!

参照リンク
　・SyntaxHighlighter - Configuration
　・SyntaxHighlighter3をtextareaで使う elenoi's note
　・「SyntaxHighlighter」で知らなきゃ損する7つのカスタマイズ - 知らなきゃ絶対損するPCマル秘ワザ