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

Vueを活用する中で、

「Nuxt」

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

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

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

そんな中で、

  • prismjs

の導入を行い、

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

設定を試した時のメモ。

ちなみに、

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

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

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

Nuxtを試している。

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

Nuxt.jsの公式サイト

Nuxt.jsに関しては、

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

リンクをメモ。

GitHub:vue-prism-editor

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

「vue-prism-editor」

のGitHubのページ。

こちらを参照。

Prismjsの公式サイト

コアとなる

「Prismjs」

の公式サイトはこちら。

テーマパターンなど、

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

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>

のようにしているのは、

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

次に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";

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

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

スキルを使って、就職/転職/副業する時のサイト

プログラミングのスキルなどを、自分なりに高めた上で、

自分のスキルをアピールして就職や転職を行い、年収をあげるか、

副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。

まずはできる範囲で取り組むことで、

少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。

おすすめ書籍

スポンサー

人気記事

おすすめ記事