highlight.js でプログラムのコードに色を付ける方法

当サイトはアフィリエイト広告を利用しています

プログラムのコードに色を付けたい(ハイライト)時に使う「highlight.js」の設置方法です。

ファイルをダウンロードして、フォルダを任意の場所に置くだけでコードの色を変えることができるので大変便利です。

目次

公式サイト

https://highlightjs.org/

 

ダウンロード

公式サイトから 「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>

この記事を書いた人

目次