vue3 中使用cherry-markdown

Cherry Markdown 是一个基于 Vue.js 的 Markdown 编辑器，支持实时预览和自定义主题等功能。在 Vue 3 中使用 Cherry Markdown 需要先安装 cherry-markdown 和 marked 两个库。

首先安装 cherry-markdown 和 marked：

npm install cherry-markdown marked

然后在 Vue 组件中引入 cherry-markdown 和 marked：

import CherryMarkdown from 'cherry-markdown'
import marked from 'marked'

export default {
  components: {
    CherryMarkdown
  },
  data() {
    return {
      markdown: '# Hello World'
    }
  },
  computed: {
    html() {
      return marked(this.markdown)
    }
  }
}

最后在模板中使用 CherryMarkdown 组件并传入 markdown 和 html：

<template>
  <div>
    <cherry-markdown v-model="markdown" :html="html"></cherry-markdown>
  </div>
</template>

以上代码会在页面中渲染一个 Markdown 编辑器，并且实时预览 Markdown 渲染后的 HTML 代码。你可以根据需要自定义 Cherry Markdown 的主题色等样式。