vue使用v-md-editor完成Markdown内容展示

起因

参加了校外的一个比赛，主题是智慧教育,想要做一个Markdown编辑器发表文章后渲染内容，类似于掘金。（没错很类似）直接上效果。

效果图

开始

我使用的是vue3,所以使用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 App from "./App.vue";
import router from "./router";

// 预览组件以及样式
import VMdPreview from "@kangc/v-md-editor/lib/preview";
import "@kangc/v-md-editor/lib/style/preview.css";
// VuePress主题以及样式（这里也可以选择github主题）
import vuepressTheme from "@kangc/v-md-editor/lib/theme/vuepress.js";
import "@kangc/v-md-editor/lib/theme/style/vuepress.css";

// // Prism
import Prism from "prismjs";
// 选择使用主题
VMdPreview.use(vuepressTheme, {
  Prism,
});

// 使用已经初始化好的app变量进行后续操作
// 先声明并初始化app变量
const app = createApp(App);
app.use(router);
app.use(VMdPreview);  // VMdPreview
app.mount("#app");

安装依赖

# npm
npm install prismjs  --sava

# yarn
yarn install prismjs  --sava

main.js页面配置好后，就可以在对应的页面使用

<template>
  <v-md-preview :text="str"></v-md-preview>
</template>

<script setup>
const str = `
## vue3使用v-md-editor完成Markdown内容展示  h2
### vue3使用v-md-editor完成Markdown内容展示  h3
**工作原理**
1. 有序列表
**粗体**
    `
</script>

效果

后续使用Markdown编辑器把输入的值传入后端或者本地进行渲染

至此就完成了