Vue3でマークダウンを変換する

プラグイン

Vue.jsに限らず、ブラウザで使えるJavascript用のマークダウンプラグインであれば問題ないかと思います。今回は「marked」を使った例です。

marked | npm

実際の使用例

ということで実際の使用例です。

<template>
  <article v-html="markdown">
</template>

<script>
const text =
`# hogehoge

フガフガフガフガ
`

import { marked } from 'marked'

export default {
  name: 'Static',
  setup() {
    const markdown = marked(text)
    return {
      markdown
    }
  }
}
</script>

シンプルですね。

Vue3なのでsetup関数でプロパティを定義しています。markedはメソッドを呼べば変換してくれるので、それをテンプレートから読み込めるようにしているだけです。

もし、テキストフォームなどから入力内容などを受け付けるなら、

<template>
  <textarea v-model="text"></textarea>
  <article v-html="markdown">
</template>

<script>
import { ref, watch } from 'vue'
import { marked } from 'marked'

export default {
  name: 'Static',
  setup() {
    let markdown = ref('');
    let text = ref('');

    const conv = ()=> {
      markdown.value = marked(text.value);
    }

    conv();

    watch(text, () => {
      conv()
    })

    return {
      markdown,
      text
    }
  }
}
</script>

変数markdownとtextの両方をリアクティブにして、textの変更をwatchして都度markedにかける感じです。