Dark

Nuxt.jsでtailwindcss(PurgeCSS)とKaTeX, highlight.jsを両立させる

はじめに

PurgeCSSはbuild時に使用されていないcssセレクタを削除します。v-htmlで記事を読み込む設計の場合、build時に使用されないKaTeXやhighlight.jsのセレクタが削除されてしまい、数式やシンタックスハイライトを表示できなくなります。

PurgeCSSには、削除しないセレクタを設定できるwhitelistwhitelistPatternsがあるので、これらを用いてKaTexとhighlight.jsを正常に動作させるmodulesを作ります。

コード

  • index.js
  • katex.js

の2つからなります。以下の様にmodules/purgecss-whitelistディレクトリに配置し、nuxt.config.jsbuildModulesに登録します。

modules
└── purgecss-whitelist
    ├── index.js
    └── katex.js
  buildModules: [
    '~/modules/purgecss-whitelist',
  ],

katex.js

KaTeXで使われるセレクタを抽出し、リストで返す関数を定義してあるファイルです。

const fs = require('fs')

module.exports = () => {
  const css = fs.readFileSync(
    './node_modules/katex/dist/katex.min.css',
    'utf-8'
  )
  const text = css
    .replace(/(\{[^\}]*\})|[,>+]/g, ' ')
    .replace(/\.\s/g, ' ')
    .replace(/\./g, ' .')
    .replace(/\s+/g, ' ')

  const res = text
    .split(' ')
    .filter(selector => selector[0] === '.')
    .map(selector => selector.slice(1))

  return [...new Set(res)]
}

index.js

実際にホワイトリストに追加するファイルです。

const katexSelectorsList = require('./katex.js')

export default function () {
  const { options } = this.nuxt

  options.purgeCSS = {
    whitelistPatterns: [
      /hljs.*/,
    ],
    whitelist: katexSelectorsList()
  }
}

結果

このモジュールを用いることで、KaTeXとhighlight.jsに用いられるセレクタがbuild時に削除されなくなり、正常に表示されるようになります。

e.g.: Nuxt.js製サイトにKaTeX(markdown-it-katex)で数式表示

Share:
記事一覧
Dark