プログラムのコードに色を付けたい(ハイライト)時に使う「highlight.js」の設置方法です。
ファイルをダウンロードして、フォルダを任意の場所に置くだけでコードの色を変えることができるので大変便利です。
目次
公式サイト
ダウンロード
公式サイトから 「Get version ~」をクリック

使用する言語にチェックを入れます。
私はデフォルトのままにしました。

サイトの下のほうへスクロールして「Download」をクリック

ダウンロードしたファイルを解凍する


stylesフォルダにファイルをコピーする
設置したい場所に「styles」フォルダを作る

まず解凍したフォルダ「highlight」にある「highlight.min.js」をコピーして、stylesフォルダに貼り付ける。

「highlight」-「styles」 の中にある「default.min.css」 をコピーして、stylesフォルダに貼り付ける。

適用したいデザインをサンプルから見つけて、そのファイルをコピーする。
サンプルは公式サイトTOPページから確認ができます。


stylesフォルダ内はこのようになりました。

header 部分に javascript を記述する
<link rel="stylesheet" href="./styles/unikitty-light.min.css">
<script src="./styles/highlight.min.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>