尖括号容器，是 Markdown 语法的一部分

把 <Callout>、<Tabs>、<Mermaid>这类标签解析成 mdast 节点，渲染成 React 组件，写回时逐字还原。作者写 Markdown，不用碰 JSX。

npm i @heikeson/md-engine

React 19+ · 原生 CSS，不依赖 Tailwind · MIT

article.md

<Callout type="tip" title="提示">
  容器里的内容照样是 Markdown，可以写 `行内码`、写列表。
</Callout>

<Tabs>
  <Tab value="npm">npm i @heikeson/md-engine</Tab>
  <Tab value="pnpm">pnpm add @heikeson/md-engine</Tab>
</Tabs>

渲染结果

提示

容器里的内容照样是 Markdown，可以写 行内码、写列表。

npm i @heikeson/md-engine

容器清单

九个容器加一个通用 div。属性只能传字符串和裸布尔，子项写成嵌套标签，所以内容始终保持纯文本。

标签属性子项说明

Callouttype · title · icon—提示块，type 有 7 种

Tabs—Tab选项卡，value 是标签文案

Steps—Step分步说明，title 是步骤名

Cards—Card卡片组，子项可自闭合

Accordion—AccItem折叠面板，type 控默认开合

Files—Folder / File文件树，图标按扩展名匹配

TypeTable—TypeItem属性表

Imagesrc · alt · align · width · caption · zoom—自闭合叶子

Mermaidtitle · height—容器体是原始文本

divclass · id—通用分块，属性透传到 DOM

包里有什么

五个入口分开打包。主入口不引编辑器，阅读页就不会带上 CodeMirror；不装 mermaid，产物里也没有图表代码。

dist5

index.js

components/index.js

editor/index.js

mermaid/index.js

styles.css

.解析、渲染、序列化、格式化阅读页

./editorMarkdownEditor，含 CodeMirror 与滚动同步后台写作

./components组件映射表，做单组件覆盖时取自定义

./mermaid交互式图表：缩放、源码切换、导出需要图表

./styles.css打包好的原生 CSS，引入一次就够必选

和 MDX 的差别

MDX 把内容编译成组件树，作者得会 JSX，内容存回去要经过一次格式化。这里把容器当普通节点处理，内容从头到尾都是文本。

MDX

page.tsx

import { Callout } from "@/ui";

export default function Page() {
  return (
    <Callout type="tip" title="提示">
      内容写成了组件树，保存时要过一遍编译。
    </Callout>
  );
}

这里

article.md

<Callout type="tip" title="提示">
  内容还是文本，存进数据库就是这段字符。
</Callout>

代价也说清楚：没有表达式、没有自定义逻辑，属性只认字符串。需要动态内容时，在 React 层覆盖组件，而不是在正文里写代码。

装上试试

npm i @heikeson/md-engine

三行代码能看到效果，写在快速开始里；想先改一段看看，直接用Playground。