code のハイライトを行ってくれる highlight.js を導入しました。

自分のハマるところがあったので残しておきます。

highlight.js は <pre><code></code></pre> を自動で読み取りパース、DOM構造を変更し、classを付与してくれます。
その際に用意されているCSSを当てることになります。

実行している環境としては Nuxt + tailwindcss という環境です。
ハマった要因としてはこの記事が html をDBに保存してあり、それをそのまま v-html で出力しているというところと nuxt/tailwind を使用しているところにあると思います。

nuxt/tailwind はデフォルトで purgeCSS プラグインが含まれており、build 時に使用されていないCSSを取り除いてくれます。
highlight.js のDOMを読み込んで class を付ける仕組みと、完全にバッティングし、classを付ける前は未使用のCSSとなるのでそれ用のCSSが build 後にはすべて取り除かれるという状況が発生していました。
localhost で開発している最中は問題なく動作し、productionにdeployするとうまく動かないという。

purgeCSS には whitelist で、取り除かない class などを指定することができます。 nuxt.config.ts(js) に書きます。

  purgeCSS: {
    // highlightjs の style 用の selector を purge しない
    whitelist: [
      'hljs',
      'hljs-subst',
      'hljs-string',
      'hljs-title',
      'hljs-symbol',
      'hljs-bullet',
      'hljs-attribute',
      'hljs-addition',
      'hljs-variable',
      'hljs-template-tag',
      'hljs-template-variable',
      'hljs-comment',
      'hljs-quote',
      'hljs-number',
      'hljs-regexp',
      'hljs-literal',
      'hljs-type',
      'hljs-link',
      'hljs-deletion',
      'hljs-meta',
      'hljs-keyword',
      'hljs-selector-tag',
      'hljs-doctag',
      'hljs-title',
      'hljs-section',
      'hljs-built_in',
      'hljs-tag',
      'hljs-name',
      'hljs-emphasis',
      'hljs-strong',
    ]
  },

事前に highlight.jsで使用するすべてのclassをwhitelistに登録することで build 時にも取り除かれることなく使えるようになりました。