支持React JSX的Markdown

markdown非常好用，简单看一下：Markdown基本语法 https://www.zhoulujun.cn/html/php/phpcms/2021_0412_8628.html

但是还有更用，基于markdown扩展的mdx

mdx

MDX -- 支持 React JSX 的 Markdown 超集

• JSX、DSL 虽然能够精准把控，但是写起来太累了，自己要写很多胶水
• Markdown 虽然书写自由，但是布局、功能都难以精确控制

JSX in Markdown for ambitious projects 为雄心勃勃的项目提供的在 Markdown 中书写 JSX 的方式

webpack的官方文档就是 mdx 写的https://github.com/webpack/webpack.js.org

如何使用,具体查看：https://www.mdxjs.cn/getting-started/react-static

MDX教学

具体使用案例：MDX -- 支持 React JSX 的 Markdown 超集

所以，略过……

vitepress不支持mdx

尤大大回复如下：

• Feel free to work on a plugin to use MDX with Vite - we can transfer it to vitejs organization once it's stable.
• That said, MDX doesn't make sense for VitePress.
• VitePress is designed to be Vue only - this is required for the navigation structure, theming and advanced optimizations.
• VitePress already supports treating plain markdown files as Vue SFCs, which allows using all Vue SFC features inside normal markdown, and has much better optimization. MDX transpiles markdown to JSX render functions, which is terribly inefficient (double payload cost + unnecessary hydration of static content) unless there are optimizations I am unaware of. In comparison, VitePress markdown processing with Vue 3 automatically strips all static parts of your markdown from the compiled JavaScript so there is no unnecessary JavaScript or hydration cost. I don't mean to belittle their work - it's useful for React users for sure, but MDX trying to support Vue is... a bit pointless.

所以，比如我的 https://www.zhoulujun.co/ 很多东西就不想弄了，尽管有：vite-plugin-mdx 插件支持，但是还懒得动了

转载本站文章《 支持React JSX的Markdown》, 请注明出处：https://www.zhoulujun.cn/html/php/phpcms/2022_0608_8829.html