Zenn
📐

Prism.js を使う [Vue 2, Nuxt 2]

2023/08/12に公開
HTML
JavaScript
Prism
web開発
Vue 2
tech

🌞はじめに

Syntax highlighter の Prism.js を Vue 2, Nuxt 2 環境で使用する際に、若干つまずき＆混乱でした。導入から簡単な使用方法までをまとめました。
Prism.js は syntax highlight（シンタックスハイライト）付きのコードブロックを提供する、Javascript / CSS ライブラリ（？）です。似た機能を提供するライブラリには highlight.js があります。Prism.js は軽量&高速だそうです。

🔧導入

今回利用する環境は以下の通りです。

Node.js: 16.20.1
npm: 8.19.4
Nuxt.js: 2.17.1
Vue.js: 2.7.14

npm を利用して、公式リポジトリからダウンロード、インストールします。

$ npm i prismjs

基本的には node_modules 内にダウンロードされるでしょう！

$ ls node_modules/prismjs
CHANGELOG.md     components       dependencies.js  prism.js
LICENSE          components.js    package.json     themes
README.md        components.json  plugins

✨使用

使用する際のポイントは3点あります！

  1. script ブロックに Prism.js と使用するテーマをインポートする。
  2. mounted に Prism.highlightAll() をセットし、マウント時に Prism.js が適用されるようにする。
  3. 基本的には <pre><code class="language-{xxxx}"></pre></code>のような形式でコードブロックを記載する。

このポイントに従った以下のスクリプトを実行すると以下のようにコードブロックが表示されます。

<templete>
  ...
  <pre><code class="language-javascript">{{ codeJavascript }}</code></pre>
  ...
</template>
<script>
// script ブロックに Prism.js と使用するテーマをインポートする。
import Prism from 'prismjs'
import 'prismjs/themes/prism.css'

export default {
  data() {
    return {
      codeJavascript: `function loop(x) {
  if (x >= 10) return;
  loop(x + 1);
}
// アロー関数を使う
const loop = (x) => {
  if (x >= 10) return;
  loop(x + 1);
};`,
    }
  },
  mounted() {
    // `mounted` に `Prism.highlightAll()` をセットする。
    Prism.highlightAll()
  },
}
</script>

テーマ

いろんなテーマが用意されています。

$ ls node_modules/prismjs/themes
prism-coy.css                 prism-solarizedlight.css
prism-coy.min.css             prism-solarizedlight.min.css
prism-dark.css                prism-tomorrow.css
prism-dark.min.css            prism-tomorrow.min.css
prism-funky.css               prism-twilight.css
prism-funky.min.css           prism-twilight.min.css
prism-okaidia.css             prism.css
prism-okaidia.min.css         prism.min.css

script ブロックでインポートするテーマを任意に設定します。

// import 'prismjs/themes/prism.css' // Prism.jsのデフォルトスタイルをインポート
import 'prismjs/themes/prism-tomorrow.css'

プラグイン

いろんなプラグインが用意されています。頻繁に使うであろう３つを取り上げます。

Line Numbers

その名の通りです。

<templete>
...
  <pre><code class="language-javascript line-numbers">{{ codeJavascript }}</code></pre>
...
...
</templete>
<script>
...
import 'prismjs/plugins/line-numbers/prism-line-numbers.css' // line-numbersプラグインのスタイル
import 'prismjs/plugins/line-numbers/prism-line-numbers' // line-numbersプラグイン
...
</script>

Line Highlight

指定した行や範囲を強調します。

<templete>
...
  <pre data-line="3"><code
    class="language-javascript line-numbers"
  >{{ codeJavascript }}</code></pre>

  <pre data-line="2-6"><code
    class="language-javascript line-numbers"
  >{{ codeJavascript }}</code></pre></pre>
...
</templete>
<script>
...
import 'prismjs/plugins/line-highlight/prism-line-highlight.css'
import 'prismjs/plugins/line-highlight/prism-line-highlight'
...
</script>


Copy to Clipboard Button

Zenn にも搭載されている、コードブロックの右上に表示されるコピーボタンです。

<templete>
...
  <body data-prismjs-copy-timeout="800">
    <pre><code
      class="language-javascript line-numbers"
      data-prismjs-copy="copy"
    >{{ codeJavascript }}</code></pre>
  </body>
...
</templete>
<script>
...
import 'prismjs/plugins/toolbar/prism-toolbar'
import 'prismjs/plugins/toolbar/prism-toolbar.css'
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'
...
</script>

以上です。コピーボタンはもっとオシャ✨にしたいですね！

Discussion