Nuxt.jsでシンタックスハイライトを設定する方法

今回は、Nuxt.jsでコードのシンタックスハイライトの設定方法を解説していきます。

Prism.jsを使用すると簡単に実現することができます。

Prism.jsをインストールする

Prism.jsというライブラリを使用します。

Nuxt.jsプロジェクトにインストールしましょう。

yarn add prismjs

pluginsにprism.jsを作成する

Nuxt.jsプロジェクトにplugins/prism.jsを作成します。

├── plugins
│   └── prism.js

import Prism from "prismjs"
import "prismjs/themes/prism.css"
export default Prism

nuxt.config.jsの設定

nuxt.config.jsに先ほど作ったplugins/prism.jsを読み込ませます。

nuxt.config.jsは、Nuxt.jsの設定ファイルです。

export default {
  plugins: [
    "@/plugins/prism",
  ],
}

Vueファイルにprism.jsを読み込む

Vueファイルのmountedにprism.jsを適用させるコードを書きます。

mountedはDOMが作成された後に、実行される関数です。
APIで取得したコンテンツをDOMに適用させた後に、Prism.highlightAll()を実行します。

<template>
  <div v-html="$md.render('記事データ')"></div>
</template>

<script>
import Prism from "@/plugins/prism" // <= Vueファイルに読み込む
export default {
  mounted() {
    Prism.highlightAll() // <= ここで適用させる
  }
}
</script>

※$md.renderは、markdown-itを使用しています。

ハイライトのカラー設定

シンタックスハイライトは、いくつかのカラーの中からを選ぶことができます。

• prism-coy.css
• prism-dark.css
• prism-funky.css
• prism-okaidia.css
• prism-solarizedlight.css
• prism-tomorrow.css
• prism-twilight.css
• prism.css

plugins/prism.jsに上記の中のCSSを読み込んであげると適用されます。

import Prism from "prismjs"
import "prismjs/themes/prism.css" // <= ここを変更
export default Prism

ハイライトできる言語を増やす

ハイライトできる言語を増やすには、plugins.prism.jsにファイルを追加します。

import Prism from "prismjs"
import "prismjs/themes/prism-tomorrow.css"
import 'prismjs/components/prism-java' // <= 追記
import 'prismjs/components/prism-ruby' // <= 追記
import 'prismjs/components/prism-bash' // <= 追記
export default Prism

JavaやRubyなど主要な言語から、様々な言語が用意されています。

対応している言語は、下記から確認することができます。

サポート言語を確認する

コードスニペットからコピーできるようにする

Prism.jsは、標準で様々なプラグインも用意されています。
コードをコピーするプラグインも用意されていますが、依存性を解消するためにclipboard.jsを使用します。

yarn add clipboard

import 'clipboard' // <= 追記
import Prism from "prismjs"
import 'prismjs/plugins/toolbar/prism-toolbar' // <= 追記
import 'prismjs/plugins/toolbar/prism-toolbar.css' // <= 追記
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard' // <= 追記
export default Prism

上記のようにコードを追記すると、コードスニペットの右上にコピーボタンが表示されます。

コードスニペットに言語を表示する

Prism.jsは、標準で言語を表示できるプラグインも用意されています。

import 'clipboard'
import Prism from "prismjs"
import 'prismjs/plugins/toolbar/prism-toolbar'
import 'prismjs/plugins/toolbar/prism-toolbar.css'
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'
import 'prismjs/plugins/show-language/prism-show-language' // <= 追記
export default Prism

こちらも、上記のようにコードを追記すると、コードスニペットの右上に言語が表示されます。
他にも様々なプラグインが用意されているようなので、是非触ってみてください。