かじこの備忘録

「SyntaxHighlighter」は、自身のサイトで使うにあたって、きめ細かい設定をすることができます。

行番号の開始番号の指定

「SyntaxHighlighter」は何も指定しなければ、「1」から順に行番号がつけられますが、開始番号を指定することもできます。
<pre class="brush: html;"> などの<pre>コードに

のように「first-line: 指定番号;」というコードを追記して、開始番号を指定します。
「指定番号」部分に入れた数字が開始行番号となります。

という文言を開始番号30行目から書き出したいときは、

と書きます。
「<」は「&gt;」 で、「>」は「&gt;」に直して記述します。
すると…

<div id="a">
<h1>タイトル</h1>
<p id="code">行番号の開始番号の指定</p>
</div>

こんな感じで表示されます。

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

指定行をハイライト表示します。特定の行を指し示したいときなどに便利です。

のように<pre>コードに「highlight:[];」というコードを追記してハイライト表示する行番号を指定します。
括弧内にハイライト表示したい行番号をカンマ区切りで記述します。
連続していない複数の行をハイライトすることもできます。

2行目と3行目をハイライトするときは、

と書きます。

という文言の2行目、3行目をハイライト表示したいときは、

すると、

<div id="a">
<h1>タイトル</h1>
<p id="b">特定の行をハイライト表示</p>
<p>ccccc</p>
<p>ddddd</p>
<p>eeeee</p>
<p>fffff</p>
</div>

さらにこんな風に行指定すると、下記の感じで表示されます。

<div id="a">
<h1>タイトル</h1>
<p id="b">特定の行をハイライト表示</p>
<p>ccccc</p>
<p>ddddd</p>
<p>eeeee</p>
<p>fffff</p>
</div>

「SyntaxHighlighter」のオリジナル配色を作る方法

自分で配色を作りたい場合は、既存のテーマCSSファイルを元にして作成するといいでしょう。
共通CSS（shCore.css）を組みこんでいる統合CSS（shCore～.css）より、テーマCSS（shTheme～.css）の方が短いので、テーマCSSだけをベースに修正する方が簡単です。

共通CSS「shCore.css」はそのまま読み込み、自分の希望する配色に近い既存のテーマCSS「shTheme～.css」から作成した後読み込みます。