設定
SyntaxHighlighter.configSyntax Highlighterでは幾つかの設定が出来ます。
一覧と簡単な説明は以下の通りです。
| 名前 | デフォルト値 | 説明 |
| bloggerMode | false | コード中の<br />を実際の改行として扱う |
| strings | Object | 各種メッセージの定義 |
| stripBrs | false | コード中の<br />の無視 |
| tagName | "pre" | ターゲットのタグを変更する |
bloggerMode (表へ戻る)
SyntaxHighlighter.config.bloggerMode = true;このモードをtrueにすると、preタグの中(若しくはscriptタグ使用時のCDATAセクション)の<br />タグの扱いが変わります。
preタグの中に
テスト<br />テスト
と記述すればこの様に表示が変わります。
bloggerMode = true時は、preタグ中に記述したコードの中の改行タグを実際の改行として扱う様になります。公式サイトでは、Bloggerならtrueにするようにと書かれていますが、trueにしなくとも問題無いみたいです。
Bloggerを始めたばかりで詳しくは知りませんが、少し前まではHTMLの貼り付けで改行があった場合、自動で改行の<br />タグが付加されたらしいので、その対策で<br />を改行として扱うモードがあるのかなと想像しています。
ただ今は、オプションで改行時の自動<br />付加は選択可能ですし、自動で<br />を付加する設定にしても、preタグやCDATAセクション内では自動的に<br />を付けることは無いみたいなので、Bloggerでもfalseのままで良いのではないでしょうか？（良く分かりません…)
<br />が付加されるタイプのブログを使用している場合等、<br />で問題が出る場合に有効な設定だと思われます。
strings (表へ戻る)
エラーメッセージ等を変更できます。| 名前 | デフォルト値 | 説明 |
| expandSource | "+ expand source" | タイトルを設定せずに折りたたんだ時に表示される |
| help | "?" | 右上に出るツールバーにマウスオーバーすると表示される文字 |
| alert | "SyntaxHighlighter\n\n" | エラーが発生した時に出るウィンドウに表示される。他のnoBrushやbrushNotHtmlScriptのメッセージと組み合わされる |
| noBrush | "Can't find brush for:" | brushが読み込めなかった時に表示される |
| brushNotHtmlScript | "Brush wasn't made for html-script option:" | HTML混在モードの時に、読み込んだbrushがそのモードに対応していない時に表示される |
SyntaxHighlighter.config.strings.expandSource = "+展開します"; SyntaxHighlighter.config.strings.noBrush = "brushファイルを読み込めません。";
stripBrs (表へ戻る)
SyntaxHighlighter.config.stripBrs = true;bloggerModeでは、preタグ中の<br />を実際の改行として扱いましたが、こちらはpreタグ中の<br />を無視し、表示もしません。
公式サイトでは行末の<br />を無視すると書いてある様なのですが、行末で無くても全て無視するみたいです。この機能も、bloggerModeと同じく<br />タグ関係で問題があった場合に試してみると良いと思います。
tagName (表へ戻る)
コードを表示するタグを変更します。通常はpreタグですが、これを変更することにより、例えばh6タグ内に書かれた文字を整形して表示する、なんてことが出来ます。その時はpreタグは通常の動作に戻ります。SyntaxHighlighter.config.tagName = "h6";
パラメータのデフォルト値設定
SyntaxHighlighter.defaultsSyntax Highlighterでは個別にパラメータを指定して行番号やツールバーの表示・非表示の切り替え等が出来ますが、記述しない場合デフォルト値が使われます。
またそれらの値のデフォルト値は、自分で設定する事が出来ます。
| 名前 | デフォルト値 | 説明 |
| auto-links | true | コード内アドレスにリンクを張る |
| class-name | '' | SyntaxHighlighterの全要素にクラスを追加する |
| collapse | false | 折りたたみ表示をする |
| first-line | 1 | 開始行番号を設定する |
| gutter | true | 行番号を表示する |
| highlight | null | ハイライト行を設定する |
| html-script | false | コードをHTMLと他言語の混在として扱う |
| smart-tabs | true | スマートタブを使用する |
| tab-size | 4 | タブサイズの設定をする |
| toolbar | true | ツールバーを表示する |
auto-links (表へ戻る)
コード内に書かれたアドレスにリンクを張るかどうかどうかの設定です。厳密には知りませんが、凡そ://と書かれて前後にアドレスに使用可能な文字列があればアドレスと判断しているみたいです。SyntaxHighlighter.defaults['auto-links'] = true;
<script language="javascript" type="text/javascript"> var a = "https://hogehoge.hoge.hoge/"; </script> http://hogehoge.hoge.hoge/ ftp://hogehoge.hoge.hoge/ hoge://hogehoge.hoge.hoge +://a _://あ _://h あ://st ://
<script language="javascript" type="text/javascript"> var a = "https://hogehoge.hoge.hoge/"; </script> http://hogehoge.hoge.hoge/ ftp://hogehoge.hoge.hoge/ hoge://hogehoge.hoge.hoge +://a _://あ _://h あ://st ://
class-name (表へ戻る)
SyntaxHighlighter.defaults['class-name'] = 'test';SyntaxHighlighterの全要素にスタイルを追加します。スペースで複数追加できます。
このパラメータについて、有用な使い方が良く分かりません。背景色等を定義したスタイルを追加しても、各要素で再定義される事が多い為、デザインを大きく変更出来ない様です。細かく変更出来るなら、preタグ毎にクラスを追加して1ページ中に違うデザインのコード表示が出来るのかなと思ったのですが(良く分かっていないだけかも…)。
collapse (表へ戻る)
SyntaxHighlighter.defaults['collapse'] = true;折りたたみ表示を設定します。
preタグにタイトルが記述してあればタイトルを表示し、タイトルが無ければstrings.expandSourceに設定した文字列を表示します。この表示はtoolbarが有効になっている必要があります。
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
first-line (表へ戻る)
SyntaxHighlighter.defaults['first-line'] = 50;
コードの開始行番号を設定します。
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
gutter (表へ戻る)
行番号の表示・非表示を設定します。trueで行番号を表示します。SyntaxHighlighter.defaults['gutter'] = true;
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
highlight (表へ戻る)
ハイライト行を設定します。存在しない行を指定してもエラーにはなりません。SyntaxHighlighter.defaults['highlight'] = [1, 3];
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
html-script (表へ戻る)
コードがHTMLと他言語の混在時に指定します。これを使用する際には、shBrushXml.jsを読み込んでおく必要あります。このパラメータを使用出来る言語は決まっていて、対応しない言語と同時使用するとエラーが表示されます。SyntaxHighlighter.defaults['html-script'] = true;
<!-- javascript --> <script language="javascript" type="text/javascript"> SyntaxHighlighter.all(); </script> <!-- HTML --> <p> test </p>
<!-- javascript --> <script language="javascript" type="text/javascript"> SyntaxHighlighter.all(); </script> <!-- HTML --> <p> test </p>
smart-tabs (表へ戻る)
スマートタブを使用するかしないかの設定をします。SyntaxHighlighter.defaults['smart-tabs'] = true;
1 1 1 1 12 12 12 12 123 123 123 123 1234 1234 1234 12345 12345 12345
1 1 1 1 12 12 12 12 123 123 123 123 1234 1234 1234 12345 12345 12345
公式サイトの説明が分かりにくいので少し書きますと、スマートタブをtrueにしたときは、タブの後の文字位置は全行揃います。通常タブといえばこちらの動作を思い浮かべると思います。
一方、スマートタブをfalseにすると、位置に関係なくタブ自体がタブサイズのスペースに変換されるだけの動作になります。
どちらを設定しても、Syntax Highlighterで表示されるときにタブはスペースに変換される様です。
tab-size (表へ戻る)
タブサイズの設定をします。smart-tabs = ture時のタブサイズ1と2が同じように見えますが、これで正常です。SyntaxHighlighter.defaults['tab-size'] = 2;
1 1 1 1 1234567890123
1 1 1 1 1234567890123
1 1 1 1 1234567890123
1 1 1 1 1234567890123
1 1 1 1 1234567890123
1 1 1 1 1234567890123
1 1 1 1 1234567890123
1 1 1 1 1234567890123
toolbar (表へ戻る)
ツールバーの表示・非表示を設定します。collapseをtrueにする時は、toolbarをfalseにする事は出来ません。SyntaxHighlighter.defaults['toolbar'] = true;
<script language="javascript" type="text/javascript"> SyntaxHighlighter.all(); </script>
<script language="javascript" type="text/javascript"> SyntaxHighlighter.all(); </script>
上記のSyntaxHighlighter.configやSyntaxHighlighter.defaultsの設定が済んだ後に、 SyntaxHighlighter.all();を実行します。
タグ中でのパラメータの指定
パラメータの詳細は上記の通りですが、通常はdefaultsの値を変更するよりもタグに直接指定するほうが便利だと思います。ローカルな設定になるので、他に貼りつけたSyntax Highlighterの表示が変更されることはありません。class中で指定したbrushに続いて、セミコロンで繋ぎ、パラメータ名: 値のフォーマットで記述します。パラメータに順番は無い様です。
<pre class="brush: js; highlight: [6,7]; tab-size: 2; toolbar: false" title="sample">
scriptタグを使ったコードの貼り付け
解説はpreタグで貼り付けることを前提に書いてありますが、scriptタグでも貼り付ける事が出来ます。<script type="syntaxhighlighter" class="brush: c-sharp"><![CDATA[
namespace Program
{
public class Program
{
static void Main(string[] args)
{
}
}
}
]]></script>
2～10行のハイライト部分にコードを記述します。
どちらを使うにしろ一長一短ある様です。
| 利点 | 欠点 | |
| preタグ | タグ中のコードは非表示にならない。 | <>&"'の文字をエスケープする必要がある。 |
| scriptタグ | 殆どの文字をそのまま記述できる。 | </script>だけはエスケープする必要がある。 タグ中のコードが非表示になる事がある。 |
ここまでで、設定に関する情報は終わりです。次はデザインについてです。