Prism.jsであとから言語を追加する方法｜軽量で動的なコードハイライト対応

8

Views

Prism.jsで途中から言語を追加する方法

Prism.jsは軽量で使いやすいシンタックスハイライトライブラリですが、最初に読み込んだときに含まれていない言語をあとから追加したい場面もあります。

この記事では、途中から言語を追加する2つの方法と、ファイル差し替え時の注意点について初心者向けにわかりやすく解説します。

1. Prism.jsは「必要な言語だけ」を読み込む設計

Prism.jsは読み込みを高速にするため、初期状態ではHTMLやCSSなど一部の言語しか含まれていません。
追加で使用したい言語（例：PHP、Pythonなど）がある場合は、自分でファイルを追加する必要があります。

2. CDNであとから言語を追加する方法

Prism公式CDNでは、各言語用の `.js` ファイルが用意されています。

📌 例：PHPをあとから追加する

<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-php.min.js"></script>
<script>Prism.highlightAll();</script>

注意：
Prism本体（prism.js）より後に読み込む必要があります。

3. Downloadページからファイルを差し替える方法

複数の言語をまとめて管理したい場合は、Prism.js公式ダウンロードページから必要な言語を選び直してファイルを再生成します。

✅ 再ダウンロード時の注意点

  • 今まで使っていた言語も必ず選び直す必要があります。
  • 選び忘れると、以前ハイライトされていた言語が無効になることがあります。
  • CSS・JSともに古いファイルは差し替え（上書き）します。

📥 ダウンロード手順

  1. 公式ダウンロードページを開く
  2. 必要な言語（今まで使っていた＋今回追加したいもの）をチェック
  3. Download JSとDownload CSSをクリック
  4. ダウンロードしたファイルを自作テーマ内の `js/` や `css/` に配置
  5. 既存のファイル（prism.js, prism.css）は上書き
<link rel="stylesheet" href="css/prism.css">
<script src="js/prism.js"></script>
<script>Prism.highlightAll();</script>

4. 動的に追加された要素に対応させる

Ajaxなどで後から挿入されたコードブロックは、自動でハイライトされません。
その場合は次のように明示的に適用します。

const newCode = document.querySelector('pre code.language-php');
Prism.highlightElement(newCode);

5. よくある注意点

  • 読み込み順： 本体 → 言語 → highlightAll() の順に
  • CSSを編集している場合： 上書き前にバックアップ
  • 同じ言語を複数回読み込まない： 動作不安定の原因になります

おわりに

Prism.jsで途中から言語を追加したい場合は、CDNで読み込む方法と再ビルドして差し替える方法があります。

特に後者の場合は「使っていた言語を忘れずに再選択する」ことと「ファイルの差し替え」に注意しましょう。 プロジェクトの規模や管理のしやすさに応じて、どちらかを使い分けてください。

関連記事