如何在 JSX 中保留 Markdown 空格？

Question

我需要完全保留 TSX (TypeScript JSX) 元素内的格式。我不使用 React，它稍后使用自定义 JSX Element 实现进行渲染。

<markdown>
  Line 1
  Line 2

  Line 3

  - a
  - b
</markdown>

但是，它不会工作，TypeScript 编译器

bun run play.jsx

和

tsc

都会去除空格并将其转换为：

<markdown>Line 1 Line 2 Line 3 - a - b</markdown>

据了解，没有标准方法可以做到这一点。有什么技巧可以让它与

bun

或

tsc

（TypeScript 编译器）一起工作吗？

Answer 1

由于 JSX 意味着 JavaScript XML，我本以为它会支持

<![CDATA[ ... ]]>

表示法来保留空格，但不幸的是它不支持。我只尝试过 TypeScript，也许其他 JSX 转译器支持它。

但是您可以通过将 markdown 包装到模板字符串中来实现类似的效果：

<markdown>{`
  Line 1
  Line 2

  Line 3

  - a
  - b
`}</markdown>