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 時にも取り除かれることなく使えるようになりました。