渲染markdown文本，支持components.
npm i --save @kne/markdown-components-render本项目是一个用于渲染 Markdown 内容的组件库，支持通过自定义组件和变量替换来增强 Markdown 的渲染能力。
- Markdown 渲染：支持标准的 Markdown 语法渲染。
- 自定义组件：允许通过
components属性定义自定义组件类型。 - 变量替换：支持通过
variables属性实现动态变量替换。 - HTML 转换：提供
htmlTransform函数用于转换渲染后的 HTML 内容。 - 自定义渲染逻辑：支持通过
customRender函数覆盖默认的渲染逻辑。
- 动态生成文档内容。
- 支持变量替换的动态页面渲染。
- 自定义 Markdown 渲染逻辑的场景。
如下的yml会被渲染为Card组件
\`\`\`yml
md-components:
type: Card
props:
title: 我是标题
size: small
children: 我是内容
\`\`\`
如果需要传入参数，可以$开头
\`\`\`yml
md-components:
type: Button
props:
type: primary
children: 我是一个按钮
onClick: $onClick
\`\`\`
支持行内组件:
我是一个行内组件\`md-components:Button{"type":"link","onClick":"$onClick","children":"我是一个行内按钮"}\`- 基础使用
- 展示 MarkdownComponentsRender 组件的基本用法，包括如何传入 components 和 variables
- _MarkdownComponentsRender(@kne/current-lib_markdown-components-render)[import * as _MarkdownComponentsRender from "@kne/markdown-components-render"],antd(antd),_ReactFetch(@kne/react-fetch),md(./doc/example.md),(@kne/current-lib_markdown-components-render/dist/index.css)
const { default: MarkdownComponentsRender } = _MarkdownComponentsRender;
const { default: mdUrl } = md;
const { default: Fetch } = _ReactFetch;
const { Card, Button, App, Flex } = antd;
const BaseExample = () => {
const { message } = App.useApp();
return (
<Fetch
url={mdUrl}
ignoreSuccessState
render={({ data }) => {
return (
<Flex vertical gap={10}>
<MarkdownComponentsRender
components={{ Card, Button }}
variables={{
onClick: () => {
message.info('你好');
}
}}>
{data}
</MarkdownComponentsRender>
</Flex>
);
}}></Fetch>
);
};
render(<BaseExample />);- 卡片组件
- 展示如何在 Markdown 中使用 Card 组件
- _MarkdownComponentsRender(@kne/current-lib_markdown-components-render)[import * as _MarkdownComponentsRender from "@kne/current-lib_markdown-components-render"],antd(antd),_ReactFetch(@kne/react-fetch),md(./doc/card-example.md),(@kne/current-lib_markdown-components-render/dist/index.css)
const { default: MarkdownComponentsRender } = _MarkdownComponentsRender;
const { default: mdUrl } = md;
const { default: Fetch } = _ReactFetch;
const { Card, App, Flex } = antd;
const CardExample = () => {
const { message } = App.useApp();
return (
<Fetch
url={mdUrl}
ignoreSuccessState
render={({ data }) => {
return (
<Flex vertical gap={10}>
<MarkdownComponentsRender
components={{ Card, Flex }}
variables={{
onClick: () => {
message.info('卡片被点击');
}
}}>
{data}
</MarkdownComponentsRender>
</Flex>
);
}}></Fetch>
);
};
render(<CardExample />);- 按钮组件
- 展示如何在 Markdown 中使用各种类型的 Button 组件
- _MarkdownComponentsRender(@kne/current-lib_markdown-components-render)[import * as _MarkdownComponentsRender from "@kne/current-lib_markdown-components-render"],antd(antd),_ReactFetch(@kne/react-fetch),md(./doc/button-example.md),(@kne/current-lib_markdown-components-render/dist/index.css)
const { default: MarkdownComponentsRender } = _MarkdownComponentsRender;
const { default: mdUrl } = md;
const { default: Fetch } = _ReactFetch;
const { Button, App, Flex } = antd;
const ButtonExample = () => {
const { message } = App.useApp();
return (
<Fetch
url={mdUrl}
ignoreSuccessState
render={({ data }) => {
return (
<Flex vertical gap={10}>
<MarkdownComponentsRender
components={{ Button, Flex }}
variables={{
handlePrimaryClick: () => {
message.success('主要按钮被点击');
},
handleLinkClick: () => {
message.info('链接按钮被点击');
},
handleDangerClick: () => {
message.error('危险操作被触发');
}
}}>
{data}
</MarkdownComponentsRender>
</Flex>
);
}}></Fetch>
);
};
render(<ButtonExample />);- 行内组件
- 展示如何在 Markdown 文本中使用行内组件语法
- _MarkdownComponentsRender(@kne/current-lib_markdown-components-render)[import * as _MarkdownComponentsRender from "@kne/current-lib_markdown-components-render"],antd(antd),_ReactFetch(@kne/react-fetch),md(./doc/inline-example.md),(@kne/current-lib_markdown-components-render/dist/index.css)
const { default: MarkdownComponentsRender } = _MarkdownComponentsRender;
const { default: mdUrl } = md;
const { default: Fetch } = _ReactFetch;
const { Button, App, Flex } = antd;
const InlineExample = () => {
const { message } = App.useApp();
return (
<Fetch
url={mdUrl}
ignoreSuccessState
render={({ data }) => {
return (
<Flex vertical gap={10}>
<MarkdownComponentsRender
components={{ Button }}
variables={{
handleShowMessage: () => {
message.info('这是一个行内按钮触发的事件');
}
}}>
{data}
</MarkdownComponentsRender>
</Flex>
);
}}></Fetch>
);
};
render(<InlineExample />);- 综合示例
- 展示如何在一个 Markdown 文档中混合使用多种组件
- _MarkdownComponentsRender(@kne/current-lib_markdown-components-render)[import * as _MarkdownComponentsRender from "@kne/current-lib_markdown-components-render"],antd(antd),_ReactFetch(@kne/react-fetch),md(./doc/mixed-example.md),(@kne/current-lib_markdown-components-render/dist/index.css)
const { default: MarkdownComponentsRender } = _MarkdownComponentsRender;
const { default: mdUrl } = md;
const { default: Fetch } = _ReactFetch;
const { Button, Card, App, Flex } = antd;
const MixedExample = () => {
const { message } = App.useApp();
return (
<Fetch
url={mdUrl}
ignoreSuccessState
render={({ data }) => {
return (
<Flex vertical gap={10}>
<MarkdownComponentsRender
components={{ Button, Card, Flex }}
variables={{
handleStart: () => {
message.success('开始使用！');
},
handleLearnMore: () => {
message.info('了解更多信息');
},
handleQuickAction: () => {
message.success('快捷操作执行成功');
},
handleMoreInfo: () => {
message.info('正在打开文档...');
}
}}>
{data}
</MarkdownComponentsRender>
</Flex>
);
}}></Fetch>
);
};
render(<MixedExample />);| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | markdown内容 | string | - |
| components | 用于渲染的组件类型对象，和yml里面的type对应 | object | - |
| variables | 变量对象，如果被渲染组件属性的值中有$开头的变量，则去该变量中查找，如果可以查找到，引用该值 | object | - |
| options | markdown-it的配置参数 | object | - |
| options.config | markdown-it初始化构造函数参数 | object | - |
| options.plugins | markdown-it对象.use 应用的值 | array | [] |
| htmlTransform | 用于转换渲染后的HTML内容的函数 | function | - |
| customRender | 自定义渲染函数，用于覆盖默认的渲染逻辑 | function | - |