@mdit/plugin-attrs

用于向 Markdown 内容添加属性的插件。

使用

import MarkdownIt from "markdown-it";
import { attrs } from "@mdit/plugin-attrs";

const mdIt = MarkdownIt().use(attrs, {
  // 你的选项，可选
});

mdIt.render("# Heading 🎉{#heading}");

const MarkdownIt = require("markdown-it");
const { attrs } = require("@mdit/plugin-attrs");

const mdIt = MarkdownIt().use(attrs, {
  // 你的选项，可选
});

mdIt.render("# Heading 🎉{#heading}");

格式

你可以使用语法 {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>

转义

转义可以通过使用 \ 来转义标识符来完成:

### 标题 \{#heading}

会被渲染为

标题 {#heading}

高级

你可以向 @mdit-plugin-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;
```

表格
内容

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

{.table}

列表内容
- 嵌套列表内容

- 列表内容{.list-item}

  - 嵌套列表内容
    {.nested}

{.list-wrapper}

--- {.horizontal}

一行换行的文字

一行换行的文字  
{.break}