markdown-it-vue 一个 Markdown 的 Vue 组件库

杀马特。学长 韩版系。学妹 提交于 2021-02-13 18:20:48

项目地址: https://github.com/ravenq/markdown-it-vue

Build Status

Markdonw Vue 组件库.

markdown-it-vue 是一个丰富的 markdown Vue 组件,markdown-it-vue 使用 markdown-it 作为 Markdown 数据解析引擎,整合多种 markdown-it 插件,并内置了一些自己的功能性插件,支持 GFM TOC、GFM style、emoji等通用特性,还支持 mermaid charts、Echarts、flowchart.js 等多种图表,支持 AsciiMath、Latex 等数学公式渲染,支持 errro | warning | info 个性化提示。

在线示例

http://www.aqcoder.com/markdown

安装

npm install markdown-it-vue

特性

  • Official markdown syntax.
  • GFM TOC
  • GFM style
  • emoji
  • mermaid charts
  • Echarts
  • Flowcharts.js
  • Subscript/Superscript
  • AsciiMath
  • info | error | warning message tip

使用的插件

  • markdown-it
  • markdown-it-emoji
  • markdown-it-sub
  • markdown-it-sup
  • markdown-it-footnote
  • markdown-it-deflist
  • markdown-it-abbr
  • markdown-it-ins
  • markdown-it-mark
  • markdown-it-katex
  • markdown-it-task-lists
  • markdown-it-icons
  • markdown-it-highlight
  • markdown-it-latex
  • markdown-it-container
  • markdown-it-github-toc
  • markdown-it-source-map

使用示例

<template>
  <div>
    <markdown-it-vue class="md-body" :content="content"/>
  </div>
</template>

<script>
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
export default {
  components: {
    MarkdownItVue
  },
  data () {
    return {
      content: '# your markdown content'
    }
  }
}
</script>

示例截图

markdown-it-vue

License

MIT

ravenq

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!