Unofficial MDX 3 transformer plugin for Parcel 2
npm init -y
npm i react react-dom
npm i parcel @parcel/config-default parcel-transformer-mdx -D{
"scripts": {
"start": "parcel ./src/index.html",
"build": "parcel build ./src/index.html --public-url ."
}
}{
"extends": "@parcel/config-default",
"transformers": {
"*.{md,mdx}": ["parcel-transformer-mdx"]
}
}<!doctype html>
<html>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/themes/prism-okaidia.css"
/>
</head>
<body>
<div id="root"></div>
<script type="module" src="index.jsx"></script>
</body>
</html>import { createRoot } from 'react-dom/client';
import Index from './index.mdx';
const root = createRoot(document.querySelector('#root'));
root.render(<Index />);---
title: Hello MDX
---
# Hello MDX
https://react.dev/
https://www.youtube.com/watch?v=VEoMT8pAxMA- WebCell example: https://github.com/EasyWebApp/BootCell-document
Create a mdx.config.js file in the root folder of your project, and export your CompileOptions object as what the internal preset does.