MDX中文网：https://www.mdxjs.cn/
MDX英文网：https://mdxjs.com/
MDX = MD + JSX =》 JSX

如何实现

image.png
把我们的 MDX 代码，通过 MDX 插件，转化成 Vue/React 等其他插件可以解析的代码，就可以复用其他插件的功能

MDX 的使用

Sync API

  • 同步处理 mdx
  • 安装依赖 yarn add @mdx-js/mdx -D

    简单使用

    ```javascript // mdx-test.js const mdx = require(“@mdx-js/mdx”);

console.log(mdx.sync(“# Hello”));

  2. - 执行 `node mdx-test.js` 输出代码,是一个标准的 JSX 代码
  3. ```javascript
  4. /* @jsxRuntime classic */
  5. /* @jsx mdx */
  7. const layoutProps = {};
  8. const MDXLayout = "wrapper";
  9. export default function MDXContent({ components, ...props }) {
  10.   return (
  11.     <MDXLayout
  12.       {...layoutProps}
  13.       {...props}
  14.       components={components}
  15.       mdxType="MDXLayout"
  16.     >
  17.       <h1>{`Hello`}</h1>
  18.     </MDXLayout>
  19.   );
  20. }
  22. MDXContent.isMDXComponent = true;
  • /* @jsxRuntime classic */ 通过注释的方式告诉 jsx 的编译器如何编译
  • /* @jsx mdx */
    • 一般来说这个组件 MDXLayout，在 react 中会被编译成 React.createElement(MDXLayout,{})
    • 我们指定了 mdx ，那么 MDXLayout 会被编译成 mdx(MDXLayout,{})

      复杂使用

      ```javascript const mdx = require(“@mdx-js/mdx”);

console.log( mdx.sync( `

Hello

will this be called

  • first
  • second

export const a = 1 ` ) );


- 编译之后
```javascript
/* @jsxRuntime classic */
/* @jsx mdx */


const makeShortcode = name => function MDXDefaultShortcode(props) {
      console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
      return <div {...props}/>
    };
const Button = makeShortcode("Button");
const layoutProps = {
  a
};
const MDXLayout = "wrapper"
export default function MDXContent({
  components,
  ...props
}) {
  return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
    <h1>{`Hello`}</h1>
    <blockquote>
      <p parentName="blockquote">{`will this be called`}</p>
    </blockquote>
    <ul>
      <li parentName="ul">{`first`}</li>
      <li parentName="ul">{`second`}</li>
    </ul>
    <Button mdxType="Button">Client me</Button>
    </MDXLayout>;
}

;
MDXContent.isMDXComponent = true;
  • 我们倒出的变量会存放在 layoutProps 中
  • 由于我们并没有引入 Button 这个组件，所以 mdx 提示我们 console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
  • 如果我们导入了 Button 组件，则会是这样 ``javascript console.log( mdx.sync( import Button from ‘button’

Hello

will this be called

  • first
  • second

` ) );

/ @jsxRuntime classic / / @jsx mdx / import Button from ‘button’ ….. ```