Next.jsブログにShikiでシンタックスハイライトを入れてみた

このブログは、私が日々行き詰まったり発見したりしたことを書き留める、技術ブログの体で運営しています。

そう、技術ブログ。

このブログはMermaid表示には当初からこだわっていました。 MySQLのテーブル構成図書いたり、いろんな図に使えるはず！ そう思って対応しました。

一方、コードブロックはというと。

酷すぎる笑

AIが生成したコードかどうか以前に、表示そのものがとにかく読みづらい状態でした。

これはいかん、と思って対応したシンタックスハイライトについて、今日はお話ししたいと思います。

きっかけ

ブログ開発時点から、数件ほどSQLの記事がありました。

その中にMermaid表記しているものがあり、ブログのMVPとしてMermaidは絶対入れたいと思っていました。

ただ一方で疎かになってしまったコードブロック。

いざブログを書き進めていくと、私はMermaidよりコードブロックの方が登場シーンが多いことに気づき始めました。

これは、、早急に読みやすく改善しなければ・・・！

そういう使命感で、シンタックスハイライトについて調べ始めました。

Shikiを導入

このブログで導入したのは、Shiki。

見慣れたVSCodeライクな見た目で、言語に応じたコードの色分けを行なってくれます。

Shiki公式サイトではテーマのPlaygroundも用意されていてイメージがつきやすかったのが決め手でした。

導入方法は本当に簡単。これだけです。

pnpm add shiki

テーマ選び

私は普段の開発環境ではSolarizedを好んで使うのですが、 流石にこのブログには浮いて見えてダメだったので断念。

最終的にはGithub系のテーマを使うことにしました。

のですが。

ライトモードは確かに良さそう。 白背景に馴染んで見えるけど、枠線も確かにあって見た目はいい。

問題は、ダークモード。 なんか、、悪目立ちをしていらっしゃる笑 Solarizedよりはマシだけども。

ここから少しだけ、CSSに手を加えました。

コードブロックはこんな感じでコンポーネント定義しています。

export async function CodeBlock({ code, language }: CodeBlockProps) {
  let html: string | null = null

  try {
    html = await codeToHtml(code, ...)

  return (
    <div className="post-code-block">
      <p className="post-code-block-language">{language}</p>
        <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  )
}

今回ダークモードだけ触りたいので、変更するのはここ。

:root[data-theme='dark'] .post-code-block {
  --post-code-background: #24292e;
  --post-code-foreground: #e1e4e8;
  --post-code-border: #1b1f23;
  --post-code-header-background: #1f2428;
}

コード背景をさらに暗くして、文字は少し明るく変更。 あわせて枠線とヘッダー背景も調整し、ダークモード全体に馴染むようにしました。

:root[data-theme='dark'] .post-code-block {
  --post-code-background: #11161c;
  --post-code-foreground: #e6edf3;
  --post-code-border: #30363d;
  --post-code-header-background: #161b22;
}

そうして出来上がったのがこちら。 うむ！かっこよくなった！気がする！（主はデザイン面に明るくありません笑）

今回の学び

というわけで、最初の問題コードと改善コードの比較がこちら。 Before / Afterで比べると、違いは一目瞭然でした。

個人的に、この違いは画期的でした。大満足！ これで安心してこれからの記事を書いていけます。

結論。

Shikiを導入して、言語別シンタックスハイライトは比較的簡単に対応できる。 あとはサイトの雰囲気に合わせてテーマ選び・カスタマイズしていけば、 より満足度の高い結果が得られる。

とても満足度の高い改善でした。