gatsby.jsのMDXProviderでMDXRendererのカスタマイズする方法
created
updated
目次
react.js/gatsby.jsのMDXProviderでMDXRendererで表示するマークダウンをカスタマイズして表示したかったので、その方法をまとめました。
gatsby-plugin-mdx | Gatsby
MDXProviderの使い方はこちらにあります。
mdxのh2タグの直前にAdSense広告を表示する方法
MDXProviderでMDXRendererをはさむ
MDX.js
import React from "react";
import { MDXProvider } from "@mdx-js/react"
import { MDXRenderer } from "gatsby-plugin-mdx";
import { AdSense } from "./components/AdSense";
// h2タグの直前にAdSense広告を表示したい場合
const components = {
h2: props => (
<>
<AdSense />
<h2 {...props} />
</>
),
}
export const MDX = ({ body }) => {
return (
<MDXProvider components={components}>
<MDXRenderer>{body}</MDXRenderer>
</MDXProvider>
);
};ブログを表示するコンポーネントJavaScript
template.js
import React from "react";
import { MDX } from "../components/MDX"
...
<article>
<MDX body={body} />
</article>
...Web画面
