vue3 预览markdown

最新推荐文章于 2024-09-23 17:27:49 发布

海绵老呆

最新推荐文章于 2024-09-23 17:27:49 发布

阅读量959

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_37343874/article/details/126846292

版权

一、安装支持 vue3 的版本

使用 npm

npm i @kangc/v-md-editor@next -S

使用 yarn

yarn add @kangc/v-md-editor@next

二、main.js中注册

import { createApp } from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

import Prism from 'prismjs';

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});

const app = createApp(/*...*/);

app.use(VueMarkdownEditor);

三、使用

<template>
 <v-md-preview :text="currentItem.mkContent"></v-md-preview>
</template>
<script>
  setup() {
    const currentItem = reactive({
      mkContent: '### 使用 markdown'
    })
  }
</script>