From 53507bf060de4d6dda599364e6e367675451fba1 Mon Sep 17 00:00:00 2001 From: South Drifted Date: Sun, 11 Feb 2024 21:03:15 +0800 Subject: [PATCH 1/2] docs: add MDX 3 community plugin --- src/languages/mdx.md | 35 +++++++++++++++++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/src/languages/mdx.md b/src/languages/mdx.md index a6968740b..33661a263 100644 --- a/src/languages/mdx.md +++ b/src/languages/mdx.md @@ -7,9 +7,11 @@ eleventyNavigation: order: 16 --- -[MDX](https://mdxjs.com) is a variant of [Markdown](https://daringfireball.net/projects/markdown/) that compiles to JSX, and supports embedding interactive components inside Markdown documents. Parcel supports MDX automatically using the `@parcel/transformer-mdx` plugin. When a `.mdx` file is detected, it will be installed into your project automatically. +[MDX](https://mdxjs.com) is a variant of [Markdown](https://daringfireball.net/projects/markdown/) that compiles to JSX, and supports embedding interactive components inside Markdown documents. -## Example usage +## MDX v1 usage + +Parcel supports MDX v1 automatically using the `@parcel/transformer-mdx` plugin. When a `.mdx` file is detected, it will be installed into your project automatically. First, install `@mdx-js/react`. This is needed to render MDX files as React components. @@ -41,3 +43,32 @@ This is a pretty cool MDX file. {% endsamplefile %} {% endsample %} + +## MDX v3 usage + +If you're using MDX v3, community plugin [`parcel-transformer-mdx`][1] is recommended, Babel & TypeScript configuration can be loaded automatically. + +### Installation + +```shell +npm i @parcel/config-default parcel-transformer-mdx -D +``` + +### Configuration + +{% sample %} +{% samplefile ".parcelrc" %} + +```json +{ + "extends": "@parcel/config-default", + "transformers": { + "*.{md,mdx}": ["parcel-transformer-mdx"] + } +} +``` + +{% endsamplefile %} +{% endsample %} + +[1]: https://img.shields.io/librariesio/github/EasyWebApp/Parcel-transformer-MDX.svg From 42004d302ae68b05cb83813b686c8f82f326969c Mon Sep 17 00:00:00 2001 From: South Drifted Date: Wed, 26 Jun 2024 17:58:30 +0000 Subject: [PATCH 2/2] fix: apply review's suggestion --- src/languages/mdx.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/languages/mdx.md b/src/languages/mdx.md index 33661a263..3dd7fd337 100644 --- a/src/languages/mdx.md +++ b/src/languages/mdx.md @@ -25,7 +25,7 @@ Then, you can import a `.mdx` file into your JavaScript and render it using Reac {% samplefile "app.js" %} ```js -import Hello from './hello.mdx'; +import Hello from "./hello.mdx"; export function App() { return ; @@ -46,7 +46,7 @@ This is a pretty cool MDX file. ## MDX v3 usage -If you're using MDX v3, community plugin [`parcel-transformer-mdx`][1] is recommended, Babel & TypeScript configuration can be loaded automatically. +If you're using MDX v3, you can use the community plugin [`parcel-transformer-mdx`](https://www.npmjs.com/package/parcel-transformer-mdx). ### Installation @@ -61,10 +61,10 @@ npm i @parcel/config-default parcel-transformer-mdx -D ```json { - "extends": "@parcel/config-default", - "transformers": { - "*.{md,mdx}": ["parcel-transformer-mdx"] - } + "extends": "@parcel/config-default", + "transformers": { + "*.{md,mdx}": ["parcel-transformer-mdx"] + } } ```