[Docs Site] Use dedent in Markdown component

Author: KianNH

src/components/Markdown.astro

@@ -1,11 +1,12 @@
 ---
 import { z } from "astro:schema";
 import { marked } from "marked";
+import dedent from "dedent";
 
 type Props = z.infer<typeof props>;
 
 const props = z.object({
-	text: z.string(),
+	text: z.string().transform((val) => dedent(val)),
 	inline: z.boolean().default(true),
 });
 

src/content/docs/style-guide/components/markdown.mdx

@@ -18,4 +18,27 @@ If you have a variable that needs to be formatted in any special way (for exampl
 <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.
+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).
+
+```mdx live
+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}
+  />
+</>
+```