Blogger シンタックスハイライト（highlight.js）の導入

導入方針

導入方針は以下のとおり。

StackEdit + Blogger の環境に対応
VB 系言語に対応
手間がかからない。

StackEdit では、Google Code Prettify と highlight.js に対応している。
Settings -> Extensions -> MarkdownExtra -> Syntax Hilighter で

None
Prettify
Highlight.js

が選択可能になっている。

なお、ここで Highlight.js を選択しても、<pre class="prettyprint"> と出力されるので、Google Code Prettify でも使えそうなんだけど。（バージョンアップしたときに過去バージョンとの互換性のために残したのかな。）

Google Code Prettify は、VB については

It works passably on Ruby, PHP, VB, and Awk…

なんとか動くっぽいけど、VB の自動判定に難があったので、とりあえず highlight.js を採用する。

highlight.jsの導入

まず、Getting Started を読む。

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

CSS読み込んで、JS読み込んで、initHighlightingOnLoad() を呼べばいい。

次に、同じページの Getting Libraly を読む。

CDN が使えるけど、CDN は Getting highlight.js の Common にある23言語のみ対応しており、その中に VB 系は含まれていない。
23言語に含まれていない場合は、

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>

のように手で追加する必要がある。
VB.NET と VBScript 用のファイル名が分からなかったので、
GitHubのSourceで vbnet.js 、vbscipt.js であることを確認。（ minify 化したファイル名 xxx.min.js で指定する。）

最終的に

    <!-- hilight.js -->
    <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css' rel='stylesheet'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/vbnet.min.js'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/vbscript.min.js'/>
    <script>hljs.initHighlightingOnLoad();</script>

を</head>の上に追加する。
Blogger の「 HTML の編集」で保存しようとすると <link> が閉じていないと怒られたので / を追加する。（Blogger の「 HTML の編集」は HTML5 に対応していないもよう）

CSSの微調整

コードブロックの文字サイズが本文と一緒なので一回り小さくし、行間も詰める。
また、インラインコードにも背景色も付けたい。
以下を CSS に追加する。

pre code.hljs {
    font-size: 13px;
    line-height: 1.2;
}
code {
    background:#F0F0F0;
}

font-family を Consolas (Windows標準) 等にするのはとりあえず見送った。

行番号

highlit.js は行番号表示には対応していないし、する気もない。作者のご意見はこちら。
行番号を表示するには、highlightjs-line-numbers.js などを使う必要がある。

続く

2017-11-02