highlighter.rehype-pretty.pages.devrehype-pretty-codeとは?rehype-pretty-codeは名前の通りrehypeプラグインになります。このプラグインでもShikiを使ってシンタックスハイライトを行っています。前回の記事でも書きましたが、AstroでもデフォルトでShikiを使っているのになぜrehype-pretty-codeを使ったかというと、Astroでファイル名と行の強調表現のやり方が分からなかったからです。このブログでは⬇️のようにtitleと{}の中に書くことでファイル名や行の強調ができるようになります。}この記事では、ファイル名の表示と行の強調表現まで書きます。行番号の表示などのやり方はドキュメントを見てください。Astroで使うための準備astro.config.mjsでrehype-pretty-codeを使う準備をします。Astroでは標準でシンタックスハイライトが効いているのでsyntaxHighlightをfalseにします。デフォルトのテーマはgithub-dark-dimmedなのでテーマを変えたり、デフォルト言語を指定する際はdefaultLangで指定できるのでcodeOptionsに指定しましょう。Shikiのテーマはここから確認できます。行の強調表現機能を追加するために、rehype-pretty-codeのオプションを追加します。},};このオプションを追加することで、該当部分のクラスにhighlightedが付きます。自分の環境だとエラーが出たのでif(!node.properties)とif(!node.properties.className)で条件分岐させてます。デフォルトでは表示が変わらないのでハイライト用のクラスを以下のように追加します。data-rehype-pretty-code-title>にファイル名が表示されるのでこちらにスタイリングを追加します。👇はこのブログでのファイル名のスタイリングになります。codeでpadding-topを上書きしてます。まとめAstroでのコードブロックのハイライトにrehype-pretty-codeを使った実装方法を紹介しました。CSSについては、デフォルトでは用意されて無く自分でスタイリングをつける必要がありますが、その分自由にデザインできるのでいいですね。