markdown-it-vue
The vue lib for markdown-it.
Demo online
http://www.aqcoder.com/markdown
Install
npm install markdown-it-vue
Supports
- Official markdown syntax.
- GFM TOC
- GFM style
- emoji
- mermaid charts
- Echarts
- Flowcharts.js
- Subscript/Superscript
- AsciiMath
- info | error | warning message tip
Plugin list
- 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
- markdown-it-link-attributes
internal plugin list:
- markdown-it-plugin-echarts
- markdown-it-plugin-mermaid
- markdown-it-plugin-flowchart
Options
use options
property to sepcial the options of markdow-it and markdown-it-plugins.
options: markdownIt: linkify: true linkAttributes: attrs: target: '_blank' rel: 'noopener'
more markdown-it options see https://markdown-it.github.io/markdown-it/.
amd default plugins options:
linkAttributes: attrs: target: '_blank' rel: 'noopener' katex: throwOnError: false errorColor: '#cc0000' icons: 'font-awesome' githubToc: tocFirstLevel: 2 tocLastLevel: 3 tocClassName: 'toc' anchorLinkSymbol: '' anchorLinkSpace: false anchorClassName: 'anchor' anchorLinkSymbolClassName: 'octicon octicon-link'
More plugins
it can add your plugin to markdown-it-vue by the use
method.
this$refsmyMarkdownItVue
Usage
<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>