Shiki で行番号を表示する

人気のシンタックスハイライトライブラリに Shiki というものがあります。
今回、このサイトでも使用していて、簡単にセットアップできるのですが、なぜか行番号の表示だけはできません。

で、なんとかする方法はないかと調べてたところ、同じことを考えている人が Issue を作っていました。
そして、その中のやり取りを見ると、どうやら CSS でうまいことできるらしいとのこと。

Line numbers · Issue #3 · shikijs/shiki

Would it be possible to add support for line numbers? Bonus points for not restricting you to auto-generate them either. For example, when showing a Git diff, the line numbers will change.

github.com

ということで、こちらで例示されていたコードをもとにスタイルを作成しました。

pre {
  padding: 1em 0;

  code {
    counter-reset: step;
    counter-increment: step 0;

    :global(.line) {
      &::before {
        display: inline-block;
        content: counter(step);
        counter-increment: step;
        width: 2rem;
        margin-right: 1.5rem;
        text-align: right;
        color: rgba(255, 255, 255, 0.38);
      }
    }
  }
}

そのままだと、上下の余白がアレなので pre に対して padding を追加しました。

インラインコードを強調

ところでシンタックスハイライトとは別に、文中でインラインコードを書くこともよくあります。
これもハイライトしたいので、先程の下に追記します。

code {
  border: 1px solid #0d47a1;
  color: #bbdefb;
  background-color: #1a237e;
  padding: 8px 6px;
  border-radius: 8px;
}

ただ、こうすると、コードブロックの中の、つまり pre の中の code まで強調されておかしくなってしまうので、改めて pre > code という構造になってるときは追加した装飾をリセットしました。

尚、文字色については Shiki によってインラインスタイルが追加されるので放っておいても問題なさそうだったので上書きはしてません

思いっきりプレーンテキストとかが緑色になったのでとりあえず unset 追加しました。

pre > code {
  background: none;
  border: none;
  padding: 0;
  color: unset;
}