属性支持
大约 1 分钟
你可以使用特殊标记为 Markdown 元素添加属性。
使用
你可以使用语法 {attrs}
来为 Markdown 元素添加属性。
比如,如果你想要一个 id 为 say-hello-world,文字为 Hello World 的二级标题,你可以使用:
## Hello World {#say-hello-world}
如果你想要一个有 full-width Class 的图片,你可以使用:
 {.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>
高级
你可以向 plugins.mdEnhance.attrs
传递选项以自定义插件行为。
interface AttrsOptions {
/**
* 左分隔符
*
* @default '{'
*/
left?: string;
/**
* 右分隔符
*
* @default '}'
*/
right?: string;
/**
* 允许的属性
*
* @description 设置空数组意味着允许所有属性
*
* @default []
*/
allowed?: (string | RegExp)[];
}
案例
包含 行内代码
和 的文字,也支持 强调 和 加粗。
表格 |
---|
内容 |
列表内容
- 嵌套列表内容
一行换行的文字
块级元素
包含 `行内代码`{.inline-code} 和 {.image} 的文字,也支持 _强调_{.emphasis} 和 **加粗**{.bold}。
| 表格 |
| ---- |
| 内容 |
{.table}
- list item{.list-item}
- nested list item
{.nested}
{.list}
一行换行的文字
{.break}
--- {.horizontal}
块级元素 {.block}