This package only supports
vue2.X.X
.
A powerful and highspeed Markdown component for Vue.
This is an extension to miaolz123's vue-markdown. The last update to vue-markdow code was in 2017, and is not actively maintained (dependencies contain security vulnerabilities). This package intends to be a safe, up-to-date alternative to vue-markdown.
Quick start: <vue-markdown-plus>i am a ~~tast~~ **test**.</vue-markdown-plus>
Supported Markdown Syntax:
- automatic table of contents
- table & class customize
- *SyntaxHighlighter
- definition list
- strikethrough
- GFM task list
- abbreviation
- custom attributes (class, id, etc.)
- superscript
- subscript
- footnote
- insert
- *katex
- emoji
- mark
*SyntaxHighlighter
work with Prism
*katex
needs katex css.
$ npm install --save vue-markdown-plus
$ yarn add vue-markdown-plus --save
This is not recommended for user inputs, as it will cause XSS vulnerabilities. Please use npm or yarn if possible.
The dist folder contains
vue-markdown.js
with the component exported in thewindow.VueMarkdownPlus
object.
<body>
<vue-markdown-plus>i am a ~~tast~~ **test**.</vue-markdown-plus>
</body>
<script src="path/to/vue.js"></script>
<script src="path/to/vue-markdown-plus.js"></script>
<script>
Vue.use(VueMarkdownPlus);
var vm = new Vue({
el: "body",
});
</script>
var VueMarkdownPlus = require("vue-markdown-plus");
new Vue({
components: {
"vue-markdown-plus": VueMarkdownPlus,
},
});
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.
import VueMarkdownPlus from "vue-markdown-plus";
new Vue({
components: {
VueMarkdownPlus,
},
});
<vue-markdown-plus>this is the default slot</vue-markdown-plus>
After setting up the middleware in your vue component above, using the embedded markdown is as easy as writing it between the vue-markdown-plus
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 |
source | String | null |
the markdown source code |
show | Boolean | true |
enable render to the default slot automatically |
html | Boolean | true |
enable HTML syntax in source use with caution, do not enable on user inputs to prevent XSS attacks |
xhtml-out | Boolean | true |
<br></br> => <br /> |
breaks | Boolean | true |
\n => <br> |
linkify | Boolean | true |
autoconvert URL-like text to link |
emoji | Boolean | true |
:) => ๐ |
typographer | Boolean | true |
enable some language-neutral replacement and quotes beautification |
lang-prefix | String | language- |
CSS language prefix for fenced blocks |
quotes | String | โโโโ |
use โโโโ for Chinese, โโโโ for German, ยซยปโโ for Russian |
table-class | String | table |
customize html class of the <table> |
task-lists | Boolean | true |
enable GFM task list |
toc | Boolean | false |
enable automatic table of contents |
toc-id | String | undefined |
the HTML id to render TOC |
toc-class | String | table |
customize html class of the <ul> wrapping the TOC |
toc-first-level | Number | 2 |
use 2 if you want to skip <h1> from the TOC |
toc-last-level | Number | 'toc-first-level' + 1 |
use 5 if you want to skip <h6> from the TOC |
toc-anchor-link | Boolean | true |
enable the automatic anchor link in the headings |
toc-anchor-class | String | toc-anchor |
customize the anchor class name |
toc-anchor-link-symbol | String | # |
customize the anchor link symbol |
toc-anchor-link-space | Boolean | true |
enable inserting a space between the anchor link and heading |
toc-anchor-link-class | String | toc-anchor-link |
customize the anchor link symbol class name |
anchorAttributes | Object | {} |
anchor tag attributes such as target: '_blank' or rel: 'nofollow' |
prerender | Function (String) String | null |
filter function before markdown parse |
postrender | Function (String) String | null |
filter function after markdown parse |
Name | Param[Type] | Describe |
---|---|---|
rendered | outHtml[String] | dispatch when render finish |
toc-rendered | tocHtml[String] | dispatch when TOC render finish, never dispatch if the toc[prop] is false |