如何在Stream Chat SDK中渲染Markdown下划线文本？

Stream Chat默认的Markdown解析器未内置下划线格式支持，你可以通过自定义解析规则实现该功能，以下是具体方案：

• 基于Stream内置的simple-markdown扩展规则
  Stream内部使用simple-markdown处理Markdown，你可以复制默认规则并添加下划线匹配逻辑：

  import { defaultMarkdownRules, SimpleMarkdown } from 'stream-chat-react';
  
  // 扩展默认规则，添加下划线解析
  const customMarkdownRules = {
    ...defaultMarkdownRules,
    underline: {
      order: defaultMarkdownRules.strong.order - 1,
      match: SimpleMarkdown.inlineRegex(/^__(.+?)__(?!_)/),
      parse: (capture) => ({ content: SimpleMarkdown.parseInline(capture[1]) }),
      react: (node, output) => <u>{output(node.content)}</u>
    }
  };
  
  // 创建自定义解析器
  const customMarkdownParser = (text) => {
    return SimpleMarkdown.parse(text, { rules: customMarkdownRules });
  };
  

• 应用自定义解析器
  你可以在全局Chat组件或单个Message组件中指定该解析器：

  // 全局配置
  <Chat client={chatClient} markdownParser={customMarkdownParser}>
    {/* 频道与消息组件 */}
  </Chat>
  
  // 单个消息组件配置
  <Message
    markdownParser={customMarkdownParser}
    // 其他属性
  />
  

• 第三方Markdown库替代方案（如marked）
  若不想依赖Stream内部解析逻辑，可使用marked等库自定义下划线支持，注意需开启unsafeHTML并做好XSS防护：

  import marked from 'marked';
  
  // 配置marked支持下划线
  marked.setOptions({
    extensions: [
      {
        name: 'underline',
        level: 'inline',
        start: (src) => src.match(/^__/)?.index,
        tokenizer: (src) => {
          const match = src.match(/^__(.+?)__(?!_)/);
          if (match) {
            return { type: 'underline', raw: match[0], text: match[1] };
          }
        },
        renderer: (token) => `<u>${this.parser.parseInline(token.text)}</u>`
      }
    ]
  });
  
  const customMarkdownParser = (text) => marked.parse(text);
  

  使用时需在Message组件添加unsafeHTML={true}属性，仅在消息内容可信场景下使用，避免XSS风险。

内容的提问来源于stack exchange，提问作者Devin Mason