hightlihgt.jsでBloggerのコードをハイライト

Bloggerを始めるにあたりコードも書こうかと思っているので、調べたところ,
highlight.jsを使ってみることにした。
ざっくりと設定方法をメモ。

highlight.js

cdnjsから2行をコピーし、テーマのCSSを変更、Usageから3行目をコピーして、以下の3行を作成。

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

Bloggerの管理画面「テーマ」から「HTMLを編集」を選択し、ヘッダーの一番最後に貼り付ける。
また、モバイル用テーマのカスタマイズ画面で、「デフォルト」→「カスタム」に変更。

使用方法としては、投稿画面のHTML編集で、以下のようにする。

<pre><code class="vbnet">...</code></pre>

コードの種類をclassで指定する。htmlとかvbnetとか。

3/15※この投稿もSyntaxHighlighter向けにタグを更新