Blogger でコードハイライト

ここに、そのものズバリの記事が在ったので参考にさせてもらった。

「highlight.js」のページで「Get version x.x.x」をクリック。


「Getting highlight.js」のページに、CSS とスクリプトの定義が 2種類有るので、好きな方をコピー。


Bloggerの設定から「レイアウト」->「ガジェットを追加」->「基本」->「HTML/JavaScript追加」->「+」で編集画面を開き、「コンテンツ」にペースト。「タイトル」を適当につけて「保存」。


後は記事の中で、起動スクリプトを実行し、コードにクラスを設定すると、

<script>hljs.initHighlightingOnLoad();</script>

<pre><code class="swift">
var a =  1;
let b = "this is b";
</code></pre>

こうなる。

var a =  1;
let b = "this is b";

起動スクリプトはコードハイライトが必要な記事でだけ実行しても良いが、CSS とスクリプトの定義と一緒にガジェットに保存してしまっても良い。私はまとめてガジェットへ保存してしまった。

スタイルを変えたい場合は、「highlight.js demo」のページで、好きなスタイルを選び、


CSS の URL の「default」の部分を書き換える。
例えば「Xcode」スタイルにしたい場合、これを

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/default.min.css">

こうする。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/xcode.min.css">

という訳で今回、設定したガジェットはこんなカンジ。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/xcode.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>