Next.js + MDX + Bulma な環境でシンタックスハイライティングを行うときの問題

このサイトは、あまり活かせていませんが Bulma という CSS フレームワークを採用しています。

• Bulma: Free, open source, & modern CSS framework based on Flexbox

Bulma は CSS だけで構成されているため使い勝手が良いので気に入っているのですが、MDX にて、コード部分のシンタックスハイライトを行なった場合に問題が発生することがあるので、その話題。

MDX にてコード部分のシンタックスハイライトをする場合、ざっと調べると、Prism を導入するという方法が見つかります。

• Prism

具体的に Next.js で Prism を使うには、rehype-prism という rehype のプラグインを使う方法があります。これは、ビルド時に MDX のコード記述部分をシンタックスハイライティングの CSS が当たるように変換してくれるというものです。

• mapbox/rehype-prism: rehype plugin to highlight code blocks in HTML with Prism (via refractor)

これを以下のように next.config.js へ埋め込み、

const rehypePrism = require('@mapbox/rehype-prism');
const withMdxFm = require('next-mdx-frontmatter')({
    MDXOptions: {
        hastPlugins: [
            rehypePrism
        ]
    }
})

_document.tsx とかにて

<link rel="stylesheet" href="/static/css/prism-tomorrow.css" /> 

を head 部分に出力するようにすると、シンタックスハイライティングされるようになります。

ただし、Bulma と組み合わせた場合、以下のように表示されたりします。

なんか、一部変な表示になっていますね。

これは、Bulma でも Prism でも .number クラスに CSS が当たっていることにより発生している現象です。 以下の issue においても同様の問題が報告されています

• please namespace all classes · Issue #302 · jgthms/bulma

ここを頑張って対応する方向でもいいのですが、rehype-highlight を導入することにすると、お手軽に問題を解決できます。rehype-highlight は、Prism ではなく、highlight.js をベースにしたライブラリです。テーマは豊富にあるので、好きなものを選びましょう。

• rehypejs/rehype-highlight: Highlight code blocks

使い方は、rehype-prism と同じで、以下のように rehypeHighlight を行い、

const rehypeHighlight = require('rehype-highlight');
const withMdxFm = require('next-mdx-frontmatter')({
    MDXOptions: {
        hastPlugins: [
            rehypeHighlight
        ]
    }
})

_document.tsx とかで

<link rel="stylesheet" href="/static/css/tomorrow.css" />

と読み込むだけです。.hljs クラスに対してスタイルを当てることで、細かなカスタマイズが行えます。

同様の問題に困っておりましたら、ぜひお試しください。