Parcel-transformer-MDX
Unofficial MDX 3 transformer plugin for Parcel 2
LGPL-3.0 License
Parcel MDX transformer
Unofficial MDX 3 transformer plugin for Parcel 2
Preset features
React usage
Installation
npm init -y
npm i react react-dom
npm i parcel @parcel/config-default parcel-transformer-mdx -D
package.json
{
"scripts": {
"start": "parcel ./src/index.html",
"build": "parcel build ./src/index.html --public-url ."
}
}
.parcelrc
{
"extends": "@parcel/config-default",
"transformers": {
"*.{md,mdx}": ["parcel-transformer-mdx"]
}
}
index.html
<!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>
index.jsx
import { createRoot } from 'react-dom/client';
import Index from './index.mdx';
const root = createRoot(document.querySelector('#root'));
root.render(<Index />);
index.mdx
---
title: Hello MDX
---
# Hello MDX
https://react.dev/
https://www.youtube.com/watch?v=VEoMT8pAxMA
JSX compatible engines usage
- WebCell example: https://github.com/EasyWebApp/BootCell-document
Custom Configuration
Create a mdx.config.js file in the root folder of your project, and export your CompileOptions object as what the internal preset does.
Inspiration
Package Rankings
Top 48.5% on Npmjs.org
Badges
Extracted from project README
