登録日： 2025-03-01   最終更新日： 2025-03-23

highlight.js について

highlight.js は、クライアントサイドでコードのシンタックスハイライトを行う軽量な JavaScript ライブラリです。Webページ上でプログラミングコードを見やすく表示するために使われます。

特徴

• 自動言語検出: 言語を指定しなくても、適切なシンタックスを自動で判断。
• 多言語対応: 200以上のプログラミング言語に対応。
• テーマカスタマイズ: 多くの組み込みテーマがあり、CSS でスタイルを調整可能。
• 軽量 & 高速: クライアントサイドで動作し、動的にコードをハイライト。
• プラグイン & 拡張性: カスタマイズや機能拡張が可能。

インストール

CDN を利用

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

npm を利用

npm install highlight.js

使い方

自動適用

<pre><code class="language-javascript">
const hello = "Hello, world!";
console.log(hello);
</code></pre>

hljs.highlightAll();

手動適用

const codeBlock = document.querySelector("pre code");
hljs.highlightElement(codeBlock);

カスタマイズ

テーマを変更するには、CSS を差し替えるだけでOK

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai.min.css">

---