GatsbyJS rehypeReactでマークダウンの内容を変更する

2019-07-11

前回と同様、rehypeReactを使ってMarkdownから変換されたHTMLに手を加えます。

タグの内容を変える

通常、gatsby-transformer-remarkはマークダウンに記述した「#」を「h1」タグに変換します。
ただサイトの構成上、画面のタイトルにh1を利用しておりマークダウンの内容はh2以下にしたい場合、rehypeReactで変換します。
(h6はあきらめる)

まずは普通に表示する

プラグイン、ディレクトリ構成は前回のまま引き継いで、 file1.md、index.jsを変更します。

# h1マークダウンファイルの内容

## h2マークダウンファイルの内容

### h3マークダウンファイルの内容

#### h4マークダウンファイルの内容

##### h5マークダウンファイルの内容

###### h6マークダウンファイルの内容

AAAABBBBCCCCDDDD  
あああいいいうううえええおお  
000111222333444  
// index.js
import React from "react"
import { graphql } from "gatsby"
import rehypeReact from "rehype-react"

const renderAst = new rehypeReact({
    createElement: React.createElement,
    // とりあえず変換なし
    components: {     },
  }).Compiler

export default ({ data }) => {
    const post = data.markdownRemark
    return (
        <div>
            {renderAst(post.htmlAst)}
        </div>
        )
    }

    export const query = graphql`
    query {
        markdownRemark {
            htmlAst
        }
      }
`

開発サーバを起動して、ブラウザを開きh1タグで表示されていることを確認します。

gatsby_markdown_1.png

hタグを変換する

index.jsのrehypeReactにタグの変換内容を記述します。

// index.js
import React from "react"
import { graphql } from "gatsby"
import rehypeReact from "rehype-react"

const renderAst = new rehypeReact({
    createElement: React.createElement,
    // hタグを1段下げる
    components: {
        'h1':'h2',
        'h2':'h3',
        'h3':'h4',
        'h4':'h5',
        'h5':'h6',
        'h6':'p',//h6はpに変える
    },
  }).Compiler

export default ({ data }) => {
    const post = data.markdownRemark
    return (
        <div>
            {renderAst(post.htmlAst)}
        </div>
        )
    }

    export const query = graphql`
    query {
        markdownRemark {
            htmlAst
        }
      }
`

画面を確認して、hタグが変換されていることが確認できます。

gatsby_markdown_2.png

emotionでCSSを記述する

通常はCSSでスタイルを指定すると思いますが、せっかくなのでemotionプラグインを使ってCSSを記述します。

まずは、emotionのインストール

npm install --save gatsby-plugin-emotion @emotion/core @emotion/styled

gatsby-config.jsにemotionを記載

module.exports = {
  plugins: [
    `gatsby-plugin-emotion`,

次に、index.jsにh1、h2、h3に対するCSSを記述します。
h1、h2はStyledComponents方式で指定して、h3にはCSSprop方式で指定してみます(もっといい書き方がありそう)

// index.js
import React from "react"
import { graphql } from "gatsby"
import rehypeReact from "rehype-react"
import styled from '@emotion/styled'
/** @jsx jsx */
import { jsx, css  } from '@emotion/core'

// StyledComponentsでスタイルを指定する
const h1_style = styled.h1`
color: red;
`

//h1タグに変換しつつ、色を変える
const h2_style = styled.h1`
color: blue;
`

// CSSpropでスタイルを指定する
const h3_style = props => {
    return(
        <h3
        css={{
            color: 'green'
        }}
        {...props}
        />
    )
}

const renderAst = new rehypeReact({
    createElement: React.createElement,
    // h1、h2、h3に対する変換マッピング
    components: {
        'h1':h1_style,
        'h2':h2_style,
        'h3':h3_style,
    },
  }).Compiler

export default ({ data }) => {
    const post = data.markdownRemark
    return (
        <div>
            {renderAst(post.htmlAst)}
        </div>
        )
    }

    export const query = graphql`
    query {
        markdownRemark {
            htmlAst
        }
      }
`

開発サーバ再起動後、スタイルが適用されていることが確認できます。

gatsby_markdown_3.png

■同じタグの記事(最新5件)
GatsbyJS FaunaDBからデータを取得する
GatsbyJS 検索機能を実装する(JsSearchを利用)
GatsbyJS PostgreSQLの内容を取得する
GatsbyJS マークダウンにコンポーネントを表示する
GatsbyJS トランスフォーマープラグインを使用してマークダウン...
■同じタグの記事を見る