Gatsbyで作成したBlogのシンタックスハイライトをVSCodeのテーマにしたい

Gatsby

Gatsbyのインストール

$ npm install -g gatsby-cli

Gatsby starter blog

gatsby-starter-blogをインストール

$ gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

開発サーバーを起動

$ cd gatsby-starter-blog
$ gatsby develop

gatsby-starter-blogのシンタックスハイライト

プラグインのインストール

• gatsby-remark-prismjs

$ npm install gatsby-transformer-remark gatsby-remark-prismjs prismjs

gatsby-config.js の設定

pluginをインストールしたらgatsby-config.jsに使用するプラグインの設定を記述します。

gatsby-remark-prism は gatsby-transformer-remarkのプラグインなので、gatsby-remark-prism の plugins 内に記述します。

/gatsby-config.js

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
          options: {
            classPrefix: "language-",
            inlineCodeMarker: null,
            aliases: {},
            showLineNumbers: true,
            noInlineHighlight: false,
          },
        },
      ],
    },
  },
]

CSS ファイルの作成

任意のファイル名でsrc/にcssファイルを作成します。
gatsby-bowser.jsに作成したcssファイルをimportしないと反映されません。

ファイル名をsrc/prism.cssで作成した場合

gatsby-browser.js

- import "prismjs/themes/prism.css"
+ import "./src/prism.css"

VSCode テーマの設定

VSCode Dark+

• GitHub - prism-themes/themes/prism-vsc-dark-plus.css

その他の VSCode のテーマや、ATOM のテーマもあります。

• GitHub - prismjs-themes

開発サーバーを再起動

$ gatsby develop

全く同じようにやってもエラーが起きる場合は下記コマンドで治る場合が多いです。

$ gatsby clean
$ gatsby develop