MDX

• mdx-js/mdx
  • Markdown+JSX
  • remark, rehype, recma
• 参考
  • shuding/nextra
    • Next.js Static Site Generator
    • 不支持 nextjs 13 shuding/nextra#935
    • 依赖 webpack 不支持 turbopack
    • markdown 由 nextra/loader 处理
  • mdxjs.com/playground
  • sjwall/mdx-mermaid
    • mdxast 插件，添加 mermaid 支持
    • 可以支持直接渲染 svg - 需要 puppeteer
    • {type:mermaidCodeBlock, data:{hName, hProperties:{config:{}, chart:""}}}
  • hashicorp/next-mdx-remote

export const Thing = () => <>World</>;

# Hello <Thing />

/* @jsxRuntime automatic @jsxImportSource react */

export const Thing = () => <>World</>;

export default function MDXContent() {
  return (
    <h1>
      Hello <Thing />
    </h1>
  );
}

• 默认 export MDXContent
  • props
    • components: Record<string,ComponentType> | ()=>Record<string,ComponentType>
      • 组件映射
      • wrapper:({components,...props})=> - 包装内容
      • 组件列表 mdxjs.com/table-of-components
• export default function Layout - 同 components.wrapper
• <MDXProvider components={components}></MDXProvider>
  • 上下文配置好组件

Notes

• extensions sindresorhus/markdown-extensions/markdown-extensions.json
  • mdx, md, markdown, mdown, mkdn, mkd, mkdown, ron
• createProcessor
  • unified 的 Processor
• DefinitelyTyped/DefinitelyTyped/types/mdx/types.d.ts

Version

MDX v3

• 支持 await
• 支持 ES2024 语法 - 更新 Acorn
• Adjacent block JSX and expressions in MDX

<style>{`

  h1 {
    color: blue;
  }

`}</style>

• mdxjs.com/blog/v3

MDX v2

• 更好处理 HTML 嵌套 MD
• 支持 JavaScript expressions，例如 {2 * Math.PI}
• 抽取出了 micromark/micromark
  • markdown parser
• mdxjs.com/blog/v2