4/4 SyntaxHighlighterでソースを読みやすく掲載する方法 [ホームページ作成] All About

SyntaxHighlighterのカスタマイズ方法（オプションの利用）

「SyntaxHighlighter」には、様々な設定が用意されています。特に便利なのは、行番号の開始番号の指定と、特定行のハイライト機能です。

■開始行番号を指定する方法

<pre class="brush: javascript; first-line: 128;">

開始行番号を指定

何も指定しなければ、「1」から順に行番号が振られますが、任意の開始番号を指定することもできます。

ソースを掲載するためのpre要素のclass属性値に、上記のように「first-line:」という文字列を追記し、望みの開始行番号を指定します。上記は、128から番号を振る例です。

■特定の行をハイライト表示する方法

<pre class="brush: css; highlight:[9,10];">

指定行をハイライト表示

複数行のソースを掲載した上で、特定の行について述べたいときなどに便利なのが、指定した行をハイライト表示する機能です。

上記のように「highlight:」という文字列を追記し、括弧内にハイライトしたい行番号をカンマ区切りで記述します。連続していない複数の行をハイライトすることもできます。上記は、9行目と10行目をハイライトする例です。

SyntaxHighlighterの配色（テーマ）を変える方法

様々な配色（テーマ）が使える。上から順に、MDUltra、Eclipse、Emacs

「SyntaxHighlighter」には、複数の配色（テーマ）が用意されています。本稿執筆時点での最新版であるVer 3.0.83では、デフォルトテーマを含めて8種類の配色があります。読み込ませるCSSファイルを切り替えることで、簡単に配色を変更できます。

例えば、Emacsのデザインにしたい場合は、
(A) shCore.css と shThemeEmacs.css を読み込む
(B) shCoreEmacs.css だけを読み込む
……のどちらかの方法でCSSを指定します。

(A)：
<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)：
<link type="text/css" rel="stylesheet" href="./syntaxhighlighter/styles/shCoreEmacs.css"><!-- コアとEmacsテーマを結合した単一CSSファイル -->

コアを分離したCSSと、統合したCSSがある

ページによって複数の配色を使い分けたい場合は、共通するスタイルだけを分離した「shCore.css」ファイル（共通CSS）と、テーマ本体のスタイルが記述された「shThemeXXX.css」ファイル（テーマCSS／※「XXX」の部分はテーマ名）の2つを読み込む方が、全体の読み込み時間は少なくて済むでしょう。

使いたい配色が1種類だけの場合は、必要な装飾が1つのCSSに収められた「shCoreXXX.css」ファイル（単一CSS／※XXXの部分はテーマ名）を選択すると、読み込むCSSファイルが1つで済みます。

SyntaxHighlighterのデザインを自分で作る場合

共通CSSよりもテーマCSSの方が短いので、テーマCSSをベースに修正する方が楽

共通CSSよりテーマCSSの方が短いので、（共通CSSとテーマCSSが1ファイルに統合された「単一CSS」よりも）テーマCSSだけをベースに修正する方が楽。

自分で配色を作りたい場合は、既存のCSSファイルを元にして修正すれば良いでしょう。その際は、共通CSSである「shCore.css」ファイルはそのまま読み込み、自分の望みの配色に近い既存のテーマファイル「shThemeXXX.css」をリネームして作成すると、編集する必要のある対象プロパティが簡単に絞り込めて楽に作成できます。

テーマファイルの中身は、だいたい100行程度で、記述されているスタイルの数は30～40個程度です。コアとテーマが統合されたCSSよりも、テーマだけが独立したCSSの方が、どこを修正すれば何が変化するのかが把握しやすいでしょう。