Gatsbyでマークダウンファイルの内容を表示し、マークダウン文中のコードブロックにシンタックスハイライトをきかせる

## Gatsby CLIインストール
Gatsby CLIをまだインストールしていない場合はインストールしてください。

```sh:ターミナル
npm install -g gatsby-cli
```

バージョンが表示されればOK

```terminal
$ gatsby -v

Gatsby CLI version: 2.7.8
```

## まずはHello world

作成したいディレクトリ先で下記コマンド実行
hello-worldという名前でプロジェクトが作成される

```terminal:ターミナル
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
```

作成したプロジェクトが動作するか確認
Hello world!が表示されていれば成功

```sh:ターミナル
cd hello-world

npm run develop
```

##フォルダ構成

今回の登場フォルダだけを書き出しています。
足りないファイルは、あらかじめ作成しておきましょう。

```diff
hello-world
+├── gatsby-browser.js
 ├── gatsby-config.js
 └── src
     ├── pages
     │   └── index.js 
+    ├── code.md
+    └── code-block-title.css
```


## クエリーからファイル名やサイズなどを取得できるようにする

[gatsby-source-filesystem](https://www.gatsbyjs.org/packages/gatsby-source-filesystem/?=)をインストール

```terminal:ターミナル
npm install --save gatsby-source-filesystem
```

gatsby-config.jsを以下のように編集

```javascript:gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/`, // 取得先を指定
      },
    },
  ]
}
```

`npm run develop`し直し
[GraphiQL](http://localhost:8000/___graphql) へアクセス
query に allFileとfileが追加されており、
この二つのクエリー項目を起点にして、
Gatsby-config.jsで指定したディレクトリ以下のファイルの情報を取得できる。

以下はsrc配下の全ファイルのファイル名、サイズ、変更日時を取得しています

<img width="1144" alt="スクリーンショット 2019-07-06 12.55.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/5b9dd9a6-e3c9-5695-c3b7-4c1865e18959.png">

クエリー文がわかったところで実際にindex.jsで表示してみましょう


```jsx:index.js
import React from "react"
import { graphql } from "gatsby"

// dataにクエリーの取得結果が渡される
export default ({ data }) => {
  const edges = data.allFile.edges;

  return (
    <div>
      {edges.map(({ node }) => {
        return (
            <ul key={node.name}>
              ---------------------------------------
              <h1>ファイル名：{node.name}</h1>
              <h2>サイズ：{node.size}</h2>
              <h3>変更日時：{node.changeTime}</h3>
            </ul>
          )
      })}
    </div>
  )
}

export const query = graphql`
query {
  allFile {
    edges {
      node {
        name
        size
        changeTime
      }
    }
  }
}
`

```

gatsby-config.jsを編集した場合は`npm run develop`し直します
そしてhttp://localhost:8000/ へアクセス
src配下のファイルが全て表示されていれば成功です

<img width="583" alt="スクリーンショット 2019-07-06 14.27.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/885a5c5a-38f7-ae55-c521-c2b69c5b674a.png">


## クエリーからMarkdownファイルの情報を取得できるようにする

[gatsby-transformer-remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/?=)をインストール

```sh:ターミナル
npm install --save gatsby-transformer-remark
```

gatsby-cinfig.jsに追加します

```diff:gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/`,
      },
    },
+   `gatsby-transformer-remark`,
  ]
}
```

コードブロックを含んだマークダウンファイルを用意

```markdown:code.md
---
title: "Syntax highlight"
date: "2017-08-21"
---

```javascript
const greeting = `Hello`;
console.log(greeting);
```　
```

先ほど用意したマークダウンファイルを取得するためにindex.jsを編集します

```jsx:index.js
import React from "react"
import { graphql } from "gatsby"

export default ({ data }) => {
  const node = data.allMarkdownRemark.edges[0].node;

  return (
    <div>
      <h1>{node.frontmatter.title}</h1>
      <h2>{node.frontmatter.date}</h2>
      <div dangerouslySetInnerHTML={{ __html: node.html }} />
    </div>
  )
}

export const query = graphql`
  query {
    allMarkdownRemark {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
          }
          html
        }
      }
    }
  }
`
```

`npm run develop`し直し
http://localhost:8000/ へアクセス

マークダウンファイルの内容は表示されますが
コードブロックは少々見辛い状態です

<img width="342" alt="スクリーンショット 2019-07-06 13.06.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/eaf314a6-327e-67ba-71cd-856f968e12a7.png">

## コードブロックに対してシンタックスハイライトをきかせる
[gatsby-remark-prismjs](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/?=pri)と[prismjs](https://prismjs.com/)をインストール

```sh:ターミナル
npm install --save gatsby-remark-prismjs prismjs
```

gatsby-remark-prismjsはgatsby-transformer-remarkのpluginsとして追加します
optionでの設定内容については割愛します

```javascript:gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            /*
              options: {
                classPrefix: "language-",
                inlineCodeMarker: null,
                aliases: {},
                showLineNumbers: true,
                noInlineHighlight: false,
                languageExtensions: [
                  {
                    language: "superscript",
                    extend: "javascript",
                    definition: {
                      superscript_types: /(SuperType)/,
                    },
                    insertBefore: {
                      function: {
                        superscript_keywords: /(superif|superelse)/,
                      },
                    },
                  },
                ],
              }
            */
          }
        ]
      }
    },
  ]
}
```

コードブロックのスタイルを適用するためにgatsby-browser.jsへ以下のように編集
※ 今回はprism-solarizedlightというテーマを適用
[他のテーマはこちら](https://github.com/PrismJS/prism/tree/1d5047df37aacc900f8270b1c6215028f6988eb1/themes)

```javascript:gatsby-browser.js
require("prismjs/themes/prism-solarizedlight.css");
```
`npm run develop`し直し
http://localhost:8000/ へアクセス
シンタックスハイライトがきいていれば成功です

<img width="363" alt="スクリーンショット 2019-07-06 12.47.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/4b56b325-bc89-9431-765a-c11085b4e825.png">

## コードブロックにタイトルをつける

[gatsby-remark-code-titles](https://www.gatsbyjs.org/packages/gatsby-remark-code-titles/?=title)をインストール

```sh:ターミナル
npm install --save gatsby-remark-code-titles
```
gatsby-transformer-remarkのpluginsとして追加しますが
必ず先頭に追加してください

```diff:gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
+         {
+           resolve: 'gatsby-remark-code-titles',
+         },
          {
            resolve: `gatsby-remark-prismjs`,
          }
        ]
      }
    },
  ]
}

```

コードブロックのタイトルはgatsby-code-titleというクラス名がデフォルトで割当たるため
cssで装飾していきます

```css:code-block-title.css
.gatsby-code-title {
  margin-bottom: -0.6rem;
  padding: 0.5em 1em;
  font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
    'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier,
    monospace;

  background-color: #ffd342;
  color: black;
  z-index: 0;

  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
}
```

先ほどのcssファイルを読み込む

```diff:gatsby-browser.js
  require("prismjs/themes/prism-solarizedlight.css");
+ require("./src/code-block-title.css");
```

マークダウンを編集
`hoge:title=任意のタイトル`でコードブロックに対してタイトルが付与されます

```markdown:code.md
---
title: "Syntax highlight"
date: "2017-08-21"
---

```javascript:title=greeting.js
const greeting = `Hello`;
console.log(greeting);
```　
```

`npm run develop`し直し
http://localhost:8000/ へアクセス
タイトルも表示されました
お疲れ様です
<img width="386" alt="スクリーンショット 2019-07-06 12.46.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241915/d5d5de8c-72a9-b9c7-c8da-08964395be66.png">

## 参考
https://takumon.github.io/gatsby-starter-qiita/f18d04ac-9b1a-5ac8-8d43-8aa3d8f746a7/#gatsby-remark-prismjs
https://reactgo.com/gatsbyblog/syntaxhighlighting/
https://haodong.io/adding-code-syntax-highlights-to-gatsby-blog