ウェブ上で使われるHTML、CSS、JavaScriptなどのほか、C++、Visual Basic、Perlなどのプログラミング言語など様々なソースをウェブページ上表示する方法はいくつかあります。
ここでは容易に利用できて、運用もしやすいSyntaxHighlighterとgoogle-code-prettifyの利用法を解説します。
ソースコードの表示 - SyntaxHighlighter
特徴、利点
SyntaxHighlighterは行番号ソースに付加して表示でき、開始行番号を指定すれば任意の番号から、何も指定しなければ1から順に行番号が振られます。もちろん行番号を除く事も可能です。
一番の利点は読者がソースを範囲選択する場合、ソースに付加した行番号は選択されず、ソースを一括コピー＆ペーストすることが容易です。また、特定の行だけをハイライト表示させることもできます。
この他、標準の配色（テーマ）のほか、複数の配色が用意されており、表示をカスタマイズでき、CSSを編集すれば自分で配色セットを作ることもできます。
必要なファイルの取得とウェブサイトへの設置
配布サイト(http://alexgorbatchev.com/SyntaxHighlighter/)からZIP形式に圧縮されたSyntaxHighlighterをダウンロードします。
ZIPファイルには、サンプルやオリジナルソースなども含まれていますが、最低限必要なのはscriptsとsytlesの2フォルダのみです。それぞれ、JavaScriptファイル群とCSSファイル群が含まれています。
scriptsフォルダ内には、対応言語ごとのJavaScriptファイルが格納されています。フォルダごと全ファイルをアップロードするか、必要な言語のファイルだけをアップロードします。
CSSは言語に関係なく共通です。stylesフォルダをそのままアップロードします。もし、デフォルト以外の配色を使う予定がないなら、shCoreDefault.cssファイル1つだけのアップロードで構いません。
使用するJavascriptの定義
SyntaxHighlighterを構成するファイルを読み込むよう、HTMLのhead部に以下を記述する。
<script type="text/javascript" src="shCore.js"></script><!-- コアスクリプトを読み込む -->
<script type="text/javascript" src="shXXX.js"></script><!-- 表示する言語に応じたスクリプト（複数可） -->
<link type="text/css" rel="stylesheet" href="shXXX.css"><!-- デザインテーマ(表示に使いたい配色) -->
<script type="text/javascript">SyntaxHighlighter.all();</script><!-- スクリプトの開始(必須) -->
|
なお、HTML、XHTMLに対応するスクリプトは、XML用スクリプトshBrushXml.jsに含まれています。また、JavaScriptに対応するスクリプト名はshBrushJScript.jsです。
表示の指定
pre要素を使ってソースを記述。その際、pre要素のclass属性の値に、"brush: (言語名);"という形で言語名（ブラシ名）を記述します。
<pre class="brush: (言語名);">
～ソースを掲載～
</pre>
HTMLの場合
<pre class="brush: html;">
表示したいHTMLソース
</p>
注意 1)"<"記号や">"記号は、それぞれ文字実体参照を使って"<"、">"に置換しておきます。
2)XML、TML、XHTMLのCSSは全て"brush: html;"と記述 JavaScriptの場合 class属性値に"brush: java
script"と記述します。
カスタマイズ
| 開始行番号を指定 |
ソースを掲載するためのpre要素のclass属性値に、「first-line:」という文字列を追記し、望みの開始行番号を指定します。 |
<pre class="brush: javascript; first-line: 128;">
|
| 特定の行をハイライト表示 |
「highlight:」という文字列を追記し、括弧内にハイライトしたい行番号をカンマ区切りで記述します。連続していない複数の行をハイライトすることもできます。 |
<pre class="brush: css; highlight:[9,10];">
|
| 配色（テーマ）を変える |
Ver 3.0.83では、デフォルトテーマを含めて8種類の配色があり、読み込ませるCSSファイルを切り替えることで、簡単に配色を変更できます。 |
(A)：ページによって複数の配色を使い分けたい場合－－共通するスタイルだけを分離したshCore.cssファイルと、テーマ本体のスタイルが記述されたshThemeXXX.cssファイル（XXXの部分はテーマ名）の2つを読み込みます。
<link type="text/css" rel="stylesheet" href="./syntaxhighlighter/styles/shCore.css"><!-- 共通コアのCSSファイル -->
<link type="text/css" rel="stylesheet" href="./syntaxhighlighter/styles/shThemeEmacs.css"><!-- EmacsテーマのCSSファイル --">
|
(B)：使いたい配色が1種類だけの場合－－必要な装飾が1つのCSSに収められたshCoreXXX.cssファイル（XXXの部分はテーマ名）を選択すると、読み込みます。
<link type="text/css" rel="stylesheet" href="./syntaxhighlighter/styles/shCoreEmacs.css"><!-- コアとEmacsテーマを結合した単一CSSファイル -->
|
| デザインを自作 |
自分の望みの配色に近い既存のテーマファイルshThemeXXX.cssをリネームして、必要な修正を行い、共通CSSであるshCore.cssファイルと共に読み込みます。 |
