MDX

MDX は Markdown のバリアントであり、JSXにコンパイルし、Markdown文書内へのインタラクティブコンポーネントの埋め込みをサポートします。Parcelは、@parcel/transformer-mdxプラグインを使用してMDXを自動的にサポートします。.mdxファイルが検出されると、プロジェクトに自動的にインストールされます。

利用例

まず、@mdx-js/reactをインストールします。これはMDXファイルをReactコンポーネントとしてレンダリングするために必要です。

yarn add @mdx-js/react@^1

次に、.mdxファイルをJavaScriptにインポートして、Reactを使用してレンダリングできます。

app.js

import Hello from './hello.mdx';

export function App() {
  return <Hello />;
}

hello.mdx

# Hello, MDX!

This is a pretty cool MDX file.