[vue生态]在html中使用markdown在建立自己的博客的过程中，markdown好像是必不可少的。那么我要介绍的

介绍

在建立自己的博客的过程中，markdown好像是必不可少的。那么下面介绍的v-md-editor将会是我们的好帮手，它能够将markdown语法转换为html网页。

快速上手

在vue3中引入


import { createApp } from 'vue';
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs from 'highlight.js';

VMdEditor.use(githubTheme, {
  Hljs: hljs,
});

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

app.use(VMdEditor);

然后在模板中使用

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>

具体解释

可以看出在main.js中引入了3个模块两个样式，分别是md基本样式、GitHub主题样式、代码高光。模板中的text中放入mk语法的字符串就行，但由于md语法与html语法有冲突（尖括号、引号等），直接写入md语法会导致出错，所以一般是后端先从文件中读取字符串做处理后存入变量中，前端请求后获取使用。