はじめに
NuxtでQiitaのようなマークダウンエディター+プレビュー機能のブログを作ろうとした時に、
markdown-it-vueという便利なライブラリがあったので遊んでみました。
最終的にはこんな感じのシンタックスハイライト+プレビュー機能のついたマークダウンエディターを作ります。
コード挿入の黒い背景色やh1タグなどは個人的な好みで後から色を変えています。
このライブラリを導入するだけででマークダウンとシンタックスハイライト、警告ボックスなど簡単に実装できるので、個人開発では試してみるのもアリです。
ただ少しマイナーなライブラリのため、不安な方はmarked.jsとHighlight.jsを組み合わせる方式をとったほうがいいと思います。
markdown-it-vue
対応言語はこちらで確認できます。有名な言語には大抵対応しているので困ることはないです。
他にもサポートとして円グラフやシーケンス図が対応しています。
詳しくはREADMEをご覧ください。
実装
まずはnuxtで適当なプロジェクトを作りましょう。
初期設定などは割愛します。
ターミナル
$ create-nuxt-app markdown-app
```
`markdown-it-vue`をインストールします。
````shell:ターミナル
$ cd markdown-app
$ yarn add markdown-it-vue #yarnの場合
$ npm install markdown-it-vue #npmの場合
```
`pages/index.vue`をまるっと以下のように書き換えます。
まずは公式の[README](https://github.com/ravenq/markdown-it-vue#usage)に書かれてる簡単なサンプルで動作確認しましょう。
```vue:pages/index.vue
<template>
<div>
<markdown-it-vue class="md-body" :content="content" />
</div>
</template>
<script>
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
export default {
components: {
MarkdownItVue
},
data() {
return {
content: '# your markdown content'
}
}
}
</script>
```
```shell:ターミナル
yarn dev #yarnの場合
npm run dev #npmの場合
```
`http://localhost:3000`にアクセスすると、以下のようにマークダウンが反映されています。
若干見づらいですが、ボーダーもついていますね。
公式のスタイル一覧は[こちら](https://github.com/ravenq/markdown-it-vue#screenshot)
## プレビュー機能を作る
簡単なサンプルを載せます。
細かいスタイルは各自で修正してください。
```vue:pages/index.vue
<template>
<div class="wrap">
<div class="editer">
<textarea
class="md-editer"
v-model="content"
placeholder="マークダウンで書く"
></textarea>
</div>
<div class="preview">
<markdown-it-vue class="md-body" :content="content" />
</div>
</div>
</template>
<script>
import MarkdownItVue from "markdown-it-vue";
import "markdown-it-vue/dist/markdown-it-vue.css";
export default {
components: {
MarkdownItVue
},
data() {
return {
content: ""
};
}
};
</script>
<style lang="scss" scoped>
.wrap {
width: 100%;
height: 800px;
display: flex;
padding-top: 40px;
.editer {
width: 50%;
.md-editer {
width: 100%;
height: 100%;
border: solid 1px rgb(206, 205, 205);
font-size: 1.1rem;
}
}
.preview {
width: 50%;
height: 100%;
border: solid 1px rgb(206, 205, 205);
padding: 10px;
}
}
</style>
```
**プレビュー機能は`textarea`と`content`を`v-model`で紐付けることが肝です。**
以下の画像の通り、半分より左がエディター、右がプレビューです。
実際にマークダウンで書くと即座に反映されると思います。
実際に[公式の書き方](https://github.com/ravenq/markdown-it-vue#screenshot)を参考に書いてみるとこんな感じ。
これが`markdown-it-vue`のデフォルトスタイルです。
これだけでも十分ですが、私はコード挿入の背景色をQiitaのように黒っぽくしたいと思ったので、独自のCSSを作ることにしました。
もし独自のCSSにしたいと思った方はこの先もお読みください。
## 独自のCSSを作る
`assets/markdown.scss`を作成して以下をコピペ。
```scss:assets/markdown.scss
$mainColor: #36cbfa;
.md-body {
.markdown-body {
h1,
h2 {
border-bottom: none;
border-left: solid 10px $mainColor;
padding: 5px;
}
h2 {
border: none;
color: $mainColor;
}
pre {
background-color: #334146;
code {
color: rgb(236, 236, 236);
font-family: inherit;
line-height: 1.8;
font-size: 0.9rem;
.hljs-keyword {
color: rgb(201, 146, 253);
}
.hljs-title {
color: $mainColor;
}
.hljs-attr {
color: rgb(247, 210, 0);
}
.hljs-attribute {
color: palegreen;
}
.hljs-variable {
color: orange;
}
.hljs-selector-class {
color: rgb(214, 157, 50);
}
.hljs-built_in {
color: #d19719;
}
.hljs-symbol {
color: rgb(18, 167, 253);
}
.hljs-number {
color: rgb(172, 255, 172);
}
.hljs-string {
color: rgb(190, 228, 190);
}
.hljs-subst {
color: rgb(250, 99, 89);
}
.hljs-meta {
color: #6594fa;
}
}
}
}
}
```
```js:nuxt.config.js
css: ["@/assets/markdown.scss"]//追記
```
こんな感じで独自のスタイルが反映されたら成功です！
# 最後に
`markdown-it-vue`を使えば簡単にマークダウンとシンタックスハイライトが実装できました。
プレビュー機能も実装するとマークダウンの反映が確認できて便利ですね。
皆さんも独自のCSSを割り当てて遊んでみてください。
## 参考
* [markdown-it-vue](https://github.com/ravenq/markdown-it-vue)