Blogger:SyntaxHighlighter(5)Configurationを設定する

前の関連記事：Blogger:SyntaxHighlighter(4)オートローダーで必要なブラシファイルのみロードする

SyntaxHighlighterのConfiguration設定について解説してみます。

bloggerModeは何のためにある？

SyntaxHighlighter.config.bloggerMode = false;

BｌoggerでSyntaxHighlighterを使用するときはtrueにしなければならない、と書いてあります。

falseにしてみましたがとくに違いがわかりませんでした。

でもとりあえずTrueにしておきましょう、、、と、書いたのですが実はこれでは困る問題にぶち当たりました。

ARKの技術メモ: [SyntaxHighlighter]blogger mode だと<br/>タグが表示できない件

そうなんです。bloggerMode = trueにしていると<br/>タグが表示されなくなってしまいます。

document.write("1行目<br/>");
document.write("2行目<br/>");
document.write("3行目<br/>");

このコードをSyntaxHighlighterで表示させて見ます。

bloggerMode = trueのとき


<br/>が実行されてしまって改行されてしまっています。

これをbloggerMode = falseにすると


ちゃんと書いたとおりに表示されています。

bloggerModeはデフォルトではfalseです。

ということはこのConfigurationは何のためにある？

その他全要素に影響する設定

それぞれデフォルト値を示します。

SyntaxHighlighter.config.strings.expandSource = "expand source";

表示される言葉を置換できます。

expandSource "+ expand source" collapseをtrueにしたときに表示される文言です。

help ”?"

alert "SyntaxHighlighter\n\n"

noBrush "Can't find brush for:"

brushNotHtmlScript "Brush wasn't made for html-script option:"

以上それぞれ左のキーワードで""内の文言を変更できます。

あまり使う機会がなさそうです。

SyntaxHighlighter.config.stripBrs = false;

改行が行末につくシステムを使っているときに改行を無視したいときはtrueにします。

SyntaxHighlighter.config.tagName = "pre";

<pre>タグ以外を使ってSyntaxhighlighterの表示をしたいときに設定します。

各要素に個別にも設定できるもの

SyntaxHighlighter.defaults['auto-links'] = true;

falseでコード内のリンクを無効にできます。 falseにしました。

SyntaxHighlighter.defaults['class-name'] = "";

SyntaxHighlighterのdivにclassを設定できます。

SyntaxHighlighter.defaults['collapse'] = false;

trueでソースをあらかじめ折りたたんでおくことができます。
toolbarを非表示にしていると何にも表示されなくなってしまいます。

SyntaxHighlighter.defaults['first-line'] = 1;

先頭行番号を指定できます。

SyntaxHighlighter.defaults['gutter'] = true;

falseで行番号表示をなしにできます。

SyntaxHighlighter.defaults['highlight'] = null;

<pre class="brush: css; highlight: [1, 2, 3]">
</pre>

のようにすると1,2,3行目をハイライト表示できます。

SyntaxHighlighter.defaults['html-script'] = false;

trueでxmlブラシを併用します。以下のようにブラシファイルのロードに注意が必要です。

SyntaxHighlighter.defaults['smart-tabs'] = true;

タブの幅を狭くできる？タブキーって入力できます？

(2017.11.4追記。これは桁が揃うようにタブ幅を自動調整するオプションです。ただしBloggerではタブが1個のスペースに置換されて保存されるのでこの機能は意味がありません。)

SyntaxHighlighter.defaults['tab-size'] = 4;

タブの幅を指定できます。

(2017.11.4追記。Bloggerではプレビュー画面ではこの機能でタブがtab-sizeのスペースに置換されますが、記事を保存するときにはタブが1個のスペースに置換されてしまいますので、この機能も意味がありません。Blogger:SyntaxHighlighterにコピペしたタブインデントをスペースインデントに置換するのJavaScriptを設定してこのtab-sizeを1にするとプレビュー画面でも保存した画面でもタブが4個のスペースに置換することができます。)

SyntaxHighlighter.defaults['toolbar'] = true;

falseで右上の?マークを消せますがcollapseをtrueにしていると何も表示されなくなってしまいます。

html-scriptをtrueにしてxmlブラシをclassに指定するとエラーになる

SyntaxHighlighter.defaults['html-script'] = true;

xmlのブラシを併用するために、これをテンプレートHTMLのSyntaxHighlighter.all();の上行に挿入します。

ところがhtml-scriptをtrueにした状態で<pre class="brush: xml;">のタグを表示させようとすると以下のようなエラーメッセージがでてきます。

<link href='shCore.cssのURL' rel='stylesheet' type='text/css'/>
<link href='shThemeDefault.cssのURL' rel='stylesheet' type='text/css'/>
<script src='shCore.jsのURL' type="text/javascript"></script>
<script src='shBrushXml.jsのURL' type="text/javascript"></script>
<script src='shAutoloader.jsのURL' type="text/javascript"></script>

やってみるとxmlが併用されるというほどきれいにならなかったのでhtml-scriptはfalseにしました。

参考にしたサイト

SyntaxHighlighter - Configuration
本家解説サイト

ARKの技術メモ: [SyntaxHighlighter]blogger mode だと<br/>タグが表示できない件
これで困っていた問題が解決しました。

次の関連記事:Blogger:SyntaxHighlighter(6)オートローダーを使う場合と使わない場合の表示速度の比較