Nuxt で Prism の code syntax highlight が効かない問題の解決

Prism.js で code の syntax highlight を設定している人は多いと思いますが、 Nuxt で導入している人のブログを参考にしても全く認識されない問題を解決しました。

せっかくなので、 code syntax highlight の手順も後述します。

前提

prismjs の install は完了していることにします。

yarn add prismjs

結果から話すと、自作している plugin でも、該当するページの .vue でもどちらでも良いですが syntax highlight したい言語を↓のように import してあげれば良いです。

import 'prismjs/components/prism-go'

code syntax highlight するまでの手順は以下になります。

元々、いくつかの記事を参考にしていたのですが (https://izm51.com/posts/markdown-it-prismjs/)、それらの情報は plugins/prism.js のように plugin として js ファイルを作成して、その中を以下のように記述します。

import Prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css'
import 'prismjs/components/prism-go'

export default Prism

ただし、日本語のブログはほとんどが import 'prismjs/components/prism-go' の言語サポート用の記述がなく、それでもsyntax されているようでした。今回は上記の language 用の components を読み込むことで解決しました。

nuxt.config.js にて plugins の部分に、自作 plugin を読み込ませてあげます。

plugins: [
    {
        src: '~/plugins/prism.js',
        mode: 'client'
    }
]

syntax highlight したいページで呼び出します。

/pages/note/_slug.vue

mounted() {
    Prism.highlightAll()
}

これで完了です！

before highlight

after highlight

ちなみに、 theme はいくつかあるので好きなものを選んで見てください。

数ヶ月 code syntax highlight できない状態を無視していたので、ようやく解決できてよかったです。

以下の記事を読んで解決することができました。