はじめに
ギフティ Advent Calendar 2019 - Qiitaの15日目の記事。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっている。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、その過程をまとめる。今回はコードタイトルで使用していたプラグインに課題を見つけたので、その代替案を示す。
前提
このブログはGatsby公式のgatsby-starter-blogをベースに作られている。
gatsbyjs/gatsby-starter-blog: Gatsby starter for creating a blog
やりたいこと
コードブロックにタイトルを付けたい、かつ、行数を表示したい、かつ、指定した行数をハイライトしたい。
課題感
タイトルの表示に gatsby-remark-code-titles を使っていたのだが、上記を実現しようとすると、タイトルが上手く表示されないなどの不具合が見つかった。
デモ
```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)こんな感じで表示される。
どうやるか
- gatsby-remark-code-titlesの代わりにgatsby-remark-prismjs-titleを使う
やったこと
- npm installする
$ npm install -S prismjs gatsby-remark-prismjs- gatsby-configに追加する
module.exports = {
...
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-prismjs-title`, `gatsby-remark-prismjs`,- スタイルはgatsby-remark-code-titlesを追加する際に追加したものがそのまま活かせた
\: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を削除する
$ 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= をベースにタイトルを探しに行くアプローチを取っているので、行数表示との併用が上手くいっている。
コードリーディングをしたことで、簡単なマークダウン拡張のプラグインなら書けそうだなという気持ちになった。機会があれば書いてみたい。
さいごに
行数を表示できることで、さらに解説しやすくなった。
