Nuxt3 で Prism.js 使ってみた #Nuxt3

ソースコードをシンタックスハイライト表示させるのにとっても便利な Prism.js。
Nuxt3 で利用してみたのでまとめておきます。

1. インストール

Prism.js をインストールします。

npm install prism

2. プラグインの作成

Prism.js を実行するために、プラグインを作成します。

2-1. ファイルの作成

prism.client.js という名前でファイルを作成し、plugins ディレクトリに格納します。

ファイル名に .server または .client というサフィックスを使用すると、サーバーサイドまたはクライアントサイドのみでプラグインをロードできます。

project/
└── plugins/
    └── prism.client.js

plugins ディレクトリにあるプラグインはすべて自動登録されるので、別途 nuxt.config に追加する必要はありません。
ただし、プラグインが直下にある場合のみで、サブディレクトリに格納した場合は nuxt.config への追加が必要です。

vendor ディレクトリに格納した場合は、 nuxt.config.ts にプラグインの追加が必要です。

project/
└── plugins/
    └── vendor/
        └── prism.client.js

nuxt.config.ts

export default defineNuxtConfig({
  plugins: [
    '~/plugins/vendor/prism.client.js'
  ],
})

2-2. Prism.js の設定

作成した prism.client.js に Prism.js の3種類の設定をします。

テーマ
プラグイン
言語

それぞれ利用したいもののパスを記述するだけです。
利用するファイルは以下に格納されています。

project/
└── node_modules/
    └── prismjs/
        ├── components
        ├── plugins
        └── themes

prism-toolbar は先頭で読み込んでおく必要があります。
先頭で読み込んでおかないと prism-copy-to-clipboard など、prism-toolbar に依存しているプラグインが表示されません。

prism.client.js

import Prism from 'prismjs'

// テーマの読み込み
import 'prismjs/plugins/themes/prism-okaidia.min.css'

// プラグインの読み込み
import 'prismjs/plugins/toolbar/prism-toolbar.min.css'
import 'prismjs/plugins/toolbar/prism-toolbar.min.js'
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js'
import 'prismjs/plugins/inline-color/prism-inline-color.min.css'
import 'prismjs/plugins/inline-color/prism-inline-color.min.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.min.css'
import 'prismjs/plugins/line-numbers/prism-line-numbers.min.js'

// 言語の読み込み
import 'prismjs/components/prism-apacheconf'
import 'prismjs/components/prism-bash'
import 'prismjs/components/prism-clike'
import 'prismjs/components/prism-css'
import 'prismjs/components/prism-css-extras'
import 'prismjs/components/prism-javascript'
import 'prismjs/components/prism-json'
import 'prismjs/components/prism-markup'
import 'prismjs/components/prism-markup-templating'
import 'prismjs/components/prism-php'
import 'prismjs/components/prism-pug'
import 'prismjs/components/prism-scss'

export default defineNuxtPlugin((nuxtApp) => {
  Prism
})

Dracula Theme

私が愛用してる Dracula Theme も Prism.js に対応していました。

インストールしてファイルのパスを記述するだけで利用可能です。

npm i dracula-prism

prism.client.js

import Prism from 'prismjs'

// テーマの読み込み
import 'dracula-prism/dist/css/dracula-prism.min.css'

export default defineNuxtPlugin((nuxtApp) => {
  Prism
})

3. 利用する

コンポーネントがマウントされた後に Prism.js を実行します。

app.vue

<script setup lang="ts">
import Prism from 'prismjs'
onMounted(() => {
  Prism.highlightAll()
})
</script>

<template>
<pre>
  <code class="language-言語名">
    ...
  </code>
</pre>
</template>