スポンサーリンク

SyntaxHighlighterカスタマイズメモ

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

コンテナにTextAreaを使おう!

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

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

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

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

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

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

右上の[?]を非表示にしよう!

デフォルトの状態の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マル秘ワザ

スポンサーリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku

    運営サイト
    www.mukairiku.net

ブログ内検索

Licenses

  • Creative Commons License

OTHER

  • このブログのはてなブックマーク数

Blog powered by TypePad

スポンサーリンク