Rehype Pretty Codeを使いこなす

全4回

MarkdownやMDXを利用して作成されているコンテンツ中のコードブロックやインラインコードに、シンタックスハイライトや行番号、コードタイトルやキャプションなどを付与できるライブラリ、Rehype Pretty Codeを紹介します。

第4回 コードブロックで使えるレシピ集

コンテンツに生かせるアイデアとして、特定の文字列のハイライト機能の活用法を紹介します。また、Markdownの簡潔さはそのままに、コードブロックに言語名やタイトルの表示も追加できます。

第3回 行番号と行の強調ハイライト

コードブロックに付与できるメタ情報を使って、行番号の表示と、注目させたい行のハイライト強調表示を行ってみましょう。

第2回 インラインコードとテーマの変更

前回のコードブロックのシンタックスハイライトに加え、インラインコードのシンタックスハイライト、テーマの変更、ダークモードへの対応を解説します。

第1回 導入とコードブロックのスタイリング

シンタックスハイライトを実現するRehype Pretty Codeを紹介します。第1回目はAstroプロジェクトへのRehype Pretty Codeの導入と、コードブロックの基本的なスタイリングについて解説します。