前回、コードブロックについて調べましたが、Webで使えるシンタックスハイライトのライブラリーが良さそうでしたので、これでシンタックスハイライトをするように変更したいと思います。
環境
- OS X El Capitan バージョン 10.11.3
- Jekyll バージョン 3.0.2
- kramdown バージョン 1.9.0
- highlight.js バージョン 9.1.0
highlight.js？
Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework and has automatic language detection.
GitHub - isagalaev/highlight.js: Javascript syntax highlighter
早速使ってみる
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
コードブロックはkramdownで~~~のように書いています。
ヘッダーでCSSとスクリプトを読み込んでhljs.initHighlightingOnLoad();を実行するだけです。
言語を自動的に判断して適切なシンタックスハイライトをしてくれます。
ホームページからシンタックスハイライトのカラーを選ぶことができるのでお気に入りのを使います。
簡単に使えて便利です。