Nuxtでvue-prism-editorを導入して設定する方法

Vueを活用する中で、

「Nuxt」

のフレームワークを使用して、

既存で作っていたものを、

試しにリプレイスしようとしている。

そんな中で、

  • prismjs

の導入を行い、

このような表示をするために、

設定を試した時のメモ。

ちなみに、

Nuxtのバージョンについても、

バージョン２系ではなく、

バージョン３系を導入して、

Nuxtを試している。

個人用の備忘録としてメモを残しておく。

Nuxt.jsの公式サイト

Nuxt.jsに関しては、

こちらのサイトを参考にしました。

リンクをメモ。

Nuxtの公式サイト

GitHub：vue-prism-editor

今回導入したライブラリの

「vue-prism-editor」

のGitHubのページ。

こちらを参照。

https://github.com/koca/vue-prism-editor

Prismjsの公式サイト

コアとなる

「Prismjs」

の公式サイトはこちら。

テーマパターンなど、

公式サイトを見てもらうと良い。

https://prismjs.com/

Nuxt.jsにPrismjsを導入

まずは、

ライブラリをNPMパッケージで導入。

コマンド

npm install vue-prism-editor

こちらで導入が終わったら、

ファイルにコードを追加していきます。

template

templateの部分のコードは、

<template>
  <client-only placeholder="Loading...">
    <prism-editor
　　　　class="my-editor"
　　　　language="js"
　　　　v-model="code"
　　　　:highlight="highlighter"
　　　　line-numbers>
　　　</prism-editor>
  </client-only>
</template>

このように記載します。

ちなみに、

<client-only placeholder="Loading...">
 <prism-editor ....
</client>

のようにしているのは、

以下で起きた事象の対策です。

Nuxtでbuild+previewするとエラー発生した件

次にscriptを記載します。

script

scriptのコードに関しては、

以下のように記載します。

<script>
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
import prismjs from "prismjs/components/prism-core";
const { highlight, languages } = prismjs;
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css";

export default {
  components: {
    PrismEditor
  },
  data: () => ({
    code: "console.log('hello world')"
  }),
  methods: {
    highlighter(code) {
      return highlight(code, languages.js);
    }
  }
};
</script>

こちらで、

コードがうまく表示れさると思います。

対象言語やテーマを変える

Prismjsを使う中で、

vue-prism-editorを使っていますが、

こちらの上記のサンプルコードで、

  • 対象言語（HTML/CSS/JavaScriptなど）
  • テーマ（ハイライトの色など）

を変更するには、

以下のように対応します。

言語設定

言語設定については、

import "prismjs/components/prism-javascript";

のインポートを

import "prismjs/themes/prism-okaidia.css";

に変更した上で、

Scriptのメソッド指定で、

methods: {
  highlighter(code) {
    return highlight(code, languages.js);
  }
}

となっているところを、

methods: {
  highlighter(code) {
    return highlight(code, languages.css, 'css'); //returns html
  }
}

と変更することで、

言語の指定ができます。

テーマ設定

テーマの設定については、

import "prismjs/themes/prism-tomorrow.css";

で読み込んでいるテーマを、

import "prismjs/themes/prism-okaidia.css";

のように変更することで、

テーマを変更することができます。

就職/転職に向けてスキルを高めるために

プログラミングのスキルを高めるために、

以下のサイトを参考にしてみてください。

元Yahooエンジニアの超実践型プログラミングスクール「PRUMエンジニア留学」
Freeks(フリークス)｜サブスク型プログラミングスクールの申込
未経験からITエンジニアを目指すサポートに特化した「ウズキャリIT」

おすすめ書籍

コメント一覧

コメントはまだありません。

コメント送信

コメントを残す

関連記事

広告

おすすめ記事