Blogger Highlight.jsによるシンタックスハイライトの設定方法を解説

どうも。どっことです。今回は、Bloggerにコードを載せるためのシンタックスハイライトの設定方法を解説していきます。

シンタックスハイライト：highlight.js

Bloggerのhead内に追記する。

Getting Started

<!-- syntax highlight-->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css' rel='stylesheet'/>
<style>code{font-family:Menlo,Consolas,Courier,monospace;color:#333;background:#f8f8f8};</style>
<style>kbd{padding:.1em .6em;border:1px solid rgba(63,63,63,0.25);-webkit-box-shadow:0 1px 0 rgba(63,63,63,0.25);box-shadow:0 1px 0 rgba(63,63,63,0.25);font-size:.7em;font-family:sans-serif;background-color:#fff;color:#333;border-radius:3px;display:inline-block;margin:0 .1em;white-space:nowrap}</style>
<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/awk.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang-repl.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/ldif.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/scheme.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/yaml.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

ただしハマりポイントとして、リンクタグやスクリプトタグはエンドタグを別に書かないと、だいたい正しく動作しない。つまり、

<link href="..." rel="..."/>

ではなくて

<link href="..." rel="..."></link>

こう書く。スクリプトも同様。

コード部分の記載を変更

記事内のコード部分を

<pre><code></code></pre>

で囲って記載する。これで書いたら、いったん動作確認。

スタイルを変更する

default.min.css の部分を変えると、スタイルを変えられるとのこと。ハイライトのデモページ、スタイル一覧はGitHubのコードを参照して、draculaに変えることにした。

highlight.js demo

GitHub /styles

default.min.css

を

dracula.min.css

に変えて動作確認。ちなみに、dracula.cssでは動作しなかった。

参考

• Bloggerで技術ブログを書くためのカスタマイズ
• Highlight.js