[Docs Site] Use dedent in Markdown component #20129
Conversation
KianNH
requested review from
a team,
GregBrimble,
WalshyDev,
dcpena,
haleycode,
kodster28,
kristianfreeman,
marciocloudflare,
maxvp and
pedrosousa
as code owners
github-actions
bot
assigned
GregBrimble,
haleycode,
kodster28,
kristianfreeman,
marciocloudflare,
maxvp,
pedrosousa,
WalshyDev and
dcpena
|
Howdy and thanks for contributing to our repo. We review internal PRs with 1 week. If it's something urgent or has been sitting without a comment, start a thread in the Developer Docs space internally. |
|
|
||
| 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). |
There was a problem hiding this comment.
| 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). | |
| 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). If you want to author a code block, use a [\`\`\` triple backtick code fence](https://spec.commonmark.org/0.12/#fenced-code-blocks). |
There was a problem hiding this comment.
I feel like we'd want to avoid these, but I also don't have a good way of providing an alternative.
Code blocks from marked will just be <pre> with no styling like highlighting, no copy to clipboard, etc - but you can't just use the Code component in normal Markdown either.
There was a problem hiding this comment.
I've been just using the Code component outside the Markdown component for code blocks, and selecting the appropriate language. There are a lot of things that are fiddly inside JSX, and best dealt with the components we have for it (like AnchorHeading and Code, for example).
|
Preview URL: https://3c613472.preview.developers.cloudflare.com Files with changes (up to 15)
|
10 participants
Summary
Use dedent in Markdown component
Screenshots (optional)
Before:
After:
