及川WEB室 >
JavaScript > HTMLタグやソースコードを表示する SyntaxHighlighter
HTMLタグやソースコードを表示する SyntaxHighlighter
HTMLタグやソースコードを表示するために、山かっこ < > を < や > に書き換えるのは手間がかかる。SyntaxHighlighter というJavaScriptライブラリを使用すると、HTMLタグやソースコードをきれいに整形して表示してくれる。
▼ SyntaxHighlighter の使い方やダウンロードはこちらの公式サイトで。（英語）
SyntaxHighlighter
表示例
↓このように表示されます。SyntaxHighlighter の 使い方やダウンロードはこちらの公式サイトで。（英語）
SyntaxHighlighter
設置例
私が設置した、syntaxhighlighter の、バージョン 3.0.83 の設置方法をご紹介。- 公式サイトのdownloadページから、syntaxhighlighter_3.0.83.zip をダウンロード。
ダウンロードしたファイルを解凍して、中身をサイト内の任意の場所にコピーする。 -
上記1.で設置したファイル内の、下記のファイルを<head>内に読み込む。
scripts/shCore.js
scripts/shBrushJScript.js
css/shCore.css
css/shThemeDefault.css
[例]
ファイルまでのパスはご自分の設置した場所に変更してください。
※補足：
表示させたいコードの言語の種類によって、読み込ませるファイルが違う。
言語ごとに brush と呼ばれるjsファイルが用意されている。
ここではJavascriptのソースコードを表示する例をあげているため、上記の[例]の2行目で「shBrushJScript.js」を読み込んでいるが、例えばCSSのコードを表示したいときは「shBrushCss.js」、HTMLのソースコードを表示したいときは「shBrushXml.js」を読み込ませる。
その際、ソースコードを表示するpreタグに記述するclass属性はそれぞれ「class="brush:css"」「class="brush:html"」となる。
brush のバリエーションはこちらを参照 >> - <head>内に、下記を記述
<script type="text/javascript">SyntaxHighlighter.all()</script> - 表示したいHTMLタグやソースコードを下記タグ内に記述。
<pre class="brush:js"></pre>
[例]<pre class="brush:js"> SyntaxHighlighter の使い方やダウンロードはこちらの公式サイトで。（英語）
SyntaxHighlighter </pre> - 強調したい行にハイライトを入れる事が出来る。
強調したいときは、「highlight: [行番号,行番号]」を追記する。
例えば2行目と4行目を強調したいときは下記。
<pre class="brush:js;highlight: [2, 4]"></pre>
[例]1行目 2行目 3行目 4行目 5行目
Lightbox2.51 と SyntaxHighlighter3.0.83 が IE8 以下で動かない場合
同HTMLページ上に Lightbox2.51 と SyntaxHighlighte3.0.83 の両方とも設置したら、IE8以下で Lightbox が動作しなくなった。ネットで検索して調べてみると、SyntaxHighlighter3.0.83 の shCore.js に原因があるらしい。
こちら↓を参照させて頂きました。ありがとうございます。
Lightbox Plugin - WebSurfer's Home
IE6, IE7, IE8の場合、syntaxhighlighter3.0.83 の shCore.js が原因で、 Lightbox2 のスクリプトが jQuery.js をきちんと参照できないらしい。直接の解決法は見つけられなかった。
対処法
Lightbox と SyntaxHighlighter を同時に使うには、SyntaxHighlighterを下位のバージョンにする。SyntaxHighlighter3.0.83 ではなく、下位のバージョンのSyntaxHighlighter2.1.382 にしたら、Lightbox はIE6とIE8でもきちんと動いた。
SyntaxHighlighterは過去のバージョンもダウンロードできる。 SyntaxHighlighter
また、スクリプトを書く順番は、SyntaxHighlighter の方を LightBox より先に記述するほうが良いもよう。