この記事は最終更新日から1年以上が経過しています。

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

2020-09-27
2021-03-02

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

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

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

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

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

bash
yarn add prismjs

pluginsにprism.jsを作成する

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

bash
├── plugins │   └── prism.js
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の設定ファイルです。

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

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

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

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

js
<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を読み込んであげると適用されます。

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

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

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

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を使用します。

bash
yarn add clipboard
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' // <= 追記 export default Prism

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

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

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

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

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