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
|
# markdown-it-container
[](https://travis-ci.org/markdown-it/markdown-it-container)
[](https://www.npmjs.org/package/markdown-it-container)
[](https://coveralls.io/r/markdown-it/markdown-it-container?branch=master)
> Plugin for creating block-level custom containers for [markdown-it](https://github.com/markdown-it/markdown-it) markdown parser.
__v2.+ requires `markdown-it` v5.+, see changelog.__
With this plugin you can create block containers like:
```
::: warning
*here be dragons*
:::
```
.... and specify how they should be rendered. If no renderer defined, `<div>` with
container name class will be created:
```html
<div class="warning">
<em>here be dragons</em>
</div>
```
Markup is the same as for [fenced code blocks](http://spec.commonmark.org/0.18/#fenced-code-blocks).
Difference is, that marker use another character and content is rendered as markdown markup.
## Installation
node.js, browser:
```bash
$ npm install markdown-it-container --save
$ bower install markdown-it-container --save
```
## API
```js
var md = require('markdown-it')()
.use(require('markdown-it-container'), name [, options]);
```
Params:
- __name__ - container name (mandatory)
- __options:__
- __validate__ - optional, function to validate tail after opening marker, should
return `true` on success.
- __render__ - optional, renderer function for opening/closing tokens.
- __marker__ - optional (`:`), character to use in delimiter.
## Example
```js
var md = require('markdown-it')();
md.use(require('markdown-it-container'), 'spoiler', {
validate: function(params) {
return params.trim().match(/^spoiler\s+(.*)$/);
},
render: function (tokens, idx) {
var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/);
if (tokens[idx].nesting === 1) {
// opening tag
return '<details><summary>' + md.utils.escapeHtml(m[1]) + '</summary>\n';
} else {
// closing tag
return '</details>\n';
}
}
});
console.log(md.render('::: spoiler click me\n*content*\n:::\n'));
// Output:
//
// <details><summary>click me</summary>
// <p><em>content</em></p>
// </details>
```
## License
[MIT](https://github.com/markdown-it/markdown-it-container/blob/master/LICENSE)
|
