[Docs Site] WranglerCommand improvements (#24834)

Author: KianNH

src/components/WranglerCommand.astro

@@ -5,6 +5,7 @@ import AnchorHeading from "./AnchorHeading.astro";
 import { PackageManagers } from "starlight-package-managers";
 import WranglerArg from "./WranglerArg.astro";
 import Details from "./Details.astro";
+import { marked } from "marked";
 
 function getCommand(path: string) {
 	const segments = path.trim().split(/\s+/);
@@ -37,6 +38,8 @@ let { command, headingLevel, description } = props.parse(Astro.props);
 
 const definition = getCommand(command);
 
+description ??= definition.metadata.description;
+
 if (!definition.args) {
 	throw new Error(`[WranglerCommand] "${command}" has no arguments`);
 }
@@ -48,9 +51,9 @@ const positionals = definition.positionalArgs
 	.join(" ");
 ---
 
-<AnchorHeading depth={headingLevel} title={command} />
+<AnchorHeading depth={headingLevel} title={`\`${command}\``} />
 
-<p>{description ? description : definition.metadata.description}</p>
+<Fragment set:html={marked.parse(description)} />
 
 <PackageManagers
 	pkg="wrangler"

src/content/docs/style-guide/components/wrangler-command.mdx

@@ -21,7 +21,10 @@ import { WranglerCommand } from "~/components";
 ```mdx live
 import { WranglerCommand } from "~/components";
 
-<WranglerCommand command="deploy" />
+<WranglerCommand
+	command="deploy"
+	description={"Deploy a [Worker](/workers/)"}
+/>
 
 <WranglerCommand command="d1 execute" />
 ```
@@ -33,4 +36,4 @@ import { WranglerCommand } from "~/components";
 - `headingLevel` <Type text="boolean" /> <MetaInfo text="(default: 2) optional" />
   - The heading level that the command name should be added at on the page, i.e `2` for a `h2`.
 - `description` <Type text="string" /> <MetaInfo text="optional" />
-	- A description to render below the command heading. If not set, defaults to the value specified in the Wrangler help API.
+  - A description to render below the command heading. If not set, defaults to the value specified in the Wrangler help API.