MDX

• mdx-js/mdxGitHubmdx-js/mdxmdx-js/mdx · Markdown+JSX · remark, rehype, recma · 参考 · shuding/nextra · Next.js Static Site Generator · 不支持 nextjs 13 shuding/nextra#935笔记：MDX
  • Markdown+JSX
  • remark, rehype, recma
• 参考
  • shuding/nextraGitHubshuding/nextra支持 SSG, SSR, ISR · shuding/nextra · Next.js Static Site Generator · remark · 高亮 shikijs · markdown 由 nextra/loader 处理 · https://nextra.site/showcase笔记：nextra
    • Next.js Static Site Generator
    • 不支持 nextjs 13 shuding/nextra#935GitHub Issueshuding/nextra#935
    • 依赖 webpack 不支持 turbopack
    • markdown 由 nextra/loaderGitHub Fileshuding/nextra/packages/nextra/src/loader.ts支持 SSG, SSR, ISR · shuding/nextra · Next.js Static Site Generator · remark · 高亮 shikijs · markdown 由 nextra/loader 处理 · https://nextra.site/showcase笔记：nextra 处理
  • mdxjs.com/playground
  • sjwall/mdx-mermaidGitHubsjwall/mdx-mermaidmdx-js/mdx · Markdown+JSX · remark, rehype, recma · 参考 · shuding/nextra · Next.js Static Site Generator · 不支持 nextjs 13 shuding/nextra#935笔记：MDX
    • mdxast 插件，添加 mermaid 支持
    • 可以支持直接渲染 svg - 需要 puppeteer
    • {type:mermaidCodeBlock, data:{hName, hProperties:{config:{}, chart:""}}}
  • hashicorp/next-mdx-remoteGitHubhashicorp/next-mdx-remotemdx-js/mdx · Markdown+JSX · remark, rehype, recma · 参考 · shuding/nextra · Next.js Static Site Generator · 不支持 nextjs 13 shuding/nextra#935笔记：MDX

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.jsonGitHub Filesindresorhus/markdown-extensions/markdown-extensions.json
  • mdx, md, markdown, mdown, mkdn, mkd, mkdown, ron
• createProcessor
  • unified 的 Processor
• DefinitelyTyped/DefinitelyTyped/types/mdx/types.d.tsGitHub FileDefinitelyTyped/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/micromarkGitHubmicromark/micromarkmicromark/micromark · new foundation for @unifiedjs · remark 基于 micromark笔记：micromark
  • markdown parser
• mdxjs.com/blog/v2