Overview

Add classes, identifiers, and attributes to your Markdown.

This feature is enabled by default.

Syntax

Use { } after Markdown tokens to add class names, identifiers, or attributes.

markdown content{.classname #id attr1=value attr2="value with spaces"}

.classname

Start with . to add a class.

Input:

__bold__{.bolder}

Output:

<strong class="bolder">bold</strong>

#id

Start with # to add an ID.

Input:

## Heading{#header-1}

Output:

<h2 id="header-1">Heading</h2>

This is commonly used for customizing anchor links for headings.

attr=value

Input:

[link](https://example.com){target=_blank}
[link](https://example.com){rel="noopener noreferrer"}

Output:

<a href="https://example.com" target="_blank">link</a>
<a href="https://example.com" rel="noopener noreferrer">link</a>

Combined Usage

Input:

[link](https://example.com){.link #linkId target=_blank rel="noopener noreferrer"}

Output:

<a href="https://example.com" class="link" id="linkId" target="_blank" rel="noopener noreferrer">link</a>

On Block-Level Tokens

Add attributes on the next line after block-level tokens.

For example, using with an unordered list:

Input:

- list item **bold**
{.red}

Output:

<ul class="red">
  <li class="red">list item <strong>bold</strong></li>
</ul>

For example, using with a table:

Input:

| header1 | header2 |
| ------- | ------- |
| column1 | column2 |

{.special}  <!-- Note: an empty line is required before this -->

Output:

<table class="special">
  <thead>
    <tr>
      <th>header1</th>
      <th>header2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>column1</td>
      <td>column2</td>
    </tr>
  </tbody>
</table>

Table cells can also use attributes, commonly for cell merging:

Input:

| A                       | B   | C   | D                |
| ----------------------- | --- | --- | ---------------- |
| 1                       | 11  | 111 | 1111 {rowspan=3} |
| 2 {colspan=2 rowspan=2} | 22  | 222 | 2222             |
| 3                       | 33  | 333 | 3333             |

Output:

<table border="1">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>11</td>
      <td>111</td>
      <td rowspan="3">1111</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">2</td>
      <td>22</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
  </tbody>
</table>

Result:

A	B	C	D
1	11	111	1111
2		222
		333

Contributors

pengzhanbo

Changelog

9/9/26, 7:33 AM

View All Changelog

• 1d04d-feat: add builtin auto-import-components (#932)on 9/9/26
• db8a4-docs: optimize and completion docs (#766)on 12/1/25

Edit this page

Previous pageExtensions

Next pageemoji