Vue3使用Markdown原来这么简单

今天发现一个markdown神器，专门针对Vue开发的一款markdown，使用起来也非常的简单easy。叫做
v-md-editor
这里是v-md-editor的官网

https://ckang1229.gitee.io/vue-markdown-editor/zh/

安装步骤(Vue3为例子)

1.安装

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

vue2通过

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

main.js引入

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,
});

//app中使用
app.use(VMdEditor)

vue2引入并使用

import Vue 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,
});

Vue.use(VMdEditor);

2.使用编辑器

使用也非常简单
直接使用组件就行

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

组件总的代码：

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

<script>
import {ref} from 'vue'
export default {
  name: 'MarkDown',
  setup(){
    const text =ref('')
    return{
      text
    }
  }
}
</script>

页面效果

使用预览界面

在此页面进行编辑那自然也有预览界面
在其他组件使用即可。

<v-md-editor :model-value="text" mode="preview"></v-md-editor>

不得不说，这个真的好用，很好配置，开箱即用！