Prism.jsでコードブロック内に記述したHTMLタグを維持したい

💪やりたいこと

シンタックスハイライターの Prism を利用しているが、コードブロック内に記述した HTML タグを維持したままシンタックスハイライトを有効にしたい。

Example 1. コードブロック中のHTMLタグ

元のソース

echo "<strong>Strong text.</strong>"

通常ではHTMLタグは除外される

echo "Strong text."

このようにHTMLタグをコードブロック内でも維持したい

echo "Strong text."

HTML タグをテキスト表示させたい場合は、次の2文字について文字実体参照に変換しておく。

< → <
& → &

🌠結論: Keep Markup プラグインを使う

Keep Markup プラグインを利用するだけでいい。
このプラグインは <code> ブロック内の HTML タグを保護する。

Example 2. Keep Markup プラグインの使用例

Node(TypeScript)での例

import * as Prism from 'prismjs'
// plugins
import 'prismjs/plugins/keep-markup/prism-keep-markup.min'
// languages
import 'prismjs/components/prism-bash.min'
import 'prismjs/components/prism-git.min'
import 'prismjs/components/prism-json.min'
import 'prismjs/components/prism-typescript.min'

Prism.highlightAllUnder(document)

コードブロック内の HTML 要素をカスタマイズしたいとき

Keep Markup プラグインは before-highlight の hooks で実行され、HTML タグをコードから一時的に隔離して保護する。
よってコードブロック内の HTML 要素をカスタマイズしたいときは、それよりも前に実行される before-sanity-check や after-sanity-check などの hooks で処理すればいい。

Example 3. コードブロック内のHTML要素を操作する

AsciiDocのコールアウト要素を編集する例

import * as Prism from 'prismjs'
import 'prismjs/plugins/keep-markup/prism-keep-markup.min'

// コールアウト番号は CSS で表示させるため、テキスト部分は非表示にする。
Prism.hooks.add('before-sanity-check', (env) => {
  env.element.querySelectorAll('.conum + b').forEach((elem) => {
    elem.classList.add('hidden')
  })
})

Prism.highlightAllUnder(document)

📖参考

Keep markup ▲ Prism plugins