Gatsby.js で作っているブログでコードブロックにタイトルをつけられるようにした

2019-12-11

はじめに

ギフティ Advent Calendar 2019 - Qiitaの11日目の記事。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっている。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、その過程をまとめる。前回に引き続いて、今度はタイトルを入力できるようにしたので、その解説をする。

前提

このブログはGatsby公式のgatsby-starter-blogをベースに作られている。

gatsbyjs/gatsby-starter-blog: Gatsby starter for creating a blog

やりたいこと

コードブロックにタイトルを付けたい。例えば、ファイル名など。

デモ

Markdown
```js:title=/src/pages/index.js
let hoge = "piyo"
console.log(hoge)
```

こんな感じのマークダウンを書くと、

/src/pages/index.js
let hoge = "piyo"
console.log(hoge)

こんな感じで表示される。注目点は左上に付いているタイトルだ。

どうやるか

やったこと

  • npm installする
console
$ npm install -S gatsby-remark-code-titles
  • シンタックスハイライトの時と同じく、gatsby-transformer-remarkのオプションのプラグインとして、登録する
gatsby-config.js
module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-code-titles`,          `gatsby-remark-prismjs`,
  • あとは、好みに合わせて、スタイルをカスタマイズする

    • このブログでは下記のスタイルが適用されている
/src/components/global.module.sass
\:global
  ...
  .gatsby-code-title
    background: #999
    color: #eee
    margin: 24px 0px -24px
    padding: 6px 12px
    font-size: 0.8em
    line-height: 1
    font-weight: bold
    display: table
    border-radius: 4px 4px 0 0

さいごに

コードを解説しやすくなってきた。

キクナントカ

ソフトウェアエンジニアをしています。趣味でボードゲームを制作したり、個人開発でNakamyというサービスを開発しています。詳しくはこちら