【Nuxt】vue-highlightjsでコードにシンタックスハイライトを効かせる方法

どーも、ぐるたか@guru_takaです。

Nuxtでコードにシンタックスハイライトさせることがあったので、方法をまとめました。

使用するパッケージはvue-highlightjsです。readme.mdに沿って、紹介していきます！
参考 metachris/vue-highlightjs: Syntax highlighting with highlight.js for Vue.js 2.x

手順

STEP.1：vue-highlightjsのインストール

まずは、vue-highlightjsをインストールします。

npm install --save vue-highlightjs

STEP.2：pluginsフォルダにファイル作成

その後、plugins/vue-highlightjs.jsファイルを作り、以下のコードを記載します。

import Vue from 'vue'

import VueHighlightJS from 'vue-highlightjs'

Vue.use(VueHighlightJS)

STEP.3：nuxt.config.jsを編集

最後に、nuxt.config.jsを編集すればOK！以下の部分を修正していきます。

......
 /*
   ** 追記
 */
plugins: ['@/plugins/vue-highlightjs'],
......
 /*
   ** シンタックスハイライトのCSSを追記
 */
css: [
  {
    src: '~/node_modules/highlight.js/styles/tomorrow-night-bright.css',
    lang: 'css'
  },
],
......

まず、plugins/vue-highlightjs.jsファイルをインスタンス起動時に読み込むようにします。

すると、どんなvueファイルでも、シンタックスハイライト用のタグ<pre v-highlightjs><code class="python"></code></pre>が使えます！

また、シンタックスハイライトのCSSファイルは、自分の好きなファイルを読み込めばOK！

公式のデモサイトで各CSSファイルの雰囲気がわかるので、参考にしてみてください。
参考 highlight.js demo

シンタックスハイライトを効かせる方法

あとは、<pre v-highlightjs><code class="python"></code></pre>でコード内容を挟めば完成です。

classに各言語（javascriptやｐｙthonなど）を割り当てると、シンタックスハイライトが効くようになります。

以下、サンプルです！

<pre v-highlightjs>
         <code class="javascript">console.log('hello world!');</code>
      </pre>

参考リンク