是否支持自定义的xml标签渲染，需要额外写插件吗

[letterletter]

例如是否支持自定义的一些xml标签渲染，需要额外写markdown插件吗 工具调用 <xxx-readyid="xxx" data="mmm">准备完成

[Div627]

例如是否支持自定义的一些xml标签渲染，需要额外写markdown插件吗 工具调用 <xxx-readyid="xxx" data="mmm">准备完成

是使用 x-markdown 吗？

[kimteayon]

您好请补齐一下您的提问上下文

[dosubot[bot]]

Hi @letterletter! I'm Dosu and I’m helping the x team.

ant-design/x 的 XMarkdown 组件原生支持自定义 XML 标签渲染，无需额外编写 Markdown 插件。你只需要通过 components 属性，把自定义标签名（如 <xxx-tool>、<xxx-ready> 等）映射为对应的 React 组件即可，所有自定义标签和属性都会被保留并传递给你的组件，支持流式渲染和属性透传，示例代码如下：

import { XMarkdown } from '@ant-design/x-markdown';

const XxxTool = ({ id, children }) => (
  <div style={{ color: 'blue' }}>工具调用：{id} {children}</div>
);

const XxxReady = ({ readyid, data, children }) => (
  <div style={{ color: 'green' }}>准备完成：{readyid} {data} {children}</div>
);

<XMarkdown
  content={`
<xxx-tool id="xxx">工具调用</xxx-tool>
<xxx-ready readyid="xxx" data="mmm">准备完成</xxx-ready>
`}
  components={{
    'xxx-tool': XxxTool,
    'xxx-ready': XxxReady,
  }}
/>

如果你用的是 markdown-it 或其他 Markdown 渲染器，默认会忽略自定义标签，这种情况下需要写插件或预处理逻辑来支持相关说明。但用 XMarkdown 直接映射即可，无需额外插件，支持所有自定义标签和属性，详见官方文档。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[letterletter]

例如是否支持自定义的一些xml标签渲染，需要额外写markdown插件吗 工具调用 <xxx-readyid="xxx" data="mmm">准备完成

是使用 x-markdown 吗？

之前使用react-markdown，想看下使用这个xMarkdown的成本

[letterletter]

您好请补齐一下您的提问上下文

对于这样的字符串，markdown渲染时

const str = `
<xxx-tool id="fff" name="xxx" title="获取API" status="error">
</xxx-tool>
<xxx-ready data="xxx">
上下文准备完成
</xxx-ready>`

渲染代码如下

const Demo: React.FC<{content?: string}> = ({ content}) => {
  const [className] = useMarkdownTheme();

  return <XMarkdown
      content={content}
      className={className}
      components={{
        'xxx-tool': (prop) => {
          console.log('工具调用x-md', prop)
          return <div>调用</div>
        },
        'xxx-ready':(prop) => {
          console.log('ready ===',prop)
          return <div></div>
        } ,
      }}
    />;
};


export default Demo;

出现xml标签上的id, name, title 属性都能提取出来，但是status，data这样的自己加到xml上的属性，提取不出来；这块要怎么解决呢

[letterletter]

例如是否支持自定义的一些xml标签渲染，需要额外写markdown插件吗 工具调用 <xxx-readyid="xxx" data="mmm">准备完成

是使用 x-markdown 吗？ 是这个，用的@ant-design/x-markdown

[Div627]

您好请补齐一下您的提问上下文

对于这样的字符串，markdown渲染时

const str = `
<xxx-tool id="fff" name="xxx" title="获取API" status="error">
</xxx-tool>
<xxx-ready data="xxx">
上下文准备完成
</xxx-ready>`

渲染代码如下

const Demo: React.FC<{content?: string}> = ({ content}) => {
  const [className] = useMarkdownTheme();

  return <XMarkdown
      content={content}
      className={className}
      components={{
        'xxx-tool': (prop) => {
          console.log('工具调用x-md', prop)
          return <div>调用</div>
        },
        'xxx-ready':(prop) => {
          console.log('ready ===',prop)
          return <div></div>
        } ,
      }}
    />;
};


export default Demo;

出现xml标签上的id, name, title 属性都能提取出来，但是status，data这样的自己加到xml上的属性，提取不出来；这块要怎么解决呢

x-markdown 默认内置 DOMPurify，会自动过滤所有非白名单属性，导致自定义的 status、data 等属性在渲染时被过滤。 你可以尝试（任选其一）：

1. 通过配置 x-markdown dompurifyConfig 属性指定不被过滤的属性。
2. 将属性修改为 data-x 的方式，确保安全性。