Qiitaの15日目の記事。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっている。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、その過程をまとめる。今回はコードタイトルで使用していたプラグインに課題を見つけたので、その代替案を示す。前提このブログはGatsby公式のgatsby-starter-blogをベースに作られている。blogやりたいことコードブロックにタイトルを付けたい、かつ、行数を表示したい、かつ、指定した行数をハイライトしたい。使っていたのだが、上記を実現しようとすると、タイトルが上手く表示されないなどの不具合が見つかった。"nantoka"console.log(kiku)こんな感じで表示される。gatsby-remark-code-titlesプラグインのコードを少し読んでみたなぜgatsby-remark-code-titlesでは、行数表示とタイトル表示が上手くいかなかったのか、gatsby-remark-prismjsはどう違うのか、気になったので、ついでに各々のプラグインのコードの中身も覗いてみた。otanu/gatsby-remark-prismjs-titleどちらも50行以下で書かれている。含まれる記述があると、上手くタイトルが表示できていない。ベースにタイトルを探しに行くアプローチを取っているので、行数表示との併用が上手くいっている。コードリーディングをしたことで、簡単なマークダウン拡張のプラグインなら書けそうだなという気持ちになった。機会があれば書いてみたい。さいごに行数を表示できることで、さらに解説しやすくなった。キクナントカソフトウェアエンジニアをしています。趣味でボードゲームを制作したり、個人開発でNakamyというサービスを開発しています。GatsbyJSで作っているブログでコードブロックで指定した行数がハイライトされるようにした2019年の振り返り。