SyntaxHighlighterの使い方

SyntaxHighlighterはHTMLやCSSのようなプログラムを見やすく色も付けて表示させてくれるプラグインです。

2013年現在の最新バージョンは3.0.83です。ページ下部のPrevious Versionsのところでバージョン2のものも落とすことが可能です。（Wordpressプラグインとして使う場合はWordpress用のSyntaxHighlighterを使います。）

バージョン2は偶数奇数行の表示に色がついているので見やすいし、印刷とかも簡単にできる反面、ソースを上からなぞってコピーしようとすると行数の1とか2とかも合わせて選択されてしまうということ。

バージョン3はマウスでなぞった文字をそのままコピーできる反面、行が見づらく、何よりもlightboxプラグインと相性が悪いということが一番の問題じゃないでしょうか。

lightboxと一緒に使用している人はバージョン2を使います。使わない人はバージョン3をDLしてください。

DL後、解凍すると以下のファイルが出てきます。

そこのindex.htmlをクリックするとサンプル画面、そこでソース表示をすればサンプルスクリプトを見ることができます。

そのスクリプトをコピーして、src以下を適用させたいhtmlファイルからの相対参照パスに直せばOKです。もちろん絶対パスを使用することも可能です。

まずは下記をhead内に記述します。（表示関係のスクリプトなので/bodyの直前記述は駄目）

<!-- HTMLのhead内 -->
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
<script>
SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

shCoreのjsは必須ですが、他のjsファイルは自分が使いたいプログラムにあわせて読み込みます。

htmlで使うなら、shshBrushXml.jsを、javascriptで使うなら、shBrushJScript.jsを読み込むけど、phpで使うならshBrushPhp.jsを読み込む必要があります。逆に、javascriptでしか使わないなら、shBrushJScript.jsとshCore.jsだけ読みこめば良いです。

次に、body内の表示させたい場所に記述するコードが以下。

<!-- HTML -->
<pre class="brush:xhtml">
ここに記述
</pre>

brush:のあとのxhtmlは、これまた上の表より記述するスクリプトの種類により選択します。xhtmlとするとhtmlのタグが見やすく整形されます。brushをxhtmlにして中にhtml以外の記述（cssやphp文を記述）をすることは可能ですが、burshがxhtmlなのでhtml用のハイライトになってしまって返って見づらくなってしまいます。

<pre>タグは囲んだ内容をhtml文とは切り離してそのまま表示できるタグです。ただし、<や>記号はhtmlのタグを囲む記号として認識されないように、&(アンド）lt;のような形で記述する必要があります。（preタグメーカーを使うと便利）

preタグ内にはSyntaxHighlighterの設定用の属性を加えることができます。よく使うものとしては、文書のオートリンクをオフにするauto-links、右上に出てくるのようなアイコンをオフにするtoolbar、特定の行を灰色で蛍光を引くhighlight（複数はカンマでくぎる）、行を折り返して表示するwrap-lines（ver2のみ）があります。

<!-- HTML -->
<!--文章内のオートリンクをオフにする-->
<pre class="brush:xhtml; auto-links:false">
ここに記述
</pre>
 
<!--ツールバーをON/OFFにする-->
<pre class="brush:xhtml; toolbar:false">
ここに記述
</pre>
 
<!--特定の行をハイライトする-->
<pre class="brush:xhtml;  highlight:[9,10]">
ここに記述
</pre>
 
<!--行を折り返して表示（ver2のみ）-->
<pre class="brush:xhtml; wrap-lines:false">
ここに記述
</pre>

pre領域の幅の設定は、<div style="width:100px"></div>とかでくくって調整してあげればよいでしょう。細かな設定はshCore.cssを編集します。（!importantは優先的にスタイルを適用させる旨で、他の外部CSSでフォントを赤にしても、同じクラス名でフォントが黒のスタイルにimportantが入っていればそっちが優先される）

Wordpressやapacheのようなサーバー上でなく、自PC内で表示させる時に、GoogleAdsenseのスクリプトと競合すると、なぜかpre内のスタイルが一瞬適用されて、すぐ適用されなくなるという現象が起こることもある。

インラインフレームとGoogleCromeとSyntaxHighlighterの相性も悪いっぽいので避けましょう。

lightboxとsyntaxhighlighterを共存させる

何でも言いますが、このプラグインはIEで上手く表示されないことがあります。

syntaxhighlighterのバージョン 3.0.83 の shCore.js が取り込まれると、IE6, IE7, IE8 の場合、JavaScript パーサーが lightboxで使用するjQuery.js をうまく解釈できないという問題らしい。そのため、lightboxとsyntaxhighlighterを共存させるためには、後者のバージョンを2に落とさなければならない。単体で使う文には問題ない。

それでもなるべくならバージョン3が使いたい場合は、条件付コメントを使用するという手もあります。

条件分岐とは、アクセスするブラウザによって実行させるスクリプトを分岐させる方法のことです。

<!-- HTMLのhead内 -->
<!--[if IE 8]>
IE8の場合の記述
<![endif]-->
 
<!--[if lt IE 9]>
IE9未満（IE5,6,8）の場合の記述
<![endif]-->
 
<!--[if gte IE 9]>
IE9以上（IE9,10）の場合の記述
<![endif]-->
 
<!--[if !IE]><!-->
 IE以外のブラウザへの記述
<!--<![endif]-->

この方法を使えば、不具合が生じる（IE8以下はバージョン2）、生じない（IE9以上及び他のブラウザではバージョン3）というように分岐できる。

WordPressプラグインとして動かす

一方、Wordpressプラグインとして動かす場合は、もっと簡単です。

シンプルなのは、SyntaxHighlighter Evolved。Syntax Highlighter for WordPressとかもよく使われているようです。

DLしたフォルダを、wp-content→pluginsの中にアップロードします。そしたら、Wordpress操作パネルでプラグイン→プラグイン編集で有効化しておきましょう。

ショートコードと呼ばれる[言語名][/言語名]でくくってあげるか、preタグでくくるか好きな方を選べます。htmlのショートコードでくくると自動でxmlに変換されてしまう場合は、xml宣言をとっぱらうか？preタグのbursh:xhtmlで指定するとよいでしょう。

<!-- HTML -->
//言語名のところにphpとかjsとかを入れ、numで表示開始行を指定できる。
[言語名 num="0"]
aaa
bbb
[/言語名]

自作テーマの際は、

<!-- HTML -->
<?php wp_head(); ?>を</head>の上に
<?php wp_footer(); ?>を</body>の上に

記述するのを忘れないようにしてください。これを書かないとhead内でプラグインのcssファイルやjsファイルの読み込みが行われないので正常に表示されません。

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>