onemuri.space

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


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

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

前提

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

yarn add prismjs

prismjs の components から読み出す

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

import 'prismjs/components/prism-go'

prismjs による code syntax highlight 手順

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

  1. plugin を作成する
  2. nuxt.config.js にて plugin を読み込む
  3. 該当ページで plugin を呼び出す

plugin を作成する

元々、いくつかの記事を参考にしていたのですが (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 にて plugin を読み込む

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

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

該当ページで plugin を呼び出す

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

/pages/note/_slug.vue

mounted() {
    Prism.highlightAll()
}

これで完了です!

before highlight

syntax無し

after highlight

syntax有り

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

まとめ

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

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

https://dev.to/overscoremedia/nuxt-meet-prism-10ic

自己紹介用画像

Riki Akagi

2019年からDeNAで働いています。GCP(CloudSQL・GAE・Cloud Function etc)とGoでAPI開発に勤んでいます。睡眠やエンジニアリングに関することに興味を持って過ごしているのでその情報を皆さんに共有していけたらなと思っています。

自己紹介の詳細