Example using Remark plugins in react

examples/preact/package.json

@@ -5,11 +5,12 @@
     "build:vite-plugin-mdx": "cd ../../ && yarn build"
   },
   "dependencies": {
-    "vite-plugin-mdx": "file:../../",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/preact": "^1.6.22",
-    "preact": "^10.5.12",
-    "@prefresh/vite": "^2.1.0",
-    "vite": "^2.0.0-beta.65"
+    "@prefresh/vite": "^2.2.2",
+    "preact": "^10.5.13",
+    "remark-prism": "^1.3.6",
+    "vite": "^2.3.4",
+    "vite-plugin-mdx": "file:../../"
   }
 }

examples/preact/src/Hello.md

@@ -0,0 +1,53 @@
+import { Counter } from './Counter.jsx';
+
+# Hello
+
+This text is written in Markdown.
+
+MDX allows Rich Preact components to be used directly in Markdown: <Counter/>
+
+Edit `Counter.jsx` or `Hello.mdx` and save to experience HMR updates.
+
+## Plugin Support
+
+### Install `remark-prism`
+
+```bash
+yarn add remark-prism
+```
+
+### Include CSS
+
+```javascript
+import "prismjs/themes/prism-tomorrow.css"
+```
+
+### Declare Plugin in `vite.config.js`
+
+```javascript
+import reactRefresh from '@vitejs/plugin-react-refresh'
+import mdx from 'vite-plugin-mdx'
+
+const options = {
+  remarkPlugins: [
+    // plugin added!
+    require('remark-prism')
+  ],
+  rehypePlugins: [],
+}
+
+export default {
+  plugins: [
+    reactRefresh(),
+    mdx(options),
+  ]
+}
+```
+
+### Import Markdown Files
+
+- md or mdx extensions are acceptable
+
+```javascript
+import Hello from './Hello.md'
+```

examples/preact/src/index.jsx

@@ -1,5 +1,6 @@
 import { render } from 'preact'
 import './index.css'
-import Hello from './Hello.mdx'
+import Hello from './Hello.md'
+import "prismjs/themes/prism-tomorrow.css"
 
 render(<Hello />, document.getElementById('preact-root'))

examples/preact/vite.config.js

@@ -1,11 +1,23 @@
 import prefresh from '@prefresh/vite'
 import mdx from 'vite-plugin-mdx'
 
+// `options` are passed to `@mdx-js/mdx`
+const options = {
+  // See https://mdxjs.com/advanced/plugins
+  remarkPlugins: [
+    require('remark-prism')
+  ],
+  rehypePlugins: [],
+}
+
 export default {
   esbuild: {
     jsxFactory: 'h',
     jsxFragment: 'Fragment',
     jsxInject: `import { h, Fragment } from 'preact'`
   },
-  plugins: [prefresh(), mdx()]
+  plugins: [
+    prefresh(),
+    mdx(options)
+  ]
 }