MDX? ???, ???? ? ? ?? ?? ??? ?? ???? ??? ?????. ?? ?? HTML ??, ?? ? ??? ?? ???? ?? ?? ??? ? ? ??? ??? ? ??? ?? ?? ?? ??? ??? ?? ? ? ????.

? ??? ???? Markdown ??? ?? MDX ?? ??? ??? MDX? ??? ???? ??? ?? ?????. ? ???? ??? ?? ??? ??? ?? "?? ??"? ??? ?????.

??? ?? ? ??? Gatsbyjs ? React? ??????? MDX? ?? ??? ??? ?? ??? ?? ????. MDX? ??? ?????? ???? ??????. ? ???? ????? ?? ???? ?????.

???? ??

??? ?? ?? MDX ?? ???? ?? ?????? ?????????. ?? ??? ? ???? ?? ?? ??? ?? ?? ? ? ????. ???? MDX ????? ???? ?? ???? ?? ??? ??? ? ????. ?? ??, gatsby-plugin-mdx ????? ???? ????? ??? ?? ?? ? ? ????.

 <code>{ resolve: `gatsby-plugin-mdx`, options: {  defaultLayouts: {   default: path.resolve('./src/templates/blog-post.js'),  },  // ...其他選項 } }</code>

?? ???? src/templates/blog-post.js ??? children ???? ?? ??? ???? ??????.

 <code>import { MDXRenderer } from 'gatsby-plugin-mdx'; function BlogPost({ children }) { return (</code> {????}
 );
}
?
???? ?? ??? ???;

????? ???? ???? ???? Gatsby ??? ?? ? ?? ??? ??? ???? ?? MDXRenderer ?? ?? ??? ???????.

?? ?? ?? ??

MDX? ??? ?? HTML ? ?? ?? ??? ??? ??? ?????, ? ?? ??? ?? ???? Markdown? ?????? ????. ??? ??? ?? ?? ??? ???? ??? ?????? ??? ????? ?????????

??? ??? ?? ????? ??? ? ??? MDX? ? ?? ???? ?????. ????? Markdown? ?? ?? ? ??? ??????.

??? ???? ??? ?? React ?? ??? ???? MDX?? MDXProvider ?? ??? ?? ??? ????. React Context API? ???? ??? ??? ?? ?? ??? ???? MDX? ???? ????? ?????.

 <code>import React from 'react'; import { MDXProvider } from "@mdx-js/react"; import Image from './image-component'; function Layout({ children }) { return (<mdxprovider components="{{" h1:><h1 classname="text-xl font-light"></h1></mdxprovider></code> ,,,
   IMG : ???,
  }}>
   {????}

 );
}
?
?? ???? ????;

? ???? MDX ??? ?? H1 ?? (#)? ??? ?? ??? ??? ??? ??? ?? ???? ???? ?? ?? ??? ???? ?? ?????. ?? ??, MDXProvider H1 ??? ?? ??? ? ??? ?? ??? ?? MDX ???? ?? ? ?? MDX ??? Title 1 (#)? ??? ? ??? ?? ??? ?? ? ? ????.

MDX ? ??? ?? ?? ??

??? MDX ??? ????? ?? ?? ??? ????? ?????????

 <code>--- title: 導(dǎo)入組件--- import Playground from './Playground';以下是關(guān)于我一直在構(gòu)建的`Playground`組件的介紹：<playground></playground></code>

?? ??? MDX ??? ?? ?? ?? ?? ?? ???? ??? ? ????. ?? ??? ??? ???? ?? ?? ??? ????? ?? ??? ????? ???? ????? ????????? ?? ???? ?? ?? ?? ?? ? ????. ?? MDX? ?? ??? ??? ??? ??? ?????. ??? MDX ??? ?? ??? ?? ?????.

[?? ??]? ???? ?? ???? ?? ? ???? ?? ??? ?? ??? ???? ? ????. ??? YouTube Embeds, Twitter ?? ?? ??? ?? ???? ?? ??? ??? ?????.

MDX ?? ????? ?? ??? ????? MDXProvider ?? ??? ?? ???????.

 <code>import React from 'react'; import { MDXProvider } from "@mdx-js/react"; import Playground from './playground-wrapper'; function Layout({ children }) { return (<mdxprovider components="{{" h1:><h1 classname="text-xl font-light"></h1></mdxprovider></code> ,,,
   ???,
  }}>
   {????}

 );
}
?
?? ???? ????;

components ??? ??? ?? ?? ??? ???? MDX ??? ?? ?? ??? ?? ??? ? ????.

 <code>--- title: 演示概念---這是新概念的演示：<playground></playground> > 看，媽媽！不需要導(dǎo)入</code>

?? ?? ??? ?? ?????

React??? ??? API? ??? ???? ?? ?? ??? ?? ? ? ????. ? API? ???? ??? ??? ??? ?? ??? ???? ??? ????? ???? ??? ? ????. MDX? MDX? ?? ? ?? ????? ??? ? ??? ?? ?? ?? ??? ?????.

??? ????? ??? ?? MDXProvider ??? ? ????.

 <code>import React from "react"; import { MDXProvider } from "@mdx-js/react"; const components = { wrapper: ({ children, ...props }) => {  const reversedChildren = React.Children.toArray(children).reverse();  return {reversedChildren}>; }, }; export default (props) => (<mdxprovider components="{components}"></mdxprovider></code> {props.children}

);

? ??? ?? ??? ???? ??? ? ??? ?? ??? ????????.

??? ??? ????? ?? ???? MDX ?? ??? ????? ? ?? ????.

 <code>import React from "react"; import { MDXProvider } from "@mdx-js/react"; import { useTrail, animated, config } from "react-spring"; const components = { wrapper: ({ children, ...props }) => {  const childrenArray = React.Children.toArray(children);  const trail = useTrail(childrenArray.length, {   xy: [0, 0],   opacity: 1,   from: { xy: [30, 50], opacity: 0 },   config: config.gentle,   delay: 200,  });  return (</code>
    {trail.map (({xy : [x, y], ????}, index) => (
<animated.div key="{index}" style="{{" transform: x.interpolate> `translate3d ($ {x} px, $ {y} px, 0)`), ????}}>
      {childrenarray [index]}
</animated.div>
    ))}

  );
 },
};
?
???? ??? (props) => (
<mdxprovider components="{components}">
<main>{props.children}</main>
</mdxprovider>
);

??

MDX? ?? ??? ????? ?????? ???? ???? ? ???? ?? ? ????. gatsby-plugin-mdx ??? ?? ?? ?? ??? ?? ? ? ????.

1. MDX ??? ???? ? ????? ?? ???? ?? ??? ????.
2. Markdown?? ??? ? ?? HTML ??? ??? ?? ?? ??? ??????.
3. ?? ??? ???? ? ???? ?? ??? ?? ?? ?? ??? ??????.
4. ?? ??? ?? ???? MDX ??? ?????.

?? ????, ??? MDX? ?? ? ??? ??? ??? ????? ? ????? ?? ?? ?? ?????.

MDX? ?? ??? ??

• MDX ??
• ??? ?? ??, ??? ??? ? MDX? ??

? ??? MDX ??? ?? ?? ? ?? ??? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!