Rehype Pretty Code で、コードブロックに行番号を付け、特定の行をハイライトする
前回は、 Rehype Pretty Code (rehype-pretty-code) を使ってシンタックスハイライトを適用し、テーマを変更するところまで行いました。
今回は、さらに踏み込んで、行番号を付けたり、コードブロック内の特定の行をハイライトする方法を紹介します。
Rehype Pretty Code では、シンタックスハイライトされるコードブロックの設定を、 meta string を通して行えます。
例えば、次のようにマークダウンを書きます。 Meta string とは showLineNumbers title="add.js" {3} の部分を指します。
```js showLineNumbers title="add.js" {3}
const add = (a, b) => a + b
add(2, 3) // 5
```上のマークダウンは、次のように表示されます。
const add = (a, b) => a + b;
add(2, 3); // 5ただし、 Rehype Pretty Code は、スタイリング部分は提供してくれないので、別途 CSS を書く必要があります。
それでは、実際の作業に入っていきましょう。まずは CSS を適用するための準備から。
Rehype Pretty Code に CSS を適用する準備
はじめに、CSS を記述するためのファイル（styles/syntax-highlighting.css）を作成します。
touch styles/syntax-highlighting.cssそして、このファイルを styles/global.css から読み込みます。
@tailwind base;
@tailwind components;
@tailwind utilities;
@import './syntax-highlighting.css';これで CSS を適用する準備が整ったので、 CSS の中身を書いていきましょう。 CSS では Tailwind CSS の @apply を使用しています。
コードブロック全体のスタイリング
Rehype Pretty Code を適用後は、コードブロックをラップする figure 要素に data-rehype-pretty-code-figure という data attribute が付きます。なので、次のようにコードブロック全体をスタイリングできます。
figure[data-rehype-pretty-code-figure] {
/* ... */
}今回は、次のようにスタイリングしています。併せて、子要素の pre にもスタイルを適用しています。
figure[data-rehype-pretty-code-figure] {
@apply my-5 overflow-hidden rounded-lg border border-gray-600 bg-gray-900;
}
figure[data-rehype-pretty-code-figure] pre {
@apply m-0 rounded-lg bg-gray-900 px-0;
}px-0 で横側の padding を 0 にしているのは、行のハイライトをコードブロック全体に行き渡らせるためです。次の工程で行ごとに padding を当てていきます。
では、次にコードブロックの行をスタイリングしていきます。
行のスタイリング
Rehype Pretty Code では、コードブロック内の各行に対して data-line という data attribute が追加されます。なので、行のスタイリングは、 data-line に対して行っていきます。
[data-line] {
@apply border-l-[3px] border-transparent px-4;
}ここで、透明の border を適用しているのは、ハイライト時に色を付けるためです。
それでは次に、ハイライト表示するための設定とそのスタイリングを行っていきます。
特定行のハイライト
マークダウンでのハイライト指定
Rehype Pretty Code で行をハイライトするには、マークダウンのコードブロックで {3} のように記述します。
範囲を指定する場合は {1-3} 、複数行を指定する場合は {1,3} のように書きます。
```js title="add.js" {3}
const add = (a, b) => a + b
add(2, 3) // 5
```これで、マークダウンのコードブロックで {3} と書いた場合に、3行目に data-highlighted-line という data attribute が追加されます。
ハイライト部分のスタイリング
data-highlighted-line に対してスタイリングを行います。 border-color と background-color を指定します。
[data-highlighted-line] {
@apply border-teal-400 bg-teal-700/30;
}次はコードブロック用のタイトル部分の設定です。
コードブロック用タイトル
マークダウンでのタイトル指定
タイトルを設定するには、マークダウンのコードブロックに title="..." を使用します。
```js {3} title="add.js"
const add = (a, b) => a + b
add(2, 3) // 5
```title="..." を使うと、 次のような要素が HTML に挿入されます。
<figcaption data-rehype-pretty-code-title="" data-language="js" data-theme="default">
add.js
</figcaption>data-rehype-pretty-code-title という data attribute を持つ figcaption 内に、 title="..." の値（ここでは add.js）が入っています。
それでは、この要素に対してスタイリングしていきましょう。
タイトル関連のスタイリング
ここでは、タイトル部分に加えて、タイトルに隣接する pre 要素にもスタイルを適用しています。
figure[data-rehype-pretty-code-figure]
> [data-rehype-pretty-code-title]
+ pre {
@apply -mt-[1px] rounded-t-none border-t border-gray-600;
}
[data-rehype-pretty-code-title] {
@apply relative z-10 mx-2 mt-2 block w-fit
rounded-t border-x border-t border-gray-600
bg-inherit px-2 py-1.5 text-sm leading-none text-gray-400;
}タイトルがある場合には、 pre の上側の border-radius をなくして border を追加しています。 margin-top を -1px にしているのは、エディターのタブっぽい見た目にするためです。
適用後は次のようになります。
最後に、行番号を追加し、スタイリングしていきます。
行番号
行番号を表示するには、マークダウンのコードブロックに showLineNumbers を追記します。
```js {3} title="add.js" showLineNumbers
const add = (a, b) => a + b
add(2, 3) // 5
```次に、 lineNumber をインクリメントするための記述と、 lineNumber の表示を行います。ついでに他のスタイリングも行います。
code[data-line-numbers] > [data-line]::before {
@apply mr-3 inline-block w-4 text-right text-gray-600
content-[counter(lineNumber)]
[counter-increment:lineNumber];
}さいごに
Rehype Pretty Code を使って、適宜 CSS を用意すれば、美しく、かつわかりやすいシンタックスハイライトを導入できます。
CSS については、デフォルトで用意されているものがないので、自身で用意する必要がありますが、デフォルトのスタイリングがない分、自由にできるのがありがたいですね。
参考