はじめに

今回紹介する内容

・ contentfulでマークダウンを利用する方法
・ Gatsbyでマークダウンを表示させる方法
上記、2点を紹介しております。

対象読者

・ Gatsbyを利用している人
・ マークダウン記法に慣れている方 を想定しております。

マークダウンの利用方法

手順1.Content modelで「Add field」を選択

手順2.fieldから「Text」を選択

手順3.fieldの条件を設定

手順4.「Appearance」で「Markdown」が選ばれていることを確認

Gatsbyで表示する方法

ご自身のプログを表示しているgatsby.jsのテンプレートファイルに以下の様に追記してください。

...（省略） 
//コンテンツエリア（リッチコンテンツを表示していた部分と差し替えれば大丈夫です。）
<div className="postbody">
  <div dangerouslySetInnerHTML={{__html:data.contentfulBlogPost.content.childMarkdownRemark.html}} />
</div>
...（省略）   

...
//graphql
export const query = graphql`
  query($id: String!) {
    contentfulBlogPost(id: { eq: $id }) {
      ...（省略）  
      content {
        childMarkdownRemark {
          html
        }
      }
    }
  }
`

いかがだったでしょうか。 リッチコンテンツでブログを作成するのも簡単で便利なのですが、記事中にコードを記載したい場合はマークダウンで書いた方がコントロールしやすいので、エンジニアの方にはマークダウンをおすすめしています！