https://github.com/easywebapp/parcel-transformer-mdx
Unofficial MDX 3 transformer plugin for Parcel 2
https://github.com/easywebapp/parcel-transformer-mdx
Last synced: 12 months ago
JSON representation
Unofficial MDX 3 transformer plugin for Parcel 2
- Host: GitHub
- URL: https://github.com/easywebapp/parcel-transformer-mdx
- Owner: EasyWebApp
- License: lgpl-3.0
- Created: 2024-01-24T15:12:47.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-08-08T19:56:27.000Z (over 1 year ago)
- Last Synced: 2024-10-17T12:29:33.915Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 146 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: ReadMe.md
- License: License.md
Awesome Lists containing this project
README
# Parcel MDX transformer
Unofficial [MDX][1] 3 [transformer plugin][2] for [Parcel][3] 2
[][4]
[][5]
[][6]
## Preset features
1. [GitHub flavored Markdown (GFM)](https://github.com/remarkjs/remark-gfm)
2. [Frontmatter](https://github.com/remarkjs/remark-frontmatter)
3. [Syntax highlighting](https://github.com/mapbox/rehype-prism)
4. [Embed](https://github.com/remark-embedder/core)
## React usage
### Installation
```shell
npm init -y
npm i react react-dom
npm i parcel @parcel/config-default parcel-transformer-mdx -D
```
### `package.json`
```json
{
"scripts": {
"start": "parcel ./src/index.html",
"build": "parcel build ./src/index.html --public-url ."
}
}
```
### `.parcelrc`
```json
{
"extends": "@parcel/config-default",
"transformers": {
"*.{md,mdx}": ["parcel-transformer-mdx"]
}
}
```
### `index.html`
```html
```
### `index.jsx`
```jsx
import { createRoot } from 'react-dom/client';
import Index from './index.mdx';
const root = createRoot(document.querySelector('#root'));
root.render();
```
### `index.mdx`
```markdown
---
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][7] as what [the internal preset][8] does.
## Inspiration
https://github.com/parcel-bundler/parcel/pull/7922
[1]: https://mdxjs.com/
[2]: https://parceljs.org/plugin-system/transformer/
[3]: https://parceljs.org/
[4]: https://libraries.io/npm/parcel-transformer-mdx
[5]: https://github.com/EasyWebApp/Parcel-transformer-MDX/actions/workflows/main.yml
[6]: https://nodei.co/npm/parcel-transformer-mdx/
[7]: https://mdxjs.com/packages/mdx/#compileoptions
[8]: source/preset.js