Github Pagesでコードハイライト

Github Pagesをデフォルトで利用すると、コードハイライトがされずに
読みづらくなってました。

それを、以下のようにコードハイライトする方法を記載します。

$(document).ready(function(){
　　window.test = () => console.log('test');
});

今回使ったのは、highlight.jsです。
利用は簡単で、ダウンロードページから Downloadします。

「You can download a custom bundle including only the languages you need.」
とあったので、自分はDockerfileを追加しました。たまに使うので。

stylesはいっぱいあるので、今回は、github.cssを利用しました。

github.cssを/assets/css/に
highlight.min.jsを/assets/js/に配置します。

そして以下のようにheaderに記載すると、利用可能です。

<link rel="stylesheet" href="/assets/css/github.css">
<script src="/assets/js/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

全ページに反映されるようにlayoutのhtmlに反映させたので、
これで色がついて少しサイトが見やすくなったかな？ｗ

なにやら、_config.yamlで実現する方法もあるようですが・・・
よくわからなかったので、今回はhighlight.jsを利用しました。

ダウンロードして配置しなくても、サイトにあるのを利用することも可能なようです。
詳しくは公式を確認ください。
今回は、バージョンが変わったり、サイトが利用できないときに利用できないことがないよう、
自分のところに持ってきました。