Markdown

The Markdown component is used 50 times on 30 pages.

See all examples of pages that use Markdown

Used 50 times.

Pages

Partials

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

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 Cloudflare 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.

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}
  />
</>