vue3+Ant Design Vue集成MarkDone编辑框

首先安装依赖 pnpm i

markdone依赖安装

pnpm add @kangc/v-md-editor highlight.js

强制安装特定版本的 vue （解决兼容性问题）

pnpm install @kangc/v-md-editor@next

解决 Rollup 的 peer dependency 问题

如果你遇到 Rollup 的 peer dependency 问题，可以尝试安装兼容的 Rollup 版本：       选用

pnpm install rollup@3

MarkdownEditor.vue

 <template>
    <a-row>
      <a-col :span="12">
        <v-md-editor v-model="markdownContent" />
      </a-col>
      <a-col :span="12">
        <v-md-preview :text="markdownContent" />
      </a-col>
    </a-row>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  import VMdEditor from '@kangc/v-md-editor';
  import VMdPreview from '@kangc/v-md-editor/lib/preview';
  import '@kangc/v-md-editor/lib/style/base-editor.css';
  import '@kangc/v-md-editor/lib/theme/style/github.css';
  import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
  import hljs from 'highlight.js';
  
  // 调试输出
  console.log("Highlight.js instance:", hljs);
  
  VMdEditor.use(githubTheme, {
    Hljs: hljs,
  });
  VMdPreview.use(githubTheme, {
    Hljs: hljs,
  });
  
  const markdownContent = ref('# Hello, Markdown!\n\nThis is a **markdown** editor using `v-md-editor` and Ant Design Vue.');
  </script>