1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
|
# remark-attr
This plugin adds support for custom attributes to Markdown syntax.
For **security reasons**, this plugin uses [html-element-attributes](https://github.com/wooorm/html-element-attributes).
The use of JavaScript attributes (`onload` for example) is not allowed by default.
## Default Syntax
Images :
~~~markdown
{attrs} / { height=50 }
~~~
Links :
~~~markdown
[rms with a computer](https://rms.sexy){rel="external"}
~~~
Autolink :
~~~markdown
Email me at : <mailto:falseEmail@example.org>
~~~
Header (Atx) :
~~~markdown
### This is a title
{style="color:red;"}
or
### This is a title {style="color:yellow;"}
If option enableAtxHeaderInline is set to `true` (default value).
~~~
Header :
~~~markdown
This is a title
---------------
{style="color: pink;"}
~~~
Emphasis :
~~~markdown
Npm stand for *node*{style="color:red"} packet manager.
~~~
Strong :
~~~markdown
This is a **Unicorn**{awesome} !
~~~
Delete :
~~~markdown
Your problem is ~~at line 18~~{style="color: grey"}. My mistake, it's at line 14.
Code :
~~~markdown
You can use the `fprintf`{language=c} function to format the output to a file.
~~~
Footnote (using [remark-footnotes](https://github.com/remarkjs/remark-footnotes)) :
~~~markdown
This is a footnote[^ref]{style="opacity: 0.8;"}
[^ref]: And the reference.
~~~
## rehype
At the moment it aims is to be used with [rehype][rehype] only, using remark-rehype.
~~~md
[rms with a computer](https://rms.sexy){rel=external}
~~~
produces:
~~~html
<a href="https://rms.sexy" rel="external">rms with a computer</a>
~~~
## Installation
[npm][npm]:
~~~bash
npm install remark-attr
~~~
## Dependencies:
~~~javascript
const unified = require('unified')
const remarkParse = require('remark-parse')
const stringify = require('rehype-stringify')
const remark2rehype = require('remark-rehype')
const remarkAttr = require('remark-attr')
~~~
## Usage:
~~~javascript
const testFile = `
Here a test :
{ height=100 }
`
unified()
.use(remarkParse)
.use(remarkAttr)
.use(remark2rehype)
.use(stringify)
.process( testFile, (err, file) => {
console.log(String(file))
} )
~~~
Output :
~~~shell
$ node index.js
<p>Here a test :</p>
<p><img src="https://ache.one/res/ache.svg" alt="ache avatar" height="100"></p>
~~~
## API
### `remarkAttr([options])`
Parse attributes of markdown elements.
#### `remarkAttr.SUPPORTED_ELEMENTS`
The list of currently supported elements.
`['link', 'atxHeading', 'strong', 'emphasis', 'deletion', 'code', 'setextHeading']`
`['link', 'atxHeading', 'strong', 'emphasis', 'deletion', 'code', 'setextHeading', 'fencedCode', 'reference', 'footnoteCall', 'autoLink']`
##### Options
###### `options.allowDangerousDOMEventHandlers`
Whether to allow the use of `on-*` attributes. They are depreciated and disabled by default for security reasons. Its a boolean (default: `false`).
If allowed, DOM event handlers will be added to the **global scope**.
###### `options.elements`
The list of elements witch the attributes should be parsed.
It's a list of string, a sub-list of `SUPPORTED_ELEMENTS`.
If you are confident enough you can add the name of a tokenizer that isn't officialy supported but remember that it will not have been tested.
###### `options.extend`
An object that extends the list of attributes supported for some elements.
Example : `extend: {heading: ['original', 'quality', 'format', 'toc']}`
With this configuration, if the scope permits it, 4 mores attributes will be supported for atxHeading elements.
###### `options.scope`
A string with the value `global` or `specific` or `extented` or `none` or `every`.
- `none` will disable the plugin.
- `global` will activate only the global attributes.
- `specific` will activate global and specific attributes.
- `extended` will add personalized tags for some elements.
- `permissive` or `every` will allow every attributes (except dangerous one) on every elements supported.
###### `options.enableAtxHeaderInline`
Whether to allow atx headers with attributes on the same line.
~~~md
### This is a title {style="color:yellow;"}
~~~
## How does it works ?
This plugin extend the syntax of [remark-parse][remark-parse] by replacing old tokenizers by new one.
The new tokenizers functions re-use the old tokenizers and [md-attr-parser][md-attr-parser] to parse the extended syntax.
So `option.SUPPORTED_ELEMENTS` are the names of the tokenizers and neither arbitrary names nor HTML tag names.
Here is the [related documentation][doc].
## License
Distributed under a MIT license.
[npm]: https://www.npmjs.com/package/remark-attr
[rehype]: https://github.com/wooorm/rehype
[remar-parse]: https://github.com/remarkjs/remark/tree/master/packages/remark-parse
[md-attr-parser]: https://github.com/arobase-che/md-attr-parser
[doc]: https://github.com/remarkjs/remark/tree/master/packages/remark-parse#extending-the-parser
|
