Attrs support

Less than 1 minuteMarkdownAttributesMarkdown

You can use custom syntax to add attrs for Markdown content.


// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        attrs: true,



You can use {attrs} to add attrs to Markdown content.

For example, if you want a heading2 "Hello World" with a id "say-hello-world", you can write:

## Hello World {#say-hello-world}

If you want a image with class "full-width", you can write:

![img](link/to/image.png) {.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.


You can pass options to plugins.mdEnhance.attrs to customize plugin behavior.

interface AttrsOptions {
   * left delimiter
   * @default '{'
  left?: string;

   * right delimiter
   * @default '}'
  right?: string;

   * allowed attributes
   * @description An empty list means allowing all attribute
   * @default []
  allowed?: (string | RegExp)[];


Text with inline code and favicon, also supporting emphasis and bold.

  • list item

    • nested list item

A line with break

block content

Text with `inline code`{.inline-code} and ![favicon](/favicon.ico){.image}, also supporting _emphasis_{.emphasis} and **bold**{.bold}.

| Table   |
| ------- |
| content |


- list item{.list-item}

  - nested list item


A line with break  

--- {.horizontal}

block content {.block}