vue3+Ant Design Vue整合MarkDone編輯框

沉默的U盘發表於2024-06-27
Vue

首先安裝依賴 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>

相關文章