该组件使用 marked ↗ 来渲染 CommonMark 和其他各种 Markdown 变体 ↗。
import { Markdown } from "~/components";
<Markdown text="**foo** <br/> [bar](/style-guide/components/markdown/)" />如果您有一个变量需要以任何特殊方式进行格式化(例如,它需要是一个 URL、一个无序列表或其他内容),您可以在部分(partial)文件中使用 markdown 组件包装该变量。例如:
<Markdown text={props.foo} />请注意,您需要将变量包装在大括号 { 和 } 中,并使用 text=,否则将无法工作。
Markdown 组件使用 dedent ↗ 库来删除多行字符串中的缩进。
这是因为与 MDX ↗ 不同,CommonMark 规范 ↗将缩进的文本视为代码块。
import { Markdown } from "~/components";
<>
<Markdown
text={`
You need to purchase [Cloudflare WAN](https://www.cloudflare.com/magic-wan/) before you can purchase and use the Cloudflare One Appliance. The Cloudflare One Appliance can function as your primary edge device for your network, or be deployed in-line with existing network gear.
You also need to purchase a Cloudflare One Appliance before you can start configuring your settings in the Cloudflare dashboard. After buying a Cloudflare One Appliance, the device will be registered with your Cloudflare account and show up in your Cloudflare dashboard.
Contact your account representative to learn more about purchasing options for the Cloudflare One Appliance device.
`}
inline={false}
/>
</>