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

2019-12-11

はじめに

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

前提

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

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

やりたいこと

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

デモ

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

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

let hoge = "piyo"
console.log(hoge)

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

どうやるか

• gatsby-remark-code-titlesを使う
  • gatsby-remark-code-titles | GatsbyJS

やったこと

• npm installする

$ npm install -S gatsby-remark-code-titles

• シンタックスハイライトの時と同じく、gatsby-transformer-remarkのオプションのプラグインとして、登録する

module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-code-titles`,          `gatsby-remark-prismjs`,

• あとは、好みに合わせて、スタイルをカスタマイズする
  • このブログでは下記のスタイルが適用されている

\: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

さいごに

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

キクナントカ

ソフトウェアエンジニアをしています。Flutter、Rails、GatsbyJSを主に触っています。趣味でボードゲームを制作したり、個人開発したりしています。詳しくはこちら。

おすすめのコンテンツ

GatsbyJSで最強のブログを作る

買ってよかったもの