--- title: Markdown description: Render Markdown content inside JSX contexts. image: https://developers.cloudflare.com/cf-twitter-card.png --- > Documentation Index > Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt > Use this file to discover all available pages before exploring further. [Skip to content](#%5Ftop) # Markdown The `Markdown` component is used `55` times on `31` pages. See all examples of pages that use Markdown Used **55** times. **Pages** * [/cloudflare-one/networks/connectors/cloudflare-wan/legal/3rdparty/](https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-wan/legal/3rdparty/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/networks/connectors/cloudflare-wan/legal/3rdparty.mdx) * [/cloudflare-wan/legal/3rdparty/](https://developers.cloudflare.com/cloudflare-wan/legal/3rdparty/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-wan/legal/3rdparty.mdx) * [/waf/managed-rules/reference/cloudflare-managed-ruleset/](https://developers.cloudflare.com/waf/managed-rules/reference/cloudflare-managed-ruleset/)\-[Source](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/waf/managed-rules/reference/cloudflare-managed-ruleset.mdx) **Partials** * [src/content/partials/client-side-security/alerts-intro.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/client-side-security/alerts-intro.mdx) * [src/content/partials/cloudflare-one/gateway/add-block-page.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/cloudflare-one/gateway/add-block-page.mdx) * [src/content/partials/cloudflare-one/gateway/client-notifications.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/cloudflare-one/gateway/client-notifications.mdx) * [src/content/partials/cloudflare-one/gateway/inspect-on-all-ports.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/cloudflare-one/gateway/inspect-on-all-ports.mdx) * [src/content/partials/cloudflare-one/gateway/logical-operators.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/cloudflare-one/gateway/logical-operators.mdx) * [src/content/partials/cloudflare-one/ssh/upload-ssh-key.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/cloudflare-one/ssh/upload-ssh-key.mdx) * [src/content/partials/cloudflare-one/tunnel/warp-to-tunnel-route-ips.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/cloudflare-one/tunnel/warp-to-tunnel-route-ips.mdx) * [src/content/partials/networking-services/account-id-api-key.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/account-id-api-key.mdx) * [src/content/partials/networking-services/analytics/overview.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/analytics/overview.mdx) * [src/content/partials/networking-services/analytics/site-analytics.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/analytics/site-analytics.mdx) * [src/content/partials/networking-services/mconn/configure-connectors.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/mconn/configure-connectors.mdx) * [src/content/partials/networking-services/mconn/network-options/app-aware-policies/breakout-prioritized.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/mconn/network-options/app-aware-policies/breakout-prioritized.mdx) * [src/content/partials/networking-services/mconn/network-options/dhcp/dhcp-relay.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/mconn/network-options/dhcp/dhcp-relay.mdx) * [src/content/partials/networking-services/mconn/vlan-tagging.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/mconn/vlan-tagging.mdx) * [src/content/partials/networking-services/routing/bgp-config-steps.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/routing/bgp-config-steps.mdx) * [src/content/partials/networking-services/routing/cloudflare-wan-allowed-ip-ranges.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/routing/cloudflare-wan-allowed-ip-ranges.mdx) * [src/content/partials/networking-services/routing/configure-routes.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/routing/configure-routes.mdx) * [src/content/partials/networking-services/routing/configure-tunnels.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/routing/configure-tunnels.mdx) * [src/content/partials/networking-services/troubleshoot-routing-bgp.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/troubleshoot-routing-bgp.mdx) * [src/content/partials/networking-services/tunnel-health/troubleshoot-tunnel-health.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/tunnel-health/troubleshoot-tunnel-health.mdx) * [src/content/partials/networking-services/virtual-networks-concept.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/virtual-networks-concept.mdx) * [src/content/partials/ruleset-engine/custom-ruleset-zone-limitation.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/ruleset-engine/custom-ruleset-zone-limitation.mdx) * [src/content/partials/ssl/aop-configure-origin.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/ssl/aop-configure-origin.mdx) * [src/content/partials/waf/api-generic-create-rule-procedure.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/waf/api-generic-create-rule-procedure.mdx) * [src/content/partials/waf/rulesets/api-account/step2-create-rule.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/waf/rulesets/api-account/step2-create-rule.mdx) * [src/content/partials/waf/rulesets/api-account/step3-create-ruleset.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/waf/rulesets/api-account/step3-create-ruleset.mdx) * [src/content/partials/waf/rulesets/api-zone/step2-create-rule.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/waf/rulesets/api-zone/step2-create-rule.mdx) * [src/content/partials/waf/rulesets/api-zone/step3-create-ruleset.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/waf/rulesets/api-zone/step3-create-ruleset.mdx) This component uses [marked ↗](https://marked.js.org/) to render [CommonMark and various other Markdown flavours ↗](https://marked.js.org/#specifications). Warning This component can not use [MDX ↗](https://mdxjs.com/) or [Astro ↗](https://docs.astro.build/en/guides/markdown-content/) features, such as [optimised images in the assets directory ↗](https://docs.astro.build/en/guides/images/#images-in-mdx-files). 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](https://developers.cloudflare.com/style-guide/components/markdown/) ``` import { Markdown } from "~/components"; ``` ## 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: ``` ``` 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 ↗](https://www.npmjs.com/package/dedent) library to remove indentation from multi-line strings. This is because the [CommonMark spec ↗](https://spec.commonmark.org/0.22/#indented-code-blocks) treats indented text as code blocks, unlike [MDX ↗](https://mdxjs.com/docs/what-is-mdx/#:~:text=Indented%20code%20does%20not%20work%20in%20MDX%3A). 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. ``` import { Markdown } from "~/components"; <> ``` ```json {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/style-guide/","name":"Style Guide"}},{"@type":"ListItem","position":3,"item":{"@id":"/style-guide/components/","name":"Components"}},{"@type":"ListItem","position":4,"item":{"@id":"/style-guide/components/markdown/","name":"Markdown"}}]} ```