はじめに
Astroで作成したこのブログのコードハイライトのプラグインにrehype-pretty-codeを使ったので実装方法などを書く🔮(👇ドキュメントが詳しく書かれているのでこちらを見たほうがいいかもです)
Rehype Pretty Code
Beautiful code blocks for Markdown or MDX powered by the Shiki syntax highlighter.
rehype-pretty.pages.dev
rehype-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)
で条件分岐させてます。
デフォルトでは表示が変わらないのでハイライト用のクラスを以下のように追加します。
ファイル名のスタイリング
rehype-pretty-codeを使うことでMarkdownにtitleを記入すると<figure data-rehype-pretty-code-figure>
直下に<figcaption data-rehype-pretty-code-title>
にファイル名が表示されるのでこちらにスタイリングを追加します。
👇はこのブログでのファイル名のスタイリングになります。
ここでファイル名が無い場合に上の余白が空いてしまうので& + pre > code
でpadding-top
を上書きしてます。
まとめ
Astroでのコードブロックのハイライトにrehype-pretty-codeを使った実装方法を紹介しました。
CSSについては、デフォルトでは用意されて無く自分でスタイリングをつける必要がありますが、その分自由にデザインできるのでいいですね。
参考サイト
Code Blocks Perfected: Astro and Rehype-pretty-code Tutorial | kohan.dev
Build great looking code blocks with custom styling, titles, line highlighting and numbering.
kohan.dev