SyntaxHighlighterでソースを読みやすく掲載する方法(2ページ目)

SyntaxHighlighterの設置方法

まずは、「SyntaxHighlighter」をダウンロードして、必要なファイルを抜き出し、自身のウェブサイトにアップロードしましょう。以下の手順で操作して下さい。

１．配布サイトから「SyntaxHighlighter」一式をダウンロードする
SyntaxHighlighterの配布サイトへアクセスして、右図のように、右端にあるメニューから「download」リンクをクリックします。

ダウンロードページが表示されたら、「Click here to download.」のリンクをクリックして下さい。すると、ZIP形式に圧縮されたSyntaxHighlighter一式をダウンロードできます。

２．ファイルを展開し、必要なフォルダだけを抜き出す
ダウンロードしたZIPファイルには、サンプルやオリジナルソースなども含まれていますが、最低限必要なのは、「scripts」と「sytles」の2フォルダのみです。それぞれ、JavaScriptファイル群とCSSファイル群が含まれています。

なお、index.htmlやtestsフォルダの中には、サンプルHTMLが含まれていますので、記述方法等の参考にすると良いでしょう。

３．自身のウェブサイトへアップロードする
「scripts」フォルダ内には、対応言語ごとのJavaScriptファイルが格納されています。アップロードする必要があるのは、自分が表示させたい言語に対応したファイルのみです。フォルダごと全ファイルをアップロードしても構いませんが、必要な言語のファイルだけに絞ってアップロードしても問題ありません。

なお、CSSは言語に関係なく共通ですので、「styles」フォルダをそのままアップロードすれば良いでしょう。もし、デフォルト以外の配色（テーマ）を使う予定がないなら、「shCoreDefault.css」ファイル1つだけのアップロードでも構いません。

考えるのが面倒な場合は、「scripts」フォルダと「styles」フォルダの2つを、フォルダごとそのまま適当な場所へアップロードすれば問題ありません。なお、JavaScriptもCSSも、特にファイルの内部を書き換える必要はありませんので、そのままアップロードして下さい。

SyntaxHighlighterの使い方（準備）

まずは、「SyntaxHighlighter」を構成するファイルを、HTMLから読み込むよう記述します。方法は、HTMLのhead要素内に、以下の4つを記述するだけです。

1. コアスクリプト（shCore.js）を読み込む記述
2. 表示したい言語に応じたスクリプト（sh■■■.js等）を読み込む記述 （※複数でも可）
3. 表示に使いたい配色（テーマ）のCSS（sh■■■.css等）を読み込む記述
4. スクリプトを開始する記述

１：<script type="text/javascript" src="shCore.js"></script><!-- コアスクリプト(必須) -->
２：<script type="text/javascript" src="sh■■■.js"></script><!-- 言語に応じたスクリプト -->
３：<link type="text/css" rel="stylesheet" href="sh■■■.css"><!-- デザインテーマ -->
４：<script type="text/javascript">SyntaxHighlighter.all();</script><!-- スクリプトの開始(必須) -->

例えば、「HTMLソース」と「JavaScriptソース」を、「デフォルトの配色（テーマ）」で表示させたい場合は、以下のように記述します。ファイルパスは、アップロードした先に合わせて修正して下さい。

<script type="text/javascript" src="./syntaxhighlighter/scripts/shCore.js"></script><!-- 必須 -->
<script type="text/javascript" src="./syntaxhighlighter/scripts/shBrushXml.js"></script><!-- HTML,XMLを使う場合 -->
<script type="text/javascript" src="./syntaxhighlighter/scripts/shBrushJScript.js"></script><!-- JavaScriptを使う場合 -->
<link type="text/css" rel="stylesheet" href="./syntaxhighlighter/styles/shCoreDefault.css"><!-- デフォルトの配色を使う場合（※何らかのCSSは必須） -->
<script type="text/javascript">SyntaxHighlighter.all();</script><!-- 必須 -->

必要に応じて、読み込むJavaScriptを増やして下さい。どんなJavaScriptファイルを読み込めば良いかは、「scripts」フォルダの中を見ればすぐに分かります。右図のように、各スクリプトのファイル名に、対応する言語名が含まれています。

なお、HTML・XHTMLに対応するスクリプトは、XML用スクリプト「shBrushXml.js」に含まれています。また、JavaScriptに対応するスクリプト名は「shBrushJScript.js」です。

ここまで準備ができたら、実際にSyntaxHighlighterを使って、ウェブページ上に様々な言語のソースを表示させてみましょう。