blob: 43ad18848d29cf7647a05ff3aa39fa6cf771a7a7 (
plain)
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
|
# remark-attr
This plugin add support of custom attributes to Markdown syntax.
**This is an alpha not ready to be used in production.**
For the moment, it only support image and link.
It aimed to support any other elements of the markdown syntax.
Also for security reasons, this plugin should use [html-element-attributes](https://github.com/wooorm/html-element-attributes).
The use of JavaScript attributes (onload for example) must not be allowed by default.
## Default Syntax
Images :
```markdown
{attrs} / { height=50 }
```
Links :
```markdown
[Hot babe with computer](https://rms.sexy){rel="external"}
```
## rehype
This plugin is compatible with [rehype][rehype].
Actually, it wouldn't really do much good otherwise.
At the moment it aims is to be used with remark-rehype only.
```md
[Hot babe with computer](https://rms.sexy){rel="external"}
```
gives:
```html
<a href="https://rms.sexy" rel="external">Hot babe with computer</a>
```
## Installation
[npm][npm]:
```bash
npm install remark-attr
```
## Usage
### 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>
```
<!-- Should talk about options -->
## License
<!-- GNUv3 or MIT -->
[zds]: https://zestedesavoir.com
[npm]: https://www.npmjs.com/package/remark-attr
[mdast]: https://github.com/syntax-tree/mdast/blob/master/readme.md
[rehype]: https://github.com/wooorm/rehype
[parent]: https://github.com/syntax-tree/unist#parent
|
