MDXProviderを使ってマークダウンの表示を変える

2020年06月26日

MDXを使う準備

この記事ではMDXを使った前提で進めます。MDXは不要でシンプルなMarkdownで良い方は適宜読み替えていただけると幸いです。
MDXとは、Markdownで簡潔に記述し、かつより高度で再利用可能なJSXも埋め込めるものです。

インストール

yarn add gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

gatsby.configに追記

module.exports = {
  plugins: [
    `gatsby-plugin-mdx`,
  ],
}

gatsby-node.jsでページを作成

詳細は割愛しますが、CreatePages APIの、CreatePage アクションを使ってページを作成します。
テンプレートファイルに./src/templates/blog-post/index.jsを指定しているので、あとでこのファイルを見ていきます。

コードを見る

gatsby-node.js

const path = require(`path`);
const { createFilePath } = require(`gatsby-source-filesystem`);
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const blogPostTemplate = path.resolve(`./src/templates/blog-post/index.js`);
  const result = await graphql(
    `
      {
        postsRemark: allMdx(
          sort: { fields: [frontmatter___date], order: DESC }
          filter: { fileAbsolutePath: { regex: "/content/blog/" } }
          limit: 2000
        ) {
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
    `
  );
  if (result.errors) {
    throw result.errors;
  }
  // Create blog posts pages.
  const posts = result.data.postsRemark.edges;
  posts.forEach((post, index) => {
    createPage({
      path: `${post.node.fields.slug}`,
      component: blogPostTemplate,
      context: {
        slug: post.node.fields.slug,
      },
    });
  });
};

GitHub

MDXProviderでコンポーネントの定義をマッピングする

MDXProviderを使うことで、MDXコンテンツ内のタグのレンダリングを置き換えることができます。
例えば<h1>の色を変えたい場合、以下のようにMDXProviderにオブジェクトを渡します。

import { MDXProvider } from "@mdx-js/react"
const MyH1 = props => <h1 style={{ color: "tomato" }} {...props} />
const components = {
  h1: MyH1,
}
export const wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

自分の場合は、
コンテンツのレンダリングの定義をsrc/components/MDXComponents/index.jsでしています。
表示結果を変えたい場合はこのファイルをいじってます。

コードを見る

src/components/MDXComponents/index.js

import React from 'react';
import {
  Box,
  Divider,
  Image,
  Link,
  ListItem,
} from '@chakra-ui/core';
import CodeBlock from './CodeBlock';
import Heading from './Heading';
import InlineCode from './InlineCode';
import List from './List';
import Paragraph from './Paragraph';
import Quote from './Quote';
import Table, { THead, TData } from './Table';
const MDXComponents = {
  h2: props => <Heading as='h2' size='lg' mt='20' mb='8' py='3' pl='1' borderTop='2px' borderBottom='2px' borderStyle='dotted' {...props} />,
  h3: props => <Heading as='h3' size='md' mt='16' mb='6' py='2' pl='1' borderBottom='1px dotted' {...props} />,
  h4: props => <Heading as='h4' size='sm' mt='16' mb='3' {...props} />,
  h5: props => <Heading as='h5' size='xs' mt='3' mb='2' {...props} />,
  h6: props => <Heading as='h6' size='xs' mt='1' mb='1' {...props} />,
  inlineCode: InlineCode,
  code: CodeBlock,
  pre: props => <Box my='6' rounded='sm' {...props} />,
  p: Paragraph,
  ul: props => <List styleType='disc' {...props} />,
  ol: props => <List styleType='decimal' {...props} />,
  li: props => <ListItem  fontSize={['sm', 'md']} {...props} />,
  a: props => <Link color='orange.300' {...props} />,
  hr: Divider,
  thematicBreak: Divider,
  blockquote: Quote,
  image: props => <Image maxW='100%' {...props} />,
  table: Table,
  th: THead,
  td: TData,
};
export default MDXComponents;

GitHub

記事のコンテンツのコンポーネント内(src/components/ContentArticle.js）でMDXProviderを使ってマッピングしています。

コードを見る

src/components/ContentArticle.js

import React from 'react';
import { MDXRenderer } from 'gatsby-plugin-mdx';
import { MDXProvider } from '@mdx-js/react';
import { Heading, Text } from '@chakra-ui/core';
import Tags from './Tags';
import components from './MDXComponents';
const ContentArticle = ({ post }) => {
  return (
    <>
      <header>
        <Heading as='h1' size='2xl'>
          {post.frontmatter.title}
        </Heading>
        <Text fontSize='sm' opacity='.7' textAlign='right'>
          {post.frontmatter.date}
        </Text>
        <Tags post={post} />
      </header>
      <MDXProvider components={components}>
        <MDXRenderer>{post.body}</MDXRenderer>
      </MDXProvider>
    </>
  );
};
export default ContentArticle;

GitHub>

そして、gatsby-node.jsで指定したテンプレートファイル内(src/templates/blog-post/index.js）でContentArticleコンポーネントをレンダリングしています。

コードを見る

src/templates/blog-post/index.js

import React from 'react';
import { graphql } from 'gatsby';
import { Box, Divider, Grid } from '@chakra-ui/core';
import Layout from '../../components/layout';
import SEO from '../../components/SEO';
import Bio from '../../components/Bio';
import ContentArticle from '../../components/ContentArticle';
import PrevNextArticles from '../../components/PrevNextArticles';
import SnsShare from '../../components/SnsShare';
import { TOC, TOCDrawer } from '../../components/TOC';
const BlogGrid = props => (
        <Grid
        mx='auto'
        px='6'
        py='16'
        maxW='containers.xl'
        gap='5'
        gridTemplateColumns={[
          '100%',
          '100%',
          'calc(100% - 200px) 200px',
          'calc(100% - 300px) 300px',
        ]}
        templateAreas={[
          '"article"',
          '"article"',
          '"article aside"',
          '"article aside"',
        ]}
    {...props}
      />
)
const BlogPostTemplate = ({ data, pageContext, location }) => {
  const { previous: prev, next } = pageContext;
  const mdx = data.mdx;
  const url = `${data.site.siteMetadata.siteUrl}${mdx.fields.slug}`;
  const title = mdx.frontmatter.title;
  const headings = data.mdx.tableOfContents.items;
  return (
    <Layout location={location} position='relative'>
      <SEO
        title={title}
        description={mdx.frontmatter.description || mdx.excerpt}
        cover={mdx.frontmatter.cover?.publicURL}
        isArticle
      />
      <BlogGrid>
        <Box as='article' gridArea='article'>
          <ContentArticle post={mdx} />
          <SnsShare url={url} title={title} mt='4' />
          <Divider mt='2' />
          <Bio mt='6' />
          <PrevNextArticles prev={prev} next={next} mt='10' />
        </Box>
        <Box as='aside' gridArea='aside' position='relative'>
          {headings && (
            <TOC
              headings={headings}
              position='sticky'
              top='12'
              d={['none', 'none', 'block', 'block']}
            />
          )}
        </Box>
      </BlogGrid>
      <TOCDrawer
        headings={data.mdx.tableOfContents.items}
        d={['inline-block', 'inline-block', 'none', 'none']}
      />
    </Layout>
  );
};
export default BlogPostTemplate;
export const pageQuery = graphql`
  query BlogPostBySlug($slug: String) {
    site {
      siteMetadata {
        siteUrl
      }
    }
    mdx(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      body
      fields {
        slug
      }
      frontmatter {
        title
        date(formatString: "YYYY年MM月DD日")
        description
        tags
        cover {
          publicURL
        }
      }
      tableOfContents
    }
  }
`;

GitHub

岡本侑貴@筋肉ﾁｮｯﾄﾃﾞｷﾙ

筋肉バカ。筋トレしてコード書いて、毎日幸せに生きてる。ボディビルにドハマリ。2021年東京オープンボディビル選手権で最高の身体に仕上げてつよつよエンジニアになる！！