Vue.js + Marked + highlight.jsでマークダウンエディタを実装する

npm install marked marked-highlight highlight.js

<script setup lang="ts">
import { Marked } from 'marked'
import hljs from 'highlight.js'
import { markedHighlight } from 'marked-highlight'
// highlight.js ライブラリで提供されるスタイルシートのインポート
import 'highlight.js/styles/github-dark.css'

const convertMarkdownToHtml = async (markdown: string) => {
  const marked = new Marked(
    markedHighlight({
      langPrefix: 'hljs language-',
      highlight(code, lang) {
        const language = hljs.getLanguage(lang) ? lang : 'plaintext'
        return hljs.highlight(code, { language }).value
      }
    })
  )
  return await marked.parse(markdown)
}
</script>

<script setup lang="ts">
import { Marked } from 'marked'
import hljs from 'highlight.js'
import { markedHighlight } from 'marked-highlight'
import 'highlight.js/styles/github-dark.css'
import { ref } from 'vue';
import { watch } from 'vue';

const convertMarkdownToHtml = async (markdown: string) => {
  const marked = new Marked(
    markedHighlight({
      langPrefix: 'hljs language-',
      highlight(code, lang) {
        const language = hljs.getLanguage(lang) ? lang : 'plaintext'
        return hljs.highlight(code, { language }).value
      }
    })
  )
  return await marked.parse(markdown)
}

const inputMd = ref('')

const inputHtml = ref('')

// 入力値の変更を監視
watch(inputMd, async (newInput) => {
  inputHtml.value = await convertMarkdownToHtml(newInput);
});

</script>

<template>
  <v-container>
    <v-row>
      <v-col>
        <v-textarea v-model="inputMd" variant="outlined" rows="15"></v-textarea>
      </v-col>
      <v-divider vertical></v-divider>
      <v-col>
        <div v-html="inputHtml"></div>
      </v-col>
    </v-row>
  </v-container>
</template>