シンタックスハイライト機能を追加

一つ前の投稿 を見れば一目瞭然だが、highlight.js を用いて、ブログ内に埋め込まれたコードのシンタックスハイライト機能を追加した。

もともと processmd で highlightCode のオプションがデフォルトでオンになっているので、内部実装を見に行った。このオプションは markdown-it のものだったらしく、 markdown-it のドキュメントを見ればすぐ使い方がわかった。

というわけで、やっと最初に書いた highlight.js を探り当てたので、 Download からよく使いそうな言語をチェックしてダウンロードした。highlight.js では多種多様のテーマが用意されている。テーマ選びには Demo を使われたし。。( Top ページからのリンクがなかったので探すのに苦労した)

私が選択したのは Darcula 。同じダーク系のテーマで Monokai と悩んだが、 Javascript の読みやすさでこっちに。

おおきな変更なく使っているが、一つだけ。スクロールバーがダサい(コードに限らないが)ので自分で CSS を書いた。公式の CSS に足す形で以下の CSS を追記。

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
  border-left: solid 1px #ececec;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #fff;
}

code::-webkit-scrollbar-thumb {
  background: #ccc;
  box-shadow: 0px 0px 0px 2px #2b2b2b inset;
}
code::-webkit-scrollbar-track {
  border-left: none;
}

一つ前の投稿 で見れるが、横にスクロールすればいい感じにバーも動く。満足。