Skip to main content

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 处理
- https://mdxjs.com/playground/
- sjwall/mdx-mermaid
  - mdxast 插件，添加 mermaid 支持
  - 可以支持直接渲染 svg - 需要 puppeteer
  - {type:mermaidCodeBlock, data:{hName, hProperties:{config:{}, chart:""}}}

input.mdx
export const Thing = () => <>World</>;

# Hello <Thing />

output-outline.jsx
/* @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})=> - 包装内容
    - 组件列表 https://mdxjs.com/table-of-components/
export default function Layout - 同 components.wrapper
<MDXProvider components={components}></MDXProvider>
- 上下文配置好组件

MDX v2

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

MDX v2