GatsbyJS製ブログに「コードタイトル設定機能」を追加する

GatsbyJS JavaScript

2020/10/10

GatsbyJSにはコードのシンタックスハイライト機能は初めから存在している。
が、コードタイトル設定機能は組み込まれていないため手動で追加が必要となる。

手順

①プラグインをインストールする

gatsby-remark-prismjs-titleプラグインをインストールする。
https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs-title/

※公式サイトではgatsby-remark-prismjs-add-titleと書かれているが、gatsby-remark-prismjs-titleが正しいよう。前者をインストールしようとすると404エラーが起こる。

zsh

❯  yarn add gatsby-remark-prismjs-title

②configファイルを設定する

gatsby-config.jsを編集し、プラグイン設定を追加する。

※コードブロックを使用する他のプラグインより前に定義する必要があるため、gatsby-remark-prismjsよりも上にgatsby-remark-prismjs-titleを追記する。

gatsby-config.js

{
  resolve: 'gatsby-transformer-remark',
  options: {
    plugins: [
      {
        resolve: 'gatsby-remark-images',
        options: {
          maxWidth: 750,
          quality: 90,
          linkImagesToOriginal: true,
        },
      },
      'gatsby-remark-prismjs-title',   // 記述追加
      'gatsby-remark-prismjs',
    ],
  },
},

③cssを設定する

prism.ts内のcss設定にコードタイトルのcssを追加する。

prism.ts

/* 以下追記 */
.gatsby-code-title {
  display: block;
  position: relative;
  font-size: 0.8rem;
  width: 100%;
  left: 1rem;
}
.gatsby-code-title span {
  display: inline;
  position: relative;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  color: #fff;
  background: rgba(52,152,219,0.2);
  border-bottom-right-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  padding: 3px;
  top: 1px;
}

好みに合わせてその他CSSも修正すれば機能は完成。

マークダウンによる記述方法

:title=表示するタイトルの形式で設定する。

例）JavaScriptの言語設定でコードタイトルをindex.jsにしたい場合
js:title=index.js

選択できる言語は以下公式ページ参照
https://prismjs.com/#supported-languages

Obake Engineer Blog