vue-markdown
Advanced tools
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: <vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>
Supported Markdown Syntax:
*SyntaxHighlighter work with Prism recommend
*katex need add katex css.
The dist folder contains
vue-markdown.jswith the component exported in thewindow.VueMarkdownobject.
<body>
<vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>
</body>
<script src="path/to/vue.js"></script>
<script src="path/to/vue-markdown.js"></script>
<script>
Vue.use(VueMarkdown);
var vm = new Vue({
el: "body"
});
</script>
$ npm install --save vue-markdown
$ yarn add vue-markdown --save
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.
import VueMarkdown from 'vue-markdown'
new Vue({
components: {
VueMarkdown
}
})
<vue-markdown>this is the default slot</vue-markdown>
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 |
| 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 |
| 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 |
FAQs
A Powerful and Highspeed Markdown Parser for Vue
We found that vue-markdown demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.