GatsbyJSで作っているブログでコードブロックの行数を表示できるようにして、プラグインの中身を少し読んでみた

2019-12-15

はじめに

ギフティ Advent Calendar 2019 - Qiitaの15日目の記事。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっている。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、その過程をまとめる。今回はコードタイトルで使用していたプラグインに課題を見つけたので、その代替案を示す。

前提

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

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

やりたいこと

コードブロックにタイトルを付けたい、かつ、行数を表示したい、かつ、指定した行数をハイライトしたい。

課題感

タイトルの表示に gatsby-remark-code-titles を使っていたのだが、上記を実現しようとすると、タイトルが上手く表示されないなどの不具合が見つかった。

デモ

Markdown
```js{numberLines: 1,2-3,5}:title=/src/pages/index.js
let hoge = "piyo"
console.log(hoge)
let foo = "bar"
console.log(foo)
let kiku = "nantoka"
console.log(kiku)
```

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

let hoge = "piyo"
console.log(hoge)
let foo = "bar"
console.log(foo)
let kiku = "nantoka"
console.log(kiku)

こんな感じで表示される。

どうやるか

やったこと

  • npm installする
console
$ npm install -S prismjs gatsby-remark-prismjs
  • gatsby-configに追加する
gatsby-config.js
module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-prismjs-title`,          `gatsby-remark-prismjs`,
  • スタイルはgatsby-remark-code-titlesを追加する際に追加したものがそのまま活かせた
/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
  • あとは、不要になったgatsby-remark-code-titlesを削除する
console
$ npm uninstall -S gatsby-remark-code-titles

プラグインのコードを少し読んでみた

なぜgatsby-remark-code-titlesでは、行数表示とタイトル表示が上手くいかなかったのか、gatsby-remark-prismjsはどう違うのか、気になったので、ついでに各々のプラグインのコードの中身も覗いてみた。

gatsby-remark-code-titles/index.js at master · DSchau/gatsby-remark-code-titles gatsby-remark-prismjs-title/index.js at master · otanu/gatsby-remark-prismjs-title

どちらも50行以下で書かれている。

gatsby-remark-code-titlesはマークダウンをパースして、コードブロックのlangの部分から : をベースにタイトルを探しに行っているので、行数を表示するための numberLines: 1 のような : が含まれる記述があると、上手くタイトルが表示できていない。 一方で、gatsby-remark-prismjsは :title= をベースにタイトルを探しに行くアプローチを取っているので、行数表示との併用が上手くいっている。

コードリーディングをしたことで、簡単なマークダウン拡張のプラグインなら書けそうだなという気持ちになった。機会があれば書いてみたい。

さいごに

行数を表示できることで、さらに解説しやすくなった。

キクナントカ

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