Skip to content

Commit 7d04d57

Browse files
ravenqravenq
committed
options supports
1 parent 2211bf9 commit 7d04d57

File tree

7 files changed

+1151
-383
lines changed

7 files changed

+1151
-383
lines changed

‎README.md‎

Lines changed: 93 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -16,43 +16,107 @@ npm install markdown-it-vue
1616

1717
## Supports
1818

19-
* Official markdown syntax.
20-
* GFM TOC
21-
* GFM style
22-
* emoji
23-
* [mermaid charts](http://knsv.github.io/mermaid/)
24-
* [Echarts](http://echarts.baidu.com)
25-
* Flowcharts.js
26-
* Subscript/Superscript
27-
* [AsciiMath](http://asciimath.org/)
28-
* info | error | warning message tip
19+
- Official markdown syntax.
20+
- GFM TOC
21+
- GFM style
22+
- emoji
23+
- [mermaid charts](http://knsv.github.io/mermaid/)
24+
- [Echarts](http://echarts.baidu.com)
25+
- Flowcharts.js
26+
- Subscript/Superscript
27+
- [AsciiMath](http://asciimath.org/)
28+
- info | error | warning message tip
2929

3030
## Plugin list
3131

32-
* markdown-it
33-
* markdown-it-emoji
34-
* markdown-it-sub
35-
* markdown-it-sup
36-
* markdown-it-footnote
37-
* markdown-it-deflist
38-
* markdown-it-abbr
39-
* markdown-it-ins
40-
* markdown-it-mark
41-
* markdown-it-katex
42-
* markdown-it-task-lists
43-
* markdown-it-icons
44-
* markdown-it-highlight
45-
* markdown-it-latex
46-
* markdown-it-container
47-
* markdown-it-github-toc
48-
* markdown-it-source-map
32+
- markdown-it
33+
- markdown-it-emoji
34+
- markdown-it-sub
35+
- markdown-it-sup
36+
- markdown-it-footnote
37+
- markdown-it-deflist
38+
- markdown-it-abbr
39+
- markdown-it-ins
40+
- markdown-it-mark
41+
- markdown-it-katex
42+
- markdown-it-task-lists
43+
- markdown-it-icons
44+
- markdown-it-highlight
45+
- markdown-it-latex
46+
- markdown-it-container
47+
- markdown-it-github-toc
48+
- markdown-it-source-map
49+
- markdown-it-link-attributes
50+
51+
internal plugin list:
52+
53+
- markdown-it-plugin-echarts
54+
- markdown-it-plugin-mermaid
55+
- markdown-it-plugin-flowchart
56+
57+
## Options
58+
59+
use `options` property to sepcial the options of markdow-it and markdown-it-plugins.
60+
61+
```html
62+
<markdown-it-vue class="md-body" :content="content" :options="options" />
63+
```
64+
65+
```js
66+
options: {
67+
markdownIt: {
68+
linkify: true
69+
},
70+
linkAttributes: {
71+
target: '_blank',
72+
rel: 'noopener'
73+
}
74+
}
75+
```
76+
77+
more markdown-it options see <https://markdown-it.github.io/markdown-it/>.
78+
79+
amd default plugins options:
80+
81+
```js
82+
{
83+
linkAttributes: {
84+
attrs: {
85+
target: '_blank',
86+
rel: 'noopener'
87+
}
88+
},
89+
katex: {
90+
throwOnError: false,
91+
errorColor: '#cc0000'
92+
},
93+
icons: 'font-awesome',
94+
githubToc: {
95+
tocFirstLevel: 2,
96+
tocLastLevel: 3,
97+
tocClassName: 'toc',
98+
anchorLinkSymbol: '',
99+
anchorLinkSpace: false,
100+
anchorClassName: 'anchor',
101+
anchorLinkSymbolClassName: 'octicon octicon-link'
102+
}
103+
}
104+
```
105+
106+
## More plugins
107+
108+
it can add your plugin to markdown-it-vue by the `use` method.
109+
110+
```js
111+
this.$refs.myMarkdownItVue.use(MyMarkdownItPlugin)
112+
```
49113

50114
## Usage
51115

52116
```vue
53117
<template>
54118
<div>
55-
<markdown-it-vue class="md-body" :content="content"/>
119+
<markdown-it-vue class="md-body" :content="content" />
56120
</div>
57121
</template>
58122
@@ -63,7 +127,7 @@ export default {
63127
components: {
64128
MarkdownItVue
65129
},
66-
data () {
130+
data() {
67131
return {
68132
content: '# your markdown content'
69133
}

‎README_CN.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ markdown-it-vue 是一个丰富的 markdown Vue 组件，markdown-it-vue 使用
1010

1111
[http://www.aqcoder.com/markdown](http://www.aqcoder.com/markdown)
1212

13+
由于众所周知的原因，可能需要 fan qiang。
14+
1315
## 安装
1416

1517
```sh
@@ -48,6 +50,72 @@ npm install markdown-it-vue
4850
* markdown-it-container
4951
* markdown-it-github-toc
5052
* markdown-it-source-map
53+
* markdown-it-link-attributes
54+
55+
内置插件：
56+
57+
* markdown-it-plugin-echarts
58+
* markdown-it-plugin-mermaid
59+
* markdown-it-plugin-flowchart
60+
61+
## markdown-it 及个插件选项
62+
63+
使用 `options` 指定 markdow-it 和个插件的选项。
64+
65+
```html
66+
<markdown-it-vue class="md-body" :content="content" :options="options" />
67+
```
68+
69+
```js
70+
options: {
71+
markdownIt: {
72+
linkify: true
73+
},
74+
linkAttributes: {
75+
target: '_blank',
76+
rel: 'noopener'
77+
}
78+
}
79+
```
80+
81+
更多 markdown-it 选项见官方文档：<https://markdown-it.github.io/markdown-it/>。
82+
83+
插件默认选项如下：
84+
85+
```js
86+
{
87+
linkAttributes: {
88+
attrs: {
89+
target: '_blank',
90+
rel: 'noopener'
91+
}
92+
},
93+
katex: {
94+
throwOnError: false,
95+
errorColor: '#cc0000'
96+
},
97+
icons: 'font-awesome',
98+
githubToc: {
99+
tocFirstLevel: 2,
100+
tocLastLevel: 3,
101+
tocClassName: 'toc',
102+
anchorLinkSymbol: '',
103+
anchorLinkSpace: false,
104+
anchorClassName: 'anchor',
105+
anchorLinkSymbolClassName: 'octicon octicon-link'
106+
}
107+
}
108+
```
109+
110+
个插件详细说明见个插件官方文档。
111+
112+
## More plugins
113+
114+
it can add your plugin to markdown-it-vue by the `use` method.
115+
116+
```js
117+
this.$refs.myMarkdownItVue.use(MyMarkdownItPlugin)
118+
```
51119

52120
## 使用示例
53121

‎example/components/example.vue‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="container">
33
<textarea class="md-text" rows="10" v-model="content"/>
4-
<markdown-it-vue class="md-body" :content="content"/>
4+
<markdown-it-vue class="md-body" :content="content" :options="options" />
55
</div>
66
</template>
77

@@ -14,7 +14,16 @@ export default {
1414
},
1515
data () {
1616
return {
17-
content: MarkdownText
17+
content: MarkdownText,
18+
options: {
19+
markdownIt: {
20+
linkify: true
21+
},
22+
linkAttributes: {
23+
target: '_blank',
24+
rel: 'noopener'
25+
}
26+
}
1827
}
1928
}
2029
}

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "markdown-it-vue",
3-
"version": "1.0.8",
3+
"version": "1.0.9",
44
"private": false,
55
"description": "The vue lib for markdown-it",
66
"author": {
@@ -20,7 +20,7 @@
2020
"src"
2121
],
2222
"scripts": {
23-
"serve": "vue-cli-service serve ./example/main.js",
23+
"dev": "vue-cli-service serve ./example/main.js",
2424
"build": "npm run build:lib && npm run build:example",
2525
"lint": "vue-cli-service lint",
2626
"build:example": "node --max_old_space_size=8192 node_modules/@vue/cli-service/bin/vue-cli-service.js build --dest example/dist ./example/main.js",
@@ -29,7 +29,7 @@
2929
"main": "dist/markdown-it-vue.umd.min.js",
3030
"dependencies": {
3131
"echarts": "^4.1.0",
32-
"flowchart.js": "^1.11.3",
32+
"flowchart.js": "^1.12.0",
3333
"github-markdown-css": "^3.0.1",
3434
"markdown-it": "^8.4.2",
3535
"markdown-it-abbr": "^1.0.4",
@@ -53,13 +53,13 @@
5353
"vue": "^2.6.6"
5454
},
5555
"devDependencies": {
56-
"@vue/cli-plugin-babel": "^3.5.3",
57-
"@vue/cli-plugin-eslint": "^3.5.0",
58-
"@vue/cli-service": "^3.5.3",
56+
"@vue/cli-plugin-babel": "^3.8.0",
57+
"@vue/cli-plugin-eslint": "^3.8.0",
58+
"@vue/cli-service": "^3.8.0",
5959
"babel-eslint": "^10.0.1",
6060
"eslint": "^5.16.0",
6161
"eslint-plugin-vue": "^5.0.0",
62-
"vue-cli-plugin-component-lib": "^0.1.3",
62+
"vue-cli-plugin-component-lib": "^0.1.6",
6363
"vue-template-compiler": "^2.5.21"
6464
},
6565
"eslintConfig": {

‎src/markdown-it-link-attributes.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
'use strict'
2+
3+
// Adapted from https://github.com/markdown-it/markdown-it/blob/fbc6b0fed563ba7c00557ab638fd19752f8e759d/docs/architecture.md
4+
5+
function findFirstMatchingConfig(link, configs) {
6+
var i, config
7+
if (!link.attrIndex) {
8+
return
9+
}
10+
var href = link.attrs[link.attrIndex('href')][1]
11+
12+
for (i = 0; i < configs.length; ++i) {
13+
config = configs[i]
14+
15+
// if there is no pattern, config matches for all links
16+
// otherwise, only return config if href matches the pattern set
17+
if (!config.pattern || new RegExp(config.pattern).test(href)) {
18+
return config
19+
}
20+
}
21+
}
22+
23+
function applyAttributes(idx, tokens, attributes) {
24+
Object.keys(attributes).forEach(function(attr) {
25+
var attrIndex
26+
var value = attributes[attr]
27+
28+
if (attr === 'className') {
29+
// when dealing with applying classes
30+
// programatically, some programmers
31+
// may prefer to use the className syntax
32+
attr = 'class'
33+
}
34+
35+
attrIndex = tokens[idx].attrIndex(attr)
36+
37+
if (attrIndex < 0) {
38+
// attr doesn't exist, add new attribute
39+
tokens[idx].attrPush([attr, value])
40+
} else {
41+
// attr already exists, overwrite it
42+
tokens[idx].attrs[attrIndex][1] = value // replace value of existing attr
43+
}
44+
})
45+
}
46+
47+
function markdownitLinkAttributes(md, configs) {
48+
if (!configs) {
49+
configs = []
50+
} else {
51+
configs = Array.isArray(configs) ? configs : [configs]
52+
}
53+
54+
Object.freeze(configs)
55+
56+
var defaultRender = md.renderer.rules.link_open || this.defaultRender
57+
58+
md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
59+
var config = findFirstMatchingConfig(tokens[idx], configs)
60+
var attributes = config && config.attrs
61+
62+
if (attributes) {
63+
applyAttributes(idx, tokens, attributes)
64+
}
65+
66+
// pass token to default renderer.
67+
return defaultRender(tokens, idx, options, env, self)
68+
}
69+
}
70+
71+
markdownitLinkAttributes.defaultRender = function(
72+
tokens,
73+
idx,
74+
options,
75+
env,
76+
self
77+
) {
78+
return self.renderToken(tokens, idx, options)
79+
}
80+
81+
export default markdownitLinkAttributes

0 commit comments

Comments
 (0)