@shinyaz

rehype-pretty-code は言語指定なしのコードブロックを正しく変換できない

約1分

TIL のコードブロックがページ上でうまく表示されていなかった。該当箇所を確認すると、言語指定なしの ``` で開始されていた。

このブログでは rehype-pretty-code でシンタックスハイライトを処理している。言語指定がないとパーサーがトークナイズに失敗し、HTML 構造が壊れてしまう。

- ```
+ ```text
  # Content creation ({type}-guide)
  post-guide
  til-guide

コード以外のプレーンテキストやディレクトリ構造を載せる場合は text を指定すればよい。rehype-pretty-code に限らず、shiki ベースのハイライターは一般的に言語指定を前提としているので、MDX では常に言語を明示する癖をつけておくと安全だ。

共有する

田原 慎也

田原 慎也

ソリューションアーキテクト @ AWS

AWS ソリューションアーキテクトとして金融業界のお客様を中心に技術支援を行っています。クラウドアーキテクチャや AI/ML に関する学びをこのサイトで発信しています。このサイトの内容は個人の見解であり、所属企業の公式な意見や見解を代表するものではありません。