Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #8625, closes #7922, closes #7934
This adds first-class support for MDX, built into the JS transformer like JSX and TS. It's implemented in Rust using mdx-rs, which produces an SWC AST that we process directly without re-parsing.
It comes with support for a bunch of features that integrate it deeply with Parcel:
asset.meta.ssgMeta
, which exposed by the React SSG packager and can be used by layouts.CodeBlock
component, which can be customized.render
option in code block meta strings is used, the code is extracted into an asset and at runtime passed into theCodeBlock
component, allowing for live examples.For example:
would render
and then
CodeBlock
can decide what to do with each part. The defaultCodeBlock
implementation renders a<pre><code>
with the code, followed by therender
value, but this can be customized by injecting your ownCodeBlock
component. You can also use a custom<CodeBlock>
to implement things like syntax highlighting.CSS code blocks can also be "rendered", which will inject the CSS into the corresponding CSS bundle for the page.
This is not a breaking change because
@parcel/transformer-mdx
will continue to be used if it is already installed. If it can't be resolved, the JS transformer will handle it.