前の関連記事：Blogger:SyntaxHighlighter(4)オートローダーで必要なブラシファイルのみロードする
SyntaxHighlighterのConfiguration設定について解説してみます。
bloggerModeは何のためにある？
1 |
SyntaxHighlighter.config.bloggerMode = false; |
falseにしてみましたがとくに違いがわかりませんでした。
でもとりあえずTrueにしておきましょう、、、と、書いたのですが実はこれでは困る問題にぶち当たりました。
そうなんです。bloggerMode = trueにしていると<br/>タグが表示されなくなってしまいます。
document.write("1行目<br/>");
document.write("2行目<br/>");
document.write("3行目<br/>");
このコードをSyntaxHighlighterで表示させて見ます。
bloggerMode = trueのとき
<br/>が実行されてしまって改行されてしまっています。
これをbloggerMode = falseにすると
ちゃんと書いたとおりに表示されています。
bloggerModeはデフォルトではfalseです。
ということはこのConfigurationは何のためにある？
その他全要素に影響する設定
それぞれデフォルト値を示します。
1 |
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:"
以上それぞれ左のキーワードで""内の文言を変更できます。
あまり使う機会がなさそうです。
1 |
SyntaxHighlighter.config.stripBrs = false; |
1 |
SyntaxHighlighter.config.tagName = "pre"; |
各要素に個別にも設定できるもの
以下の設定は
1 2 |
<pre class="brush: css; auto-links: false"></pre> |
というように個別に設定もできます。
1 |
SyntaxHighlighter.defaults['auto-links'] = true; |
1 |
SyntaxHighlighter.defaults['class-name'] = ""; |
1 |
SyntaxHighlighter.defaults['collapse'] = false; |
toolbarを非表示にしていると何にも表示されなくなってしまいます。
1 |
SyntaxHighlighter.defaults['first-line'] = 1; |
1 |
SyntaxHighlighter.defaults['gutter'] = true; |
1 |
SyntaxHighlighter.defaults['highlight'] = null; |
1 2 |
<pre class="brush: css; highlight: [1, 2, 3]"></pre> |
1 |
SyntaxHighlighter.defaults['html-script'] = false; |
1 |
SyntaxHighlighter.defaults['smart-tabs'] = true; |
(2017.11.4追記。これは桁が揃うようにタブ幅を自動調整するオプションです。ただしBloggerではタブが1個のスペースに置換されて保存されるのでこの機能は意味がありません。)
1 |
SyntaxHighlighter.defaults['tab-size'] = 4; |
(2017.11.4追記。Bloggerではプレビュー画面ではこの機能でタブがtab-sizeのスペースに置換されますが、記事を保存するときにはタブが1個のスペースに置換されてしまいますので、この機能も意味がありません。Blogger:SyntaxHighlighterにコピペしたタブインデントをスペースインデントに置換するのJavaScriptを設定してこのtab-sizeを1にするとプレビュー画面でも保存した画面でもタブが4個のスペースに置換することができます。)
1 |
SyntaxHighlighter.defaults['toolbar'] = true; |
html-scriptをtrueにしてxmlブラシをclassに指定するとエラーになる
1 |
SyntaxHighlighter.defaults['html-script'] = true; |
ところがhtml-scriptをtrueにした状態で<pre class="brush: xml;">のタグを表示させようとすると以下のようなエラーメッセージがでてきます。
これはいまのところ<pre class="brush: xml;">のブラシの指定をxml以外にするしかないようです。
さらにxml以外のブラシに設定していてもBlogger:SyntaxHighlighter(4)オートローダーで必要なブラシファイルのみロードするのようにxmlブラシをオートロードにしていると、SyntaxHighlithgetrが適用されません。
この問題はxmlのブラシを常にロードするようにしておけば解決します。
具体的には以下のようにテンプレートHTMLの</head>の上行に挿入した部分に下記の4行目を追加します。
1 2 3 4 5 |
<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> |
参考にしたサイト
SyntaxHighlighter - Configuration
本家解説サイト
ARKの技術メモ: [SyntaxHighlighter]blogger mode だと<br/>タグが表示できない件
これで困っていた問題が解決しました。
0 件のコメント:
コメントを投稿