及川WEB室|ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > JavaScript > HTMLタグやソースコードを表示する SyntaxHighlighter

HTMLタグやソースコードを表示する SyntaxHighlighter

HTMLタグやソースコードを表示するために、山かっこ < > を &lt; や &gt; に書き換えるのは手間がかかる。
SyntaxHighlighter というJavaScriptライブラリを使用すると、HTMLタグやソースコードをきれいに整形して表示してくれる。

SyntaxHighlighter の使い方やダウンロードはこちらの公式サイトで。(英語)
SyntaxHighlighter

表示例

↓このように表示されます。
SyntaxHighlighter の
使い方やダウンロードはこちらの公式サイトで。(英語)
SyntaxHighlighter

設置例

私が設置した、syntaxhighlighter の、バージョン 3.0.83 の設置方法をご紹介。
  1. 公式サイトのdownloadページから、syntaxhighlighter_3.0.83.zip をダウンロード。
    ダウンロードしたファイルを解凍して、中身をサイト内の任意の場所にコピーする。
  2. 上記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 のバリエーションはこちらを参照 >>
  3. <head>内に、下記を記述
    <script type="text/javascript">SyntaxHighlighter.all()</script>
  4. 表示したいHTMLタグやソースコードを下記タグ内に記述。
    <pre class="brush:js"></pre>

    [例]
    <pre class="brush:js">
    SyntaxHighlighter の使い方やダウンロードはこちらの公式サイトで。(英語)
    SyntaxHighlighter </pre>
  5. 強調したい行にハイライトを入れる事が出来る。
    強調したいときは、「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 より先に記述するほうが良いもよう。
MENU Ξ