A Powerful and Highspeed Markdown Parser for Vue
npm install vue-markdown
> If you want vue-markdown for vue1.X.X, please checkout vue-markdown1.X.X.
A Powerful and Highspeed Markdown Parser for Vue.
Quick start:
Supported Markdown Syntax:
* [x] automatic table of contents
* [x] table & class customize
[x] SyntaxHighlighter
* [x] definition list
* [x] strikethrough
* [x] GFM task list
* [x] abbreviation
* [x] superscript
* [x] subscript
* [x] footnote
* [x] insert
[x] katex
* [x] emoji
* [x] mark
*SyntaxHighlighter work with Prism recommend
*katex need add katex css.
> The dist folder contains vue-markdown.js with the component exported in the window.VueMarkdown object.
``html`
`shell`
$ npm install --save vue-markdown
`shell`
$ yarn add vue-markdown --save
`js
var VueMarkdown = require('vue-markdown');
new Vue({
components: {
'vue-markdown': VueMarkdown
}
})
`
After installing via Yarn or NPM, use the following snippet in the script portion of the Vue component which you wish to render the Markdown.
`js
import VueMarkdown from 'vue-markdown'
new Vue({
components: {
VueMarkdown
}
})
`
`html`
After setting up the middleware in your vue component above, using the embedded markdown is as easy as writing it between the vue-markdown tags.
VueMarkdown has a default slot which is used to write the markdown source.
TIP: The default slot only renders once at the beginning, and it will overwrite the prop of source!
| Prop | Type | Default | Describe |
| ---- | ---- | ------- | ------- |
| watches | Array | ["source", "show", "toc"] | HTML refresh automatically when the prop in this array changed |null
| source | String | | the markdown source code |true
| show | Boolean | | enable render to the default slot automatically |true
| html | Boolean | | enable HTML syntax in source |true
| xhtml-out | Boolean | | => |true
| breaks | Boolean | | \n => |true
| linkify | Boolean | | autoconvert URL-like text to link |true
| emoji | Boolean | | :) => 😃 |true
| typographer | Boolean | | enable some language-neutral replacement and quotes beautification |language-
| lang-prefix | String | | CSS language prefix for fenced blocks |“”‘’
| quotes | String | | use “”‘’ for Chinese, „“‚‘ for German, «»„“ for Russian |table
| table-class | String | | customize html class of the