「SyntaxHighlighter」のカスタマイズ

公開日: : 最終更新日:2016/03/24 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」から作成した後読み込みます。



関連記事

SyntaxHighlighter

「SyntaxHighlighter」を使って、行番号のついたソースコードを表示する方法

他のサイトでよく見る、行番号のついたソースコードを表示してくれる「SyntaxHighlighter...

記事を読む

jugem

JUGEM:子カテゴリーを作る(ツリー化)

1.カテゴリーの編集 JUGEMブログの管理画面にて 書く > カテゴリーの編集 をクリックする。 ...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

no image
結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方  受付でお祝いの言葉を述べ、祝儀

no image
結婚祝い

お祝い品選びと費用 お祝い品の選び方  新居を構える二人には、生活

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑