「SyntaxHighlighter」のカスタマイズ

SyntaxHighlighter WEB制作

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

行番号の開始番号の指定

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

<pre class=”brush: html; first-line: 30;“>

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

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

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

<pre class=”brush: html; first-line: 30;”>
&lt;div id=”a”&gt;
&lt;h1&gt;タイトル&lt;/h1&gt;
&lt;p id=”code”&gt;行番号の開始番号の指定&lt;/p&gt;
&lt;/div&gt;
</pre>

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

 

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

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

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

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

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

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

<pre class=”brush: css; highlight:[2,3];“>

と書きます。

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

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

<pre class=”brush: css; highlight:[2,3];”>
&lt;div id=”a”&gt;
&lt;h1&gt;タイトル&lt;/h1&gt;
&lt;p id=”b”&gt;特定の行をハイライト表示&lt;/p&gt;
&lt;p&gt;ccccc&lt;/p&gt;
&lt;p&gt;ddddd&lt;/p&gt;
&lt;p&gt;eeeee&lt;/p&gt;
&lt;p&gt;fffff&lt;/p&gt;
&lt;/div&gt;
</pre>

すると、

<div id="a">
<h1>タイトル</h1>
<p id="b">特定の行をハイライト表示</p>
<p>ccccc</p>
<p>ddddd</p>
<p>eeeee</p>
<p>fffff</p>
</div>
<pre class=”brush: css; highlight:[2,3,5,6];“>

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

<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」から作成した後読み込みます。

コメント

タイトルとURLをコピーしました