GatsbyJSで作っているブログでコードブロックで指定した行数がハイライトされるようにした

2019-12-12

はじめに

ギフティ Advent Calendar 2019 - Qiitaの12日目の記事。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっている。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、その過程をまとめる。今回は指定した行数のハイライト。

前提

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

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

やりたいこと

コードブロック内で指定した行数をハイライトしたい。

デモ

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

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

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

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

ちなみに、複数行にも対応している。

```js{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-prismjsを使う
  • gatsby-remark-prismjs | GatsbyJS
• スタイルを適用する

やったこと

• 実は前々回、Prism.jsを適用した段階で行数ハイライトが機能としては使えるようになっていた
• あとはスタイルを適用する
  • 行数を表示するケース、しないケース、のどちらにも対応できるようなスタイルを書いた
• 行数表示とタイトルの組み合わせが相性が悪そう
  • gatsby-config.jsの方でgatsby-remark-prismjsのshowLineNumbersオプションをtrueにする分には行数もタイトルも上手く表示されるが、showLineNumbersオプションがfalseの状態で js{numberLines: 1}{1}:title=hogehoge みたいな書き方をすると上手くタイトルが表示されない事象を踏んだ

\:global
  ...
  .gatsby-highlight-code-line
    background-color: #444444
    display: block
    margin-right: -1em
    margin-left: -16px
    padding-right: 1em
    padding-left: 10px
    border-left: 6px solid #9f9

  .line-numbers .gatsby-highlight-code-line
    margin-left: -62px
    padding-left: 56px

  .line-numbers-rows
    margin: 16px

さいごに

ハイライトできると解説しやすくて良い。

キクナントカ

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

おすすめのコンテンツ

GatsbyJSで最強のブログを作る

買ってよかったもの