vue+showdown展示Markdown 文本

前言：

        vue+showdown展示Markdown 文本，资料整理

使用教程-vditor：

1、安装

npm install vditor --save

2、使用

<template>
    <div id="vditor" name="description" ></div>
</template>
<script>
    import Vditor from "vditor"
    import "vditor/dist/index.css"
export default {
    data(){
        return{
            contentEditor:""
        }
    },
    mounted(){
        this.contentEditor = new Vditor("vditor",{
            height:360,
            toolbarConfig:{
                pin:true
            },
            cache:{
                enable:false
            },
            after:()=>{
                this.contentEditor.setValue("hello,Vditor+Vue!")
            }
        })
    },
    methods:{
    }
}
</script>

使用教程-showdown：

https://gitcode.com/showdownjs/showdown/overviewhttps://gitcode.com/showdownjs/showdown/overview

使用教程-markdown-it：展示 Markdown 文本：将获取到的 Markdown 文本转换为 HTML 并在页面中展示。

<template>
  <div>
    <div id="vditorContainer"></div>
    <div v-html="html"></div>
  </div>
</template>

<script>
import Vditor from 'vditor';
import MarkdownIt from 'markdown-it';

export default {
  data() {
    return {
      vditor: null,
      markdown: '',
      html: ''
    };
  },
  created() {
    this.vditor = new Vditor('vditorContainer');
  },
  methods: {
    getMarkdown() {
      this.markdown = this.vditor.getValue();
      const md = new MarkdownIt();
      this.html = md.render(this.markdown);
    }
  }
}
</script>

更多资料：

vue3内嵌Markdown编辑，并采用showdown展示，支持数学公式展示_vue3公式插件-CSDN博客

https://wenku.csdn.net/answer/dc86e4accd1f48fe85a75ca66856db89