MarkDown-IT插件使用

目的

使后端返回数据库返回内容，呈现到前端页面时，展示它响应的MarkDown语法

实现机制

后端数据库直接存入Markdown语法，sql数据库字段数据类型建议采用LongText，后端传输到前端使用一般数据即可，不必序列化

前端直接正常渲染，下面是前端vue使用MarkDown-IT插件的方法流程

安装

npm install markdown-it --save

组件中引入

哪个组件使用、哪个组件引用即可，不必要在main中引用

import MarkdownIt from 'markdown-it'

引入&定义MarkDwonIt对象

//markdown-it
import MarkdownIt from 'markdown-it'
const md = new MarkdownIt();

数据模型准备一个属性

export default {
  data() {
    return {
      renderedMarkdown:'',
    }
  },
}

赋值

this.renderedMarkdown = md.render(your sql content);

渲染

<!--显示单篇文章，div标签中可以写v-if来控制是否显示-->
<div>
  <div v-html="renderedMarkdown"></div>
</div>