add mdx plugin demo

vitejs · Sep 28, 2023 · 1b3aeb2 · 1b3aeb2
1 parent 8778670
commit 1b3aeb2
Show file tree

Hide file tree

Showing 4 changed files with 582 additions and 11 deletions.
diff --git a/packages/playground/use-theme-doc/package.json b/packages/playground/use-theme-doc/package.json
@@ -24,6 +24,9 @@
     "@types/react": "^18.2.13",
     "@vitejs/plugin-react": "^4.0.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
+    "rehype-mathjax": "^4.0.3",
+    "remark-emoji": "^4.0.0",
+    "remark-math": "^5.1.1",
     "rimraf": "^4.4.1",
     "serve": "^14.2.0",
     "vite": "^4.4.8",

diff --git a/packages/playground/use-theme-doc/pages/md-test1$.md b/packages/playground/use-theme-doc/pages/md-test1$.md
@@ -8,6 +8,19 @@ import Counter from './Counter';
 
 <Counter />
 
+# test mdx plugin
+
+remark-emoji: :dog: :+1:
+
+remark-math:
+
+Lift($$L$$) can be determined by Lift Coefficient ($$C_L$$) like the following
+equation.
+
+$$
+L = \frac{1}{2} \rho v^2 S C_L
+$$
+
 # Heading one
 
 Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit sit fugiat commodo id sunt. Nostrud enim ad commodo incididunt cupidatat in ullamco ullamco Lorem cupidatat velit enim et Lorem. Ut laborum cillum laboris fugiat culpa sint irure do reprehenderit culpa occaecat. Exercitation esse mollit tempor magna aliqua in occaecat aliquip veniam reprehenderit nisi dolor in laboris dolore velit.

diff --git a/packages/playground/use-theme-doc/vite.config.ts b/packages/playground/use-theme-doc/vite.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import * as path from 'path'
 // import react from '@vitejs/plugin-react'
-import react from "@vitejs/plugin-react-swc";
+import react from '@vitejs/plugin-react-swc'
 
 import pages from 'vite-plugin-react-pages'
 
@@ -16,6 +16,29 @@ export default defineConfig({
     pages({
       pagesDir: path.join(__dirname, 'pages'),
       // useHashRouter: true
+      modifyRemarkPlugins(original) {
+        return [
+          ...original,
+          {
+            name: 'remark-emoji',
+            createPlugin: () => import('remark-emoji').then((m) => m.default),
+          },
+          {
+            name: 'remark-math',
+            createPlugin: () => import('remark-math').then((m) => m.default),
+          },
+        ]
+      },
+      modifyRehypePlugins(original) {
+        return [
+          ...original,
+          {
+            name: 'rehype-mathjax',
+            createPlugin: () =>
+              import('rehype-mathjax').then((m) => m.default as any),
+          },
+        ]
+      },
     }),
   ],
   // theme local dev