UNPKG

vue-markdown/README.md

Version:

5.78 kBMarkdownView Raw

1# vue-markdown
2
3[![npm](https://img.shields.io/npm/v/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/vue-markdown)
4[![npm](https://img.shields.io/npm/l/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/vue-markdown)
5[![npm](https://img.shields.io/npm/dt/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/vue-markdown)
6
7> If you want vue-markdown for `vue1.X.X`, please checkout [vue-markdown1.X.X](https://github.com/miaolz123/vue-markdown/tree/v1).
8
9A Powerful and Highspeed Markdown Parser for Vue.
10
11Quick start: `<vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>`
12
13Supported Markdown Syntax:
14
15* [x] automatic table of contents
16* [x] table & class customize
17* [x] *SyntaxHighlighter
18* [x] definition list
19* [x] strikethrough
20* [x] GFM task list
21* [x] abbreviation
22* [x] superscript
23* [x] subscript
24* [x] footnote
25* [x] insert
26* [x] *katex
27* [x] emoji
28* [x] mark
29
30`*SyntaxHighlighter` work with [Prism](http://prismjs.com) recommend
31
32`*katex` need add [katex css](https://unpkg.com/katex/dist/katex.min.css).
33
34# Example
35
36[simple](https://github.com/miaolz123/vue-markdown/blob/master/example/simple)
37
38[webpack-simple](https://github.com/miaolz123/vue-markdown/blob/master/example/webpack-simple)
39
40[Live Demo](http://miaolz123.github.io/vue-markdown/)
41
42# Installation
43
44### Browser globals
45
46> The **dist** folder contains `vue-markdown.js` with the component exported in the `window.VueMarkdown` object.
47
48```html
49<body>
50  <vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>
51</body>
52<script src="path/to/vue.js"></script>
53<script src="path/to/vue-markdown.js"></script>
54<script>
55    Vue.use(VueMarkdown);
56    var vm = new Vue({
57        el: "body"
58    });
59</script>
60```
61
62### NPM
63
64```shell
65$ npm install --save vue-markdown
66```
67
68### Yarn
69
70```shell
71$ yarn add vue-markdown --save
72```
73
74## CommonJS
75
76```js
77var VueMarkdown = require('vue-markdown');
78
79new Vue({
80  components: {
81    'vue-markdown': VueMarkdown
82  }
83})
84```
85
86## ES6 (Vue-CLI users)
87
88After installing via Yarn or NPM, use the following snippet in the script portion of the Vue component which you wish to render the Markdown.
89
90```js
91import VueMarkdown from 'vue-markdown'
92
93new Vue({
94  components: {
95    VueMarkdown
96  }
97})
98```
99
100# Slots
101
102```html
103<vue-markdown>this is the default slot</vue-markdown>
104```
105
106After setting up the middleware in your vue component above, using the embedded markdown is as easy as writing it between the `vue-markdown` tags.
107
108VueMarkdown has a default slot which is used to write the `markdown` source.
109
110TIP: The default slot only renders **once** at the beginning, and it will overwrite the prop of `source`!
111
112# Props
113
114| Prop | Type | Default | Describe |
115| ---- | ---- | ------- | ------- |
116| watches | Array | `["source", "show", "toc"]` | HTML refresh automatically when the prop in this array changed |
117| source | String | `null` | the markdown source code |
118| show | Boolean | `true` | enable render to the default slot automatically |
119| html | Boolean | `true` | enable HTML syntax in source |
120| xhtml-out | Boolean | `true` | `<br></br>` => `<br />` |
121| breaks | Boolean | `true` | `\n` => `<br>` |
122| linkify | Boolean | `true` | autoconvert URL-like text to link |
123| emoji | Boolean | `true` | `:)` => `😃` |
124| typographer | Boolean | `true` | enable some language-neutral replacement and quotes beautification |
125| lang-prefix | String | `language-` | CSS language prefix for fenced blocks |
126| quotes | String | `“”‘’` | use `“”‘’` for Chinese, `„“‚‘` for German, `«»„“` for Russian |
127| table-class | String | `table` | customize html class of the `<table>` |
128| task-lists | Boolean | `true` | enable GFM task list |
129| toc | Boolean | `false` | enable automatic table of contents |
130| toc-id | String | `undefined` | the HTML id to render TOC |
131| toc-class | String | `table` | customize html class of the `<ul>` wrapping the TOC |
132| toc-first-level | Number | `2` | use `2` if you want to skip `<h1>` from the TOC |
133| toc-last-level | Number | `'toc-first-level' + 1` | use `5` if you want to skip `<h6>` from the TOC |
134| toc-anchor-link | Boolean | `true` | enable the automatic anchor link in the headings |
135| toc-anchor-class | String | `toc-anchor` | customize the anchor class name |
136| toc-anchor-link-symbol | String | `#` | customize the anchor link symbol |
137| toc-anchor-link-space | Boolean | `true` | enable inserting a space between the anchor link and heading |
138| toc-anchor-link-class | String | `toc-anchor-link` | customize the anchor link symbol class name |
139| anchorAttributes | Object | `{}` | anchor tag attributes such as `target: '_blank'` or `rel: 'nofollow'` |
140| prerender | Function (String) String | `null` | filter function before markdown parse |
141| postrender | Function (String) String | `null` | filter function after markdown parse |
142
143# Events
144
145| Name | Param[Type] | Describe |
146| ---- | --------- | -------- |
147| rendered | outHtml[String] | dispatch when render finish |
148| toc-rendered | tocHtml[String] | dispatch when TOC render finish, never dispatch if the toc[prop] is `false` |
149
150# Thanks
151
152- [markdown-it](https://github.com/markdown-it/markdown-it)
153- [transtone](https://github.com/transtone)
154- [**brandonferens**](https://github.com/brandonferens)
155
156# Contributions
157
158- [miaolz123](https://github.com/miaolz123)
159- [brandonferens](https://github.com/brandonferens)
160- [brianbancroft](https://github.com/brianbancroft)
161- [nikolasp](https://github.com/nikolasp)
162- [mbackonja](https://github.com/mbackonja)
163- [Endi1](https://github.com/Endi1)
164- [printscreen](https://github.com/printscreen)
165- [killix](https://github.com/killix)
166- [LeFnord](https://github.com/lefnord)
167
168# License
169
170Copyright (c) 2016 [miaolz123](https://github.com/miaolz123) by [MIT](https://opensource.org/licenses/MIT)

1	`# vue-markdown`
2
3	`[![npm](https://img.shields.io/npm/v/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/vue-markdown)`
4	`[![npm](https://img.shields.io/npm/l/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/vue-markdown)`
5	`[![npm](https://img.shields.io/npm/dt/vue-markdown.svg?style=flat)](https://www.npmjs.com/package/vue-markdown)`
6
7	> If you want vue-markdown for `vue1.X.X`, please checkout [vue-markdown1.X.X](https://github.com/miaolz123/vue-markdown/tree/v1).
8
9	`A Powerful and Highspeed Markdown Parser for Vue.`
10
11	Quick start: `<vue-markdown>i am a ~~tast~~ test.</vue-markdown>`
12
13	`Supported Markdown Syntax:`
14
15	`* [x] automatic table of contents`
16	`* [x] table & class customize`
17	`* [x] *SyntaxHighlighter`
18	`* [x] definition list`
19	`* [x] strikethrough`
20	`* [x] GFM task list`
21	`* [x] abbreviation`
22	`* [x] superscript`
23	`* [x] subscript`
24	`* [x] footnote`
25	`* [x] insert`
26	`* [x] *katex`
27	`* [x] emoji`
28	`* [x] mark`
29
30	`*SyntaxHighlighter` work with [Prism](http://prismjs.com) recommend
31
32	`*katex` need add [katex css](https://unpkg.com/katex/dist/katex.min.css).
33
34	`# Example`
35
36	`[simple](https://github.com/miaolz123/vue-markdown/blob/master/example/simple)`
37
38	`[webpack-simple](https://github.com/miaolz123/vue-markdown/blob/master/example/webpack-simple)`
39
40	`[Live Demo](http://miaolz123.github.io/vue-markdown/)`
41
42	`# Installation`
43
44	`### Browser globals`
45
46	> The dist folder contains `vue-markdown.js` with the component exported in the `window.VueMarkdown` object.
47
48	```html
49	`<body>`
50	`<vue-markdown>i am a ~~tast~~ test.</vue-markdown>`
51	`</body>`
52	`<script src="path/to/vue.js"></script>`
53	`<script src="path/to/vue-markdown.js"></script>`
54	`<script>`
55	`Vue.use(VueMarkdown);`
56	`var vm = new Vue({`
57	`el: "body"`
58	`});`
59	`</script>`
60	```
61
62	`### NPM`
63
64	```shell
65	`$ npm install --save vue-markdown`
66	```
67
68	`### Yarn`
69
70	```shell
71	`$ yarn add vue-markdown --save`
72	```
73
74	`## CommonJS`
75
76	```js
77	`var VueMarkdown = require('vue-markdown');`
78
79	`new Vue({`
80	`components: {`
81	`'vue-markdown': VueMarkdown`
82	`}`
83	`})`
84	```
85
86	`## ES6 (Vue-CLI users)`
87
88	`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.`
89
90	```js
91	`import VueMarkdown from 'vue-markdown'`
92
93	`new Vue({`
94	`components: {`
95	`VueMarkdown`
96	`}`
97	`})`
98	```
99
100	`# Slots`
101
102	```html
103	`<vue-markdown>this is the default slot</vue-markdown>`
104	```
105
106	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.
107
108	VueMarkdown has a default slot which is used to write the `markdown` source.
109
110	TIP: The default slot only renders once at the beginning, and it will overwrite the prop of `source`!
111
112	`# Props`
113
114	`\| Prop \| Type \| Default \| Describe \|`
115	`\| ---- \| ---- \| ------- \| ------- \|`
116	\| watches \| Array \| `["source", "show", "toc"]` \| HTML refresh automatically when the prop in this array changed \|
117	\| source \| String \| `null` \| the markdown source code \|
118	\| show \| Boolean \| `true` \| enable render to the default slot automatically \|
119	\| html \| Boolean \| `true` \| enable HTML syntax in source \|
120	\| xhtml-out \| Boolean \| `true` \| `<br></br>` => `<br />` \|
121	\| breaks \| Boolean \| `true` \| `\n` => `<br>` \|
122	\| linkify \| Boolean \| `true` \| autoconvert URL-like text to link \|
123	\| emoji \| Boolean \| `true` \| `:)` => `😃` \|
124	\| typographer \| Boolean \| `true` \| enable some language-neutral replacement and quotes beautification \|
125	\| lang-prefix \| String \| `language-` \| CSS language prefix for fenced blocks \|
126	\| quotes \| String \| `“”‘’` \| use `“”‘’` for Chinese, `„“‚‘` for German, `«»„“` for Russian \|
127	\| table-class \| String \| `table` \| customize html class of the `<table>` \|
128	\| task-lists \| Boolean \| `true` \| enable GFM task list \|
129	\| toc \| Boolean \| `false` \| enable automatic table of contents \|
130	\| toc-id \| String \| `undefined` \| the HTML id to render TOC \|
131	\| toc-class \| String \| `table` \| customize html class of the `<ul>` wrapping the TOC \|
132	\| toc-first-level \| Number \| `2` \| use `2` if you want to skip `<h1>` from the TOC \|
133	\| toc-last-level \| Number \| `'toc-first-level' + 1` \| use `5` if you want to skip `<h6>` from the TOC \|
134	\| toc-anchor-link \| Boolean \| `true` \| enable the automatic anchor link in the headings \|
135	\| toc-anchor-class \| String \| `toc-anchor` \| customize the anchor class name \|
136	\| toc-anchor-link-symbol \| String \| `#` \| customize the anchor link symbol \|
137	\| toc-anchor-link-space \| Boolean \| `true` \| enable inserting a space between the anchor link and heading \|
138	\| toc-anchor-link-class \| String \| `toc-anchor-link` \| customize the anchor link symbol class name \|
139	\| anchorAttributes \| Object \| `{}` \| anchor tag attributes such as `target: '_blank'` or `rel: 'nofollow'` \|
140	\| prerender \| Function (String) String \| `null` \| filter function before markdown parse \|
141	\| postrender \| Function (String) String \| `null` \| filter function after markdown parse \|
142
143	`# Events`
144
145	`\| Name \| Param[Type] \| Describe \|`
146	`\| ---- \| --------- \| -------- \|`
147	`\| rendered \| outHtml[String] \| dispatch when render finish \|`
148	\| toc-rendered \| tocHtml[String] \| dispatch when TOC render finish, never dispatch if the toc[prop] is `false` \|
149
150	`# Thanks`
151
152	`- [markdown-it](https://github.com/markdown-it/markdown-it)`
153	`- [transtone](https://github.com/transtone)`
154	`- [brandonferens](https://github.com/brandonferens)`
155
156	`# Contributions`
157
158	`- [miaolz123](https://github.com/miaolz123)`
159	`- [brandonferens](https://github.com/brandonferens)`
160	`- [brianbancroft](https://github.com/brianbancroft)`
161	`- [nikolasp](https://github.com/nikolasp)`
162	`- [mbackonja](https://github.com/mbackonja)`
163	`- [Endi1](https://github.com/Endi1)`
164	`- [printscreen](https://github.com/printscreen)`
165	`- [killix](https://github.com/killix)`
166	`- [LeFnord](https://github.com/lefnord)`
167
168	`# License`
169
170	`Copyright (c) 2016 [miaolz123](https://github.com/miaolz123) by [MIT](https://opensource.org/licenses/MIT)`