prism-react-renderer

シンタックスハイライトを適用させる方法はいくつかあるようですが、今回はprism-react-rendererを使いました。

prism-react-rendererの導入

npm install prism-react-renderer

Gatybyの設定ファイルの記載は不要で、新規でファイルを作成します。
ここはコピペでも大丈夫です。
vsDarkの箇所はプラグインから好きなテーマを選択して下さい。
overflow:は要素のボックスからはみ出た部分を扱うCSSのプロパティです。
今回はautoのしている為、基本的には横スクロールが出る想定で記述しています。

// CodeBlock.js
import React from "react";
import Highlight, { defaultProps } from "prism-react-renderer";
import theme from "prism-react-renderer/themes/vsDark";
import Prism from "prism-react-renderer/prism";

export default (props) => {
  const className = props.children.props.className || "";
  const matches = className.match(/language-(?<lang>.*)/);
  return (
    <Highlight
      {...defaultProps}
      code={props.children.props.children.trim()}
      language={
        matches && matches.groups && matches.groups.lang
          ? matches.groups.lang
          : ""
      }
      theme={theme}
    >
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre
          className={className}
          style={{ ...style, padding: "20px", overflow: "auto" }}
        >
          {tokens.map((line, i) => (
            <div key={i} {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span key={key} {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  );
};

<MDXProvider>で囲うことで、MDXコンテンツ内のタブのレンダリングを置き換えることが出来ます。
<pre>タグががCodeBlockを置き換わるような感じです。

// Hogehoge.js
import * as React from "react";
import { MDXRenderer } from "gatsby-plugin-mdx";
import { MDXProvider } from "@mdx-js/react";
import CodeBlock from "../../components/CodeBlock";

const components = {
  pre: CodeBlock,
};

const Hogehoge = ({ data }) => {
  const image = getImage(data.mdx.frontmatter.hero_image);
  const category = data.mdx.frontmatter.category;
  const pageTitle = data.mdx.frontmatter.title;
  return (
      <MDXProvider components={components}>
        <MDXRenderer>{data.mdx.body}</MDXRenderer>
      </MDXProvider>
  );
};
export default Hogehoge;

あとは各々のmdxファイルの記述についてはこちらのの”コードの挿入”を参考にしてみて下さい。