00時31分はじめにウエブ上で、CSS/HTML/Bash/Perlなどのソースコードを表示する時に以前は、preタグを使ったCSSで装飾するのが一般的でした。今回は、ソースコードの装飾に特化したSyntaxHighlighterの使用法を解説します。作業の前提条件は、下記のとおりです。スライダーのJQueryプラグインFlexSlider2の使用方法と同じ要領でダウンロードします。syntaxhighlighter適用スタイルの指定SyntaxHighlighterには、デフォルトスタイルを含め、8種類のスタイルシートが用意されていますので、使用するスタイルシートを決めます。使用するスタイルを決めたら、HTMLを作成します。ここでは、shThemeEmacs.cssを使用します。</body></html>6~7行目では、スタイルシートを指定しています。shBrushCore.cssは必ず指定する必要があります。16~41行目では、書式ごとのjsファイルを指定します。ここでは、全てのjsファイルを指定していますので、SyntaxHighlighterがサポートする全ての言語の装飾を行うことができます。42行目では、指定された書式をロードしますので、忘れずに実行します。デモは、017-1.htmlからご覧頂けます。Bootstrapと併用した際のズレ対応ここまでは、Bootstrapを用いないため不具合が発生していませんが、SyntaxHighlighterを使用する場合、多くの場合Bootstrapと併用すると思います。その場合、どのブラウザでページを表示しても、行と行番号にズレが生じることがあります。さきほど作成したHTMLに、BootstrapのCSSを追加して見ると、ズレが確認できます。src="syntaxhighlighter/scripts/shCore.js"></script>ズレが発生する理由は、BootstrapとSyntaxHighlighterが使用しているcontainerクラスが競合しているためですので、SyntaxHighlighterのshCore.cssおよび、shCore.jsを下記のとおり修正します。shCore.js編集後、ページをリロードするとズレの解消を確認できます。デモは、017-2.htmlからご覧頂けます。ファイルは、017.zipからダウンロードできます。対応言語を参照して下さい。SyntaxHighlighterを使用する際には、下記の書式で使用するエイリアスを指定します。class="brush:エイリアス">..</pre>オプションSyntaxHighlighterを使用する際に、さまざまなオプションを指定できます。オプションの詳細は、SyntaxHighlighter.defaultsに書かれていますが、ここでは、よく使うオプションについて解説します。コードに含まれるURLをリンクとして表示します。コードを折りたたんで表示します。コードの先頭行番号を指定する。行番号の表示・非表示を指定する。行をハイライト表示する。</body></html>。