Nuxtでvue-prism-editorを導入して設定する方法
Vueを活用する中で、
「Nuxt」
のフレームワークを使用して、
既存で作っていたものを、
試しにリプレイスしようとしている。
そんな中で、
- prismjs
の導入を行い、
このような表示をするために、
設定を試した時のメモ。
ちなみに、
Nuxtのバージョンについても、
バージョン２系ではなく、
バージョン３系を導入して、
Nuxtを試している。
個人用の備忘録としてメモを残しておく。
Nuxt.jsの公式サイト
Nuxt.jsに関しては、
こちらのサイトを参考にしました。
リンクをメモ。
GitHub：vue-prism-editor
今回導入したライブラリの
「vue-prism-editor」
のGitHubのページ。
こちらを参照。
https://github.com/koca/vue-prism-editor
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";のように変更することで、
テーマを変更することができます。
スキルを使って、就職/転職/副業する時のサイト
プログラミングのスキルなどを、自分なりに高めた上で、
自分のスキルをアピールして就職や転職を行い、年収をあげるか、
副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。
まずはできる範囲で取り組むことで、
少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。
