markdown-it-vue 一個 Markdown 的 Vue 組件庫

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

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>

示例截圖

License

MIT