Gosuke Miyashita

Nebelにシンタックスハイライト機能を追加した

2026-01-29 18:55:03 +0900

最近このブログは、 Carina の開発進捗報告の場と化して更新頻度が上がっているので、ブログ自体にも手を入れていっている。

2日前には OGP画像自動生成機能を追加した が、今回はコードのシンタックスハイライト機能を追加した。

実装内容

Markdownパーサとして使っている goldmark に、 goldmark-highlighting 拡張を追加した。バックエンドには Chroma というGo製のシンタックスハイライターを使っている。

テーマは Catppuccin Mocha を採用した。パステル調のダークテーマで、紫・青・緑・オレンジ・ピンクの柔らかい配色が特徴。ブログの背景が白なので、ダークテーマの方がコードブロックが目立つかな、と思って選んだ。

使い方

Markdownで言語を指定してコードブロックを書くと、自動的にハイライトされる。

たとえばJSONを書くとこうなる。 

{
  "name": "example",
  "version": "1.0.0"
}

Bashだとこう。 

$ echo "Hello, World!"

Carina言語のサポート

せっかくなので、開発中の Carina 用のカスタムレクサーも追加した。Chromaはカスタムレクサーを定義できるので、独自言語のハイライトも可能。 

backend s3 {
  bucket      = "my-carina-state"
  key         = "prod/carina.crnstate"
  encrypt     = true
  auto_create = true
}

let main_vpc = aws.vpc {
  name       = "main-vpc"
  cidr_block = "10.0.0.0/16"
}

キーワード、文字列、真偽値、リソースタイプなどが適切にハイライトされる。

CSSの統一

言語指定ありのコードブロックはChromaでハイライトされるが、言語指定なしのコードブロックは素の <pre> タグで出力される。見た目を統一するため、 base.css の pre スタイルもCatppuccin Mochaテーマに合わせた。

また、コードブロックのフォントサイズを本文と同じ16pxにして、読みやすさを向上させた。 

言語指定なしのコードブロックも
同じダークブルー背景で表示される

まとめ