【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のインストール
STEP.2
pluginsフォルダにファイル作成
STEP.3
nuxt.config.jsの設定編集

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

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

コマンドライン
npm install --save vue-highlightjs

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

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

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!以下の部分を修正していきます。

nuxt.config.js
......
 /*
   ** 追記
 */
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やpythonなど)を割り当てると、シンタックスハイライトが効くようになります。

以下、サンプルです!

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

参考リンク

参考 highlight.js を利用して本ブログのコードをハイライト表示する 参考 Nuxt.jsにおけるプラグイン導入方法(初学者向けハンズオン) - Qiita

コメントを残す