markdown-it-attr/README.md

markdown-it-attr

A markdown-it plugin to write id, classes, and attributes.

Syntax

{#id .class1 .class2 attr=val attr1='val"s"' attr2="val's" attr3}

Where to put {...}

type	where	example
inline tag	AFTER tag	em / strong
inline block	beginning / end	li / td / th
block	BEFORE block	h1 / ul / table

Note: There is no way to add attributes to tr without extension.
See Extension: Attributes for tr for more info.

Examples

Attributes for inline tag

Add {...} AFTER the inline tag.

em / strong

Example Input:

*x*{.a} **y**{.b} ***z***{.c}

Output:

<p><em class="a">x</em> <strong class="b">y</strong> <em class="c"><strong>z</strong></em></p>

Attributes for inline block

Add {...} at the beginning or the end in the inline block.

list item

Example Input:

- {.a} x1
- x2 {.b}
- x3

Output:

<ul>
<li class="a">x1</li>
<li class="b">x2</li>
<li>x3</li>
</ul>

th / td

Example Input:

|h1{.a}|h2{.b}|
|------|------|
|d1{.c}|d2{.d}|

Output:

<table>
<thead>
<tr>
<th class="a">h1</th>
<th class="b">h2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="c">d1</td>
<td class="d">d2</td>
</tr>
</tbody>
</table>

Attributes for block

Add {...} BEFORE the block.

header

Example Input:

{.a}
# h1

Output:

<h1 class="a">h1</h1>

list

Example Input:

{.b}
- l1
- l2

Output:

<ul class="b">
<li>l1</li>
<li>l2</li>
</ul>

table

Example Input:

{.c}
|h1|h2|
|--|--|
|d1|d2|

Output:

<table class="c">
<thead>
<tr>
<th>h1</th>
<th>h2</th>
</tr>
</thead>
<tbody>
<tr>
<td>d1</td>
<td>d2</td>
</tr>
</tbody>
</table>

Usage

const md = require('markdown-it')();
const mia = require('@sup39/markdown-it-attr');

console.log(md.use(mia).render(`
{#head-id}
# head
`));

Expected output:

<h1 id="head-id">head</h1>

Extension: Attributes for tr

To make adding attributes to `tr` work, it is required to use [@sup39/markdown-it-raw-table](https://github.com/sup39/markdown-it-raw-table) plugin, in order to prevent forcing td count to be equal to th count, which eliminates the attributes of `tr`.

const md = require('markdown-it')();
const mia = require('@sup39/markdown-it-attr');
const mrt = require('@sup39/markdown-it-raw-table');

// enable raw_table_tr rule
mia.inlineAttrsApplyRules.find(e=>e.name==='raw_table_tr').disabled = false;

console.log(md.use(mia).use(mrt).render(`
| h1 | h2 | h3 {.ch} |
| -- | -- | -- |
| x1 | x2 {.c2} | x3 {rowspan=2} | {.r1}
| x4 {colspan=2 .c4} | {.r2}
`));

Expected output:

<table>
<thead>
<tr>
<th>h1</th>
<th>h2</th>
<th class="ch">h3</th>
</tr>
</thead>
<tbody>
<tr class="r1">
<td>x1</td>
<td class="c2">x2</td>
<td rowspan="2" class="c3">x3</td>
</tr>
<tr class="r2">
<td colspan="2" class="c4">x4</td>
</tr>
</tbody>
</table>

h1	h2	h3
x1	x2	x3
x4

Note that adding attributes to tr of the th row is NOT available.