Mdx

Understanding the use of mdx with toolset 1. We need to configure @mdx-js/rollup , this could be different for different toolset(i’m using vite; which uses rollup for production build). 1 2 3 4 5 6 7 8 9 10 //vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import mdx from "@mdx-js/rollup"; export default defineConfig(async () => { return { plugins: [react(), mdx()], }; }); 2. We need the provider of MDX to wrap the app to apply the imported *.mdx 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //App.ts import { MDXProvider } from "@mdx-js/react"; function App() { return ( <> <MDXProvider> <TestMarkdown /> </MDXProvider> </> ); } export default App; Note: This doesnot support code higlighting and table; we need rehype-highlight, remark-gfm respectively for that ...