install mdx-js/rollup

articles/test.mdx

@@ -0,0 +1,8 @@
+# markdown test
+
+ほしいものリスト
+
+- test
+  - aa
+  - dfd
+- let

package.json

@@ -18,6 +18,8 @@
     "@mantine/charts": "^7.7.0",
     "@mantine/core": "^7.6.2",
     "@mantine/hooks": "^7.6.2",
+    "@mdx-js/react": "^3.0.1",
+    "@mdx-js/rollup": "^3.0.1",
     "@nanostores/react": "^0.7.2",
     "nanostores": "^0.10.0",
     "react": "^18.2.0",

src/pages/blogs/+Page.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useReducer, type ReactElement } from "react";
+import { MDXProvider } from "@mdx-js/react";
+import Test from "../../../articles/test.mdx";
+
+/** @type {import('mdx/types.js').MDXComponents} */
+const components = {
+  em(properties: any) {
+    return <i {...properties} />;
+  },
+};
+export default function Blogs(): ReactElement {
+  return (
+    <div>
+      <h1>Blogs</h1>
+
+      <Test components={components} />
+    </div>
+  );
+}

vite.config.ts

@@ -1,8 +1,14 @@
 import { defineConfig } from "vite";
+import mdx from '@mdx-js/rollup'
 import react from "@vitejs/plugin-react-swc";
 import vike from "vike/plugin";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [react(), vike({ prerender: true }), tsconfigPaths()],
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    vike({ prerender: true }),
+    {enforce: 'pre', ...mdx()},
+  ],
 });