マサのWeb玉手箱　>>　プロフィール　気まぐれ日記

学級日誌番外 （ホームページ作成ノウハウ集）

>>> 学級日誌番外トップ

１８．ソースコードを見易く表示するには（SyntaxHighlighterの導入） （2012年2月19日）

◎環境
・特に指定なし
◎解説
これまで、この学級日誌番外で紹介するソースコードは普通にテキストとして表示していたが、もっと綺麗に見やすく表示するためにＳｙｎｔａｘＨｉｇｈｌｉｇｈｔｅｒ（シンタックスハイライター）を導入してみた。ＳｙｎｔａｘＨｉｇｈｌｉｇｈｔｅｒとはフリーで提供されているＪａｖａＳｃｒｉｐｔライブラリで、幾つもの言語の構文を強調表示して分かりやすくしてくれるものである。スタイルシートも複数用意されているので、好みのデザインから表示形式を選ぶことができる。今回は、最低限の設定方法を紹介する。

普通のテキスト表示 
          <!DOCTYPE HTML>
          <html>
          <head>
          <title>無題ドキュメント</title>
          </head>
          <body>
            <article>
              <h1>大見出し</h1>
              <section>
                <h2>小見出し</h2>
                <p>こちらは「普通のテキスト表示」です</p>
              </section>
            </article>
          </body>
          </html>

ＳｙｎｔａｘＨｉｇｈｌｉｇｈｔｅｒ による協調表示 
          <!DOCTYPE HTML>
          <html>
          <head>
          <title>無題ドキュメント</title>
          </head>
          <body>
            <article>
              <h1>大見出し</h1>
              <section>
                <h2>小見出し</h2>
                <p>こちらは「SyntaxHighlighter による協調表示」です</p>
              </section>
            </article>
          </body>
          </html>
ＳｙｎｔａｘＨｉｇｈｌｉｇｈｔｅｒ 導入手順
（１）ＳｙｎｔａｘＨｉｇｈｌｉｇｈｔｅｒのダウンロード
以下のサイトからＳｙｎｔａｘＨｉｇｈｌｉｇｈｔｅｒをダウンロードする。
http://alexgorbatchev.com/SyntaxHighlighter/
（自分は、この時点での最新版Ｖｅｒ３．０．８３を選択）

ダウンロードしたファイルを解凍して、ｓｃｒｉｐｔｓとｓｔｙｌｅｓのフォルダがあることを確認する。
（これ以外にも幾つかのフォルダとファイルがあるが今回は使用しない）
（２）ＪａｖａＳｃｒｉｐｔファイルとＣＳＳファイルのアップロード
（１）で解凍したｓｃｒｉｐｔｓとｓｔｙｌｅｓフォルダの中から使用するファイルを選択して、
任意の場所にコピー後、自分のサーバーにアップロードする。
ちなみにマサが使用するファイルは以下の通り。
ｓｃｒｉｐｔｓフォルダ内
・shCore.js    （基本ファイル）
・shBrushCss.js    （ＣＳＳ言語用）
・shBrushJScript.js    （ＪａｖａＳｃｒｉｐｔ言語用）
・shBrushPerl.js    （Ｐｅｒｌ言語用）
・shBrushXml.js    （ＨＴＭＬ，ＸＨＴＭＬ，ＸＭＬ言語用）
ｓｔｙｌｅｓフォルダ内
・shCoreDefault.css    （基本デザイン用ファイル）
（３）ＨＴＭＬファイルの記述
ヘッダー部分に（２）でアップロードしたファイルの読み込みを記述する。 
            <script src="scripts/shCore.js" type="text/javascript"></script>
            <script src="scripts/shBrushCss.js" type="text/javascript"></script>
            <script src="scripts/shBrushJScript.js" type="text/javascript"></script>
            <script src="scripts/shBrushPerl.js" type="text/javascript"></script>
            <script src="scripts/shBrushXml.js" type="text/javascript"></script>
            <link href="styles/shCoreDefault.css" type="text/css" rel="stylesheet"/>
            <script type="text/javascript">
              SyntaxHighlighter.defaults['toolbar'] = false;
              SyntaxHighlighter.defaults['auto-links'] = false;
              SyntaxHighlighter.all();
            </script>
次にソースコードを表示したい部分を <pre>タグ で囲む。この時、言語の種類を class= で指定する。
（指定できる言語の種類は（２）で選択したファイルにより異なる） 
            <pre class="brush:html;">    ・・・言語指定例：html/css/js/perl
            ソースコード
            </pre>
（４）オプション設定例
ページ全体に設定する場合 
            <script type="text/javascript">
              SyntaxHighlighter.defaults['toolbar'] = false;     ・・・ツールバー（右上の？マーク）非表示
              SyntaxHighlighter.defaults['auto-links'] = false;  ・・・ＵＲＬ記述の自動リンク無効
              SyntaxHighlighter.all();
            </script>

ソースコード単位で設定する場合
            <pre class="bruch:***; gutter:false;">        ・・・行番号非表示
            <pre class="bruch:***; first-line:3;">        ・・・開始行番号の指定
            <pre class="bruch:***; highlight:[1,3,4];">   ・・・行の強調表示
            <pre class="bruch:***; pad-line-numbers:3;">  ・・・行番号の桁数指定
            <pre class="bruch:***; toolbar:false;">       ・・・ツールバー（右上の？マーク）非表示
            <pre class="bruch:***; quick-code:false;">    ・・・ダブルクリックでの全選択禁止
            <pre class="bruch:***; title:[my title];">    ・・・上部タイトルの表示

>>> マサがお勧めするJavascriptの本 （by Amazon.co.jp）

こんな商品あります

Webデザインの世界は技術の進歩が早く、取り残されないように勉強がかかせません。ネットで最新情報を検索するのも良いですが、自分のペースでじっくり学ぶには昔ながらの書籍もお勧めです。