79 lines
1.8 KiB
Markdown
79 lines
1.8 KiB
Markdown
# markdown-it-inline
|
|
A [markdown-it](https://github.com/markdown-it/markdown-it) plugin
|
|
to write inline tag.
|
|
|
|
## Syntax
|
|
`%tag[inline]` is parsed as `<tag>inline</tag>`,
|
|
where `inline` is parsed as markdown text.
|
|
|
|
## Usage
|
|
```js
|
|
const md = require('markdown-it')();
|
|
const mia = require('@sup39/markdown-it-inline-tag');
|
|
|
|
console.log(md.use(mia).render(`
|
|
1 %div[2 %span[ab] c*d*e 3] 4
|
|
`));
|
|
```
|
|
Expected output:
|
|
```html
|
|
<p>1 <div>2 <span>ab</span> c<em>d</em>e 3</div> 4</p>
|
|
```
|
|
|
|
### Alias
|
|
You can also set alias for `tag`.
|
|
|
|
For example,
|
|
```js
|
|
const md = require('markdown-it')();
|
|
const mit = require('@sup39/markdown-it-inline-tag');
|
|
|
|
console.log(md.use(mit, {
|
|
alias: {
|
|
's': 'span',
|
|
'@': 'div',
|
|
},
|
|
}).render(`
|
|
1 %@[2 %s[ab] c*d*e 3] 4
|
|
`));
|
|
```
|
|
Expected output:
|
|
```html
|
|
<p>1 <div>2 <span>ab</span> c<em>d</em>e 3</div> 4</p>
|
|
```
|
|
|
|
### Extension: attributes
|
|
You can use
|
|
[@sup39/markdown-it-attr](https://github.com/sup39/markdown-it-attr)
|
|
plugin to add attributes to inline tags.
|
|
|
|
```js
|
|
const md = require('markdown-it')();
|
|
const mia = require('@sup39/markdown-it-attr');
|
|
const mit = require('@sup39/markdown-it-inline-tag');
|
|
|
|
console.log(md.use(mia).use(mrt).render(`
|
|
1 %div[2 %span[ab]{.a} c*d*{.b}e 3]{.c} 4
|
|
`));
|
|
```
|
|
Expected output:
|
|
```html
|
|
<p>1 <div class="c">2 <span class="a">ab</span> c<em class="b">d</em>e 3</div> 4</p>
|
|
```
|
|
|
|
Also, you can omit `%tag` if there is `{attrs}` right after `[...]`.
|
|
In this case, the tag name will be `alias['']` or `span` if not assigned.
|
|
|
|
```js
|
|
const md = require('markdown-it')();
|
|
const mia = require('@sup39/markdown-it-attr');
|
|
const mit = require('@sup39/markdown-it-inline-tag');
|
|
|
|
console.log(md.use(mia).use(mrt, {'': 'summary'}).render(`
|
|
1 [2 %span[ab]{.a} c*d*{.b}e 3]{.c} 4
|
|
`));
|
|
```
|
|
Expected output:
|
|
```html
|
|
<p>1 <summary class="c">2 <span class="a">ab</span> c<em class="b">d</em>e 3</summary> 4</p>
|
|
```
|