如何在JSX/TSX中保留Markdown的空格格式？

适配Bun的方法 #

• 直接用模板字符串包裹内容，通过{}嵌入JSX元素：

  <markdown>{`
    Line 1
    Line 2
  
    Line 3
  
    - a
    - b
  `}</markdown>
  

  Bun会完整保留模板字符串里的换行、空格和列表格式。如果不想保留模板字符串开头的缩进，可调用trimStart()处理：

  <markdown>{`
    Line 1
    Line 2
  
    Line 3
  
    - a
    - b
  `.trimStart()}</markdown>
  

适配TSC的方法 #

工具函数标记法 #

定义一个简单的工具函数，用来包裹需要保留格式的文本，TSC编译时不会修改函数传入的字符串内容：

function preserveFormat(text: string) {
  return text;
}

<markdown>{preserveFormat(`
  Line 1
  Line 2

  Line 3

  - a
  - b
`)}</markdown>

传递props替代子节点 #

如果你的自定义JSX渲染器支持，可以把原始文本作为content属性传递，绕过TSX对文本子节点的格式压缩：

<markdown content={`
  Line 1
  Line 2

  Line 3

  - a
  - b
`} />

之后在自定义markdown元素的渲染逻辑里，直接读取content属性输出即可。

通用应急方案（不推荐） #

用多行注释存储文本，再通过正则提取内容，适合临时场景（注意注释内不能出现*/）：

<markdown>{(() => {
  const comment = /*
    Line 1
    Line 2

    Line 3

    - a
    - b
  */ '';
  return comment.match(/\/\*([\s\S]*?)\*\//)?.[1] || '';
})()}</markdown>

内容的提问来源于stack exchange，提问作者Alex Craft