gatsby-starter-blogでコードのシンタックスハイライトを設定

gatsbyjs/gatsby-starter-blog で作成したブログはデフォルトの状態ではコードのシンタックハイライトが無く非常に見辛いです。
プラグインを設定してシンタックハイライトを導入します

プラグインの導入

gatsby-starter-blog には最初から gatsby-remark-prismjs がプラグインとしてインストールされています。
そのため、新たにプラグインをインストールする必要はなく、ハイライトのcss読み込み設定を修正するだけでシンタックハイライトを有効化できます。

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,  // 初期状態でインストール済み
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },

CSSの読み込み設定

gatsby-browser.jsにて prismjs のテーマのCSS読み込みを追記します。
デフォルトで利用できるテーマの一覧は PrismJS/prism/themes で確認できます。

import "prismjs/themes/prism-tomorrow.css"

シンタックハイライトを利用

pre記法に言語タグを指定することでシンタックハイライトを利用できます。
利用可能な言語タグの一覧は prismjs の公式ページに記載してあります。

```js
console.log('シンタックハイライトだよ')
```