Bloggerテーマをカスタマイズ - SyntaxHighlighterの設定をしよう

SyntaxHighlighter とは、プログラムのソースコードなどの構文を色分けなどして見やすく表示してくれる JavaScript のライブラリです。
SyntaxHighlighter にはいくつかの設定項目が設けられています。

ここでは SyntaxHighlighter の設定項目について解説します。



SyntaxHighlighter の導入に関しては「SyntaxHighlighterを導入しよう」を参照してください。

SyntaxHighlighter の設定

公式サイトの設定に関する解説ページは以下の通りです。（英語です）
https://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

設定項目は大きく分けて２つあります。

• SyntaxHighlighter.config    ・・・　全ての要素に共通する設定を行なう
• SyntaxHighlighter.defaults ・・・　全ての要素または要素個別に設定を行なう

SyntaxHighlighter.config

全ての要素に共通する設定です。
設定は SyntaxHighlighter.all(); が呼び出される前に行います。
Blogger では「テーマ」の「HTML編集」から行う事になります。

設定項目は以下の通りです。

• bloggerMode ・・・　BloggerでSyntaxHighlighterを使う場合は「true」にする
• strings          ・・・　各種メッセージをカスタマイズする
• stripBrs        ・・・　改行に<br />が自動で挿入されてしまう場合には「true」にする
• tagNames     ・・・　<pre>要素以外を使ってソースを書く場合の要素名を指定する

設定例

<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.all();
</script>

SyntaxHighlighter.defaults

全ての要素に対して一括で設定する事も、各要素ごとに設定を行なう事も出来るます。
一括で設定する場合は Blogger では「テーマ」の「HTML編集」から行います。
個別に設定する場合は <pre>要素の class属性を使って指定します。

主な設定項目は以下の通りです。

• auto-links  ・・・　URLを自動認識してリンクにしたくない場合「false」
• collapse    ・・・　初めに折立まれた状態にする場合「true」
• first-line    ・・・　行番号表示の先頭行の番号
• gutter       ・・・　行番号を非表示にしたい場合「false」
• highlight   ・・・　強調表示したい行を指定
• tab-size    ・・・　タブを何文字分のスペースで表示するかを指定
• toolbar     ・・・　右上に表示される「？」を非表示にする場合「false」

一括で設定する例

<script type='text/javascript'>
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['first-line'] = 100;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>

個別に設定する例

<pre class='brush:html; first-line:10; highlight:[2,4,5]'>
   :
   :
</pre>