@mdit/plugin-uml

支持从上下文中拆分内容的插件。

使用

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

const mdIt = new MarkdownIt().use(uml, {
  name: "demo",
  open: "demostart",
  close: "demoend",
  renderer: (tokens, index) => {
    // render content here
  },
});

mdIt.render(`\
@demostart
Content
Another content
@demoend
`);

该插件会将 @openmarker 和 @closemarker 之间的内容提取到单个 Token 中，然后使用 renderer 函数对其进行渲染。

提示

该插件与容器插件不同，容器内的内容将被解析为 markdown，而 uml 内的内容将被解析为纯文本并转换为单个 Token。

转义

• 你可以使用 \ 来转义 @，因此以下内容不会被解析：

  \@demostart
  
  \@demoend

安全

title 属性始终会被转义。遵循 markdown-it 的 html 选项语义，默认渲染器仅在 html: false（默认值）时转义提取出的内容，因此 UML 块中由作者提供的 HTML 会作为纯文本渲染。当 html: true 时，内容会按原始 HTML 保留：该模式下作者 HTML 被信任，请在展示渲染结果前自行 sanitize（markdown-it 不会替你处理）。若需要完全控制，请传入自定义 renderer。

选项

这四个选项在 TypeScript 类型中均为必填。

name必填string

UML 名称。运行时默认为 "uml"。

open必填string

开始标记。运行时默认为 "start"。

close必填string

结束标记。运行时默认为 "end"。

renderer必填RendererRule

/**
 * @param tokens - List of tokens.
 * @param index - Current token index.
 * @param options - Markdown-it options.
 * @param env - Markdown-it environment.
 * @param self - Markdown-it renderer instance.
 *
 * @returns Rendered HTML string.
 */
type RendererRule = (
  tokens: Token[],
  index: number,
  options: Required<MarkdownItOptions>,
  env: Env | undefined,
  self: Renderer,
) => string;

渲染函数。运行时默认使用内置渲染器，将内容包裹在 class 为 UML 名称、title 为转义后 info 字符串的 <div> 中。

---

与上游参考实现的完整对比见对比报告。