Markdown

This component uses marked ↗ to render CommonMark and various other Markdown flavours ↗.

Warning

This component can not use MDX ↗ or Astro ↗ features, such as optimised images in the assets directory ↗.

Headings should not be used with this component, as they will not receive an id, copyable link or appear in the table of contents.

Code blocks should not be used with this component, as they will not receive syntax highlighting or a copy to clipboard button.

foo
bar

import { Markdown } from "~/components";

<Markdown text="**foo** <br/> [bar](/style-guide/components/markdown/)" />

Example for variables in partials

If you have a variable that needs to be formatted in any special way (for example, it needs to be a URL, an unordered list, or something else), you can wrap the variable with the markdown component in your partial file. For example:

<Markdown text={props.foo} />

Note that you need to wrap your variable in curly braces, as well as use text= or this will not work.

Multi-line strings

The Markdown component uses the dedent ↗ library to remove indentation from multi-line strings.

This is because the CommonMark spec ↗ treats indented text as code blocks, unlike MDX ↗.

You need to purchase Magic WAN before you can purchase and use the Magic WAN Connector. The Magic WAN Connector 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 Magic WAN Connector before you can start configuring your settings in the Cloudflare dashboard. After buying a Magic WAN Connector, 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 Magic WAN Connector device.

import { Markdown } from "~/components";

<>
  <Markdown
    text={`
    You need to purchase [Magic WAN](https://www.cloudflare.com/magic-wan/) before you can purchase and use the Magic WAN Connector. The Magic WAN Connector 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 Magic WAN Connector before you can start configuring your settings in the Cloudflare dashboard. After buying a Magic WAN Connector, 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 Magic WAN Connector device.
    `}
    inline={false}
  />
</>