PrismをShikiに移行

[cm-igarashi-ryosuke]

📑 Summary

Prism.js を Shiki に移行しました。

主な変更点

アーキテクチャ

• 非同期処理: markdown-it の同期的なレンダラーと Shiki の非同期 API を統合するため、3フェーズ方式を採用
  1. Phase 1 (収集): コードブロックを検出し、プレースホルダーを挿入
  2. Phase 2 (ハイライト): Promise.all で全コードブロックを並列ハイライト
  3. Phase 3 (置換): プレースホルダーをハイライト済み HTML に置換
• 遅延ロード: 言語定義を必要に応じてロード（メモリ効率）
• transformers API: Shiki の transformers を使用して AST レベルで変換

機能

• シンタックスハイライト: Shiki の github-dark テーマを使用
• diff モード: 行頭の +/- を検出して背景色を適用
• ファイル名表示: コードブロックのファイル名表示を継続サポート

変更ファイル

• packages/zenn-markdown-html/src/utils/highlight.ts: Shiki によるハイライト処理
• packages/zenn-markdown-html/src/utils/md-renderer-fence.ts: 3フェーズ処理の実装
• packages/zenn-content-css/src/_shiki.scss: Shiki 用 CSS
• packages/zenn-markdown-html/src/sanitizer.ts: pre と span に style 属性を許可

移行断念

• [機能要望] diff-languageのプレフィックスを選択できないようにする #148 (diff の +/- 記号を選択不可にする機能)
  • Prism.js では ::before 擬似要素で実現していたが、Shiki では +/- が実テキストとして出力されるため

移行計画

既存記事の後方互換性を保つため、以下の手順で移行を進めます：

1. このPRをリリースする

   • 新規記事・更新記事は Shiki でハイライトされる
   • _prism.scss は残すため、既存記事も引き続きハイライトされる

2. 既存記事を Shiki で一括変換する

   • サーバー側で既存の HTML を Shiki 形式に再生成

3. _prism.scss を削除する

   • 全記事が Shiki 形式になった後、Prism.js 用 CSS を削除

📋 Tasks

プルリクエストを作成いただく際、お手数ですが以下の内容についてご確認をお願いします。

• 📖 Contribution Guide を読んだ
• 👩‍💻 canary ブランチに対するプルリクエストである
• zenn-cli で実行して正しく動作しているか確認する
• 不要なコードが含まれていないか( コメントやログの消し忘れに注意 )
• XSS になるようなコードが含まれていないか
• モバイル端末での表示が考慮されているか
• Pull Request の内容は妥当か( 膨らみすぎてないか )

より詳しい内容は Pull Request Policy を参照してください。

[cm-wada-yusuke]

[q] ここを書き換えると prism で変換したコードブロックのCSSが効かなくなりませんか？

[cm-igarashi-ryosuke]

そのとおりです！修正します！