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

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

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

18.ソースコードを見易く表示するには(SyntaxHighlighterの導入) (2012年2月19日)

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

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

SyntaxHighlighter による協調表示
          <!DOCTYPE HTML>
          <html>
          <head>
          <title>無題ドキュメント</title>
          </head>
          <body>
            <article>
              <h1>大見出し</h1>
              <section>
                <h2>小見出し</h2>
                <p>こちらは「SyntaxHighlighter による協調表示」です</p>
              </section>
            </article>
          </body>
          </html>
          
SyntaxHighlighter 導入手順
(1)SyntaxHighlighterのダウンロード
以下のサイトからSyntaxHighlighterをダウンロードする。
http://alexgorbatchev.com/SyntaxHighlighter/
(自分は、この時点での最新版Ver3.0.83を選択)

ダウンロードしたファイルを解凍して、scriptsとstylesのフォルダがあることを確認する。
(これ以外にも幾つかのフォルダとファイルがあるが今回は使用しない)
(2)JavaScriptファイルとCSSファイルのアップロード
(1)で解凍したscriptsとstylesフォルダの中から使用するファイルを選択して、
任意の場所にコピー後、自分のサーバーにアップロードする。
ちなみにマサが使用するファイルは以下の通り。
scriptsフォルダ内
・shCore.js    (基本ファイル)
・shBrushCss.js    (CSS言語用)
・shBrushJScript.js    (JavaScript言語用)
・shBrushPerl.js    (Perl言語用)
・shBrushXml.js    (HTML,XHTML,XML言語用)
stylesフォルダ内
・shCoreDefault.css    (基本デザイン用ファイル)
(3)HTMLファイルの記述
ヘッダー部分に(2)でアップロードしたファイルの読み込みを記述する。
            <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= で指定する。
(指定できる言語の種類は(2)で選択したファイルにより異なる)
            <pre class="brush:html;">    ・・・言語指定例:html/css/js/perl
            ソースコード
            </pre>
            
(4)オプション設定例
ページ全体に設定する場合
            <script type="text/javascript">
              SyntaxHighlighter.defaults['toolbar'] = false;     ・・・ツールバー(右上の?マーク)非表示
              SyntaxHighlighter.defaults['auto-links'] = false;  ・・・URL記述の自動リンク無効
              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)