Attrs support
About 1 min
You can use custom syntax to add attrs for Markdown content.
Config
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
plugins: {
mdEnhance: {
attrs: true,
},
},
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
plugins: {
mdEnhance: {
attrs: true,
},
},
}),
};
Usage
You can use {attrs}
to add attrs to Markdown content.
For example, if you want a heading2 "Hello World" with an id "say-hello-world", you can write:
## Hello World {#say-hello-world}
If you want an image with class "full-width", you can write:
 {.full-width}
Also, other attrs are supported, so:
A paragraph with some text. {#p .a .b align=center customize-attr="content with spaces"}
will be rendered into:
<p id="p" class="a b" align="center" customize-attr="content with spaces">
A paragraph with some text.
</p>
Escaping
Escaping can be done by adding \
to escape the delimiter:
### Heading \{#heading}
will be
Heading {#heading}
Advanced
You can pass options to plugins.mdEnhance.attrs
to customize plugin behavior.
type MarkdownItAttrRuleName =
| "fence"
| "inline"
| "table"
| "list"
| "hr"
| "softbreak"
| "block";
interface MarkdownItAttrsOptions {
/**
* left delimiter
*
* @default '{'
*/
left?: string;
/**
* right delimiter
*
* @default '}'
*/
right?: string;
/**
* allowed attributes
*
* @description An empty list means allowing all attribute
*
* @default []
*/
allowed?: (string | RegExp)[];
/**
* Rules to enable
*
* @default "all"
*/
rule?: "all" | boolean | MarkdownItAttrRuleName[];
}
Demo
All class are styled with
margin: 4px;padding: 4px;border: 1px solid red;
to show the effect.
Inline (inline)
Text with inline code
and , also supporting emphasis and bold.
Text with `inline code`{.inline-code} and {.image}, also supporting _emphasis_{.inline-emphasis} and **bold**{.inline-bold}.
Block (block)
block content
block content {.block}
Fence (fence)
const a = 1;
```js {.fence}
const a = 1;
```
Table (table)
Table |
---|
content |
| Table |
| ------- |
| content |
{.md-table}
List (list)
list item
- nested list item
- list item{.list-item}
- nested list item
{.nested}
{.list-wrapper}
Horizontal (hr)
--- {.horizontal}
Softbreak (softbreak)
A line with break
A line with break
{.break}