highlight.jsの設置方法

articles＞coding

highlight.jsの設置方法

更新: 2026/3/31

『highlight.js』とは:

ウェブページ上にソースコードを掲載する際に便利なJavaScriptライブラリ。ソースコードを解析し、言語ごとに構文を色分けして可読性を高める。

設置方法:

以下のコードをコピペするだけ。v11.11.1（2026/3/31現在最新）を使用しています。

【head内】

<!-- カラーテーマCSS（Dracula）（v11.11.1） -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.11.1/styles/base16/dracula.min.css">

【bodyタグ終了直前】

<!-- highlight.js 本体（v11.11.1） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>

<!-- ページ内にあるすべての <pre><code> タグを対象にハイライトを実行 -->
<script>
  hljs.highlightAll();
</script>

【body内】

<!-- class="language-言語名"は表示したいコードの言語に合わせて変更する -->
<pre><code class="language-html" >ここにコード記述（※「<」や「>」には特殊文字を使用すること）</code></pre>

【カラーテーマを変更する】

現在使用しているカラーテーマは『Dracula』。変更する際はExamples - highlight.jsから選んで既存のコードと入れ替えるだけ。