属性支持

大约 1 分钟

你可以使用特殊标记为 Markdown 元素添加属性。

配置

import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    markdown: {
      attrs: true,
    },
  }),
});

使用

你可以使用语法 {attrs} 来为 Markdown 元素添加属性。

比如，如果你想要一个 id 为 say-hello-world，文字为 Hello World 的二级标题，你可以使用:

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

如果你想要一个有 full-width Class 的图片，你可以使用:

![img](link/to/image.png) {.full-width}

同时也支持其他属性:

一个包含文字的段落。 {#p .a .b align=center customize-attr="content with spaces"}

会被渲染为:

<p id="p" class="a b" align="center" customize-attr="content with spaces">
  一个包含文字的段落。
</p>

高级

你可以向 attrs 传递选项以自定义插件行为。

type MarkdownItAttrRuleName =
  | "fence"
  | "inline"
  | "table"
  | "list"
  | "hr"
  | "softbreak"
  | "block";

interface MarkdownItAttrsOptions {
  /**
   * 左分隔符
   *
   * @default '{'
   */
  left?: string;

  /**
   * 右分隔符
   *
   * @default '}'
   */
  right?: string;

  /**
   * 允许的属性
   *
   * @description 设置空数组意味着允许所有属性
   *
   * @default []
   */
  allowed?: (string | RegExp)[];

  /**
   * 启用的规则
   *
   * @default "all"
   */
  rule?: "all" | boolean | MarkdownItAttrRuleName[];
}

示例

所有的 class 都使用 margin:4px;padding:4px;border: 1px solid red; 进行显示以展示效果。

包含 行内代码 和的文字，也支持强调和加粗。

包含 `行内代码`{.inline-code} 和 ![favicon](/favicon.ico){.image} 的文字，也支持 _强调_{.inline-emphasis} 和 **加粗**{.inline-bold}。

块级元素

块级元素 {.block}

const a = 1;

```js {.fence}
const a = 1;
```

表格
内容

| 表格 |
| ---- |
| 内容 |

{.md-table}

列表内容
- 嵌套列表内容

- 列表内容{.list-item}

  - 嵌套列表内容
    {.nested}

{.list-wrapper}

--- {.horizontal}

一行换行的文字

一行换行的文字  
{.break}