どうも。どっことです。今回は、Bloggerにコードを載せるためのシンタックスハイライトの設定方法を解説していきます。
シンタックスハイライト：highlight.js
Bloggerのhead内に追記する。
<!-- 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に変えることにした。
default.min.cssを
dracula.min.cssに変えて動作確認。ちなみに、dracula.cssでは動作しなかった。
