Rehype Pretty Codeを使いこなす
- カテゴリー
- JavaScript >
- ライブラリ
全3回
MarkdownやMDXを利用して作成されているコンテンツ中のコードブロックやインラインコードに、シンタックスハイライトや行番号、コードタイトルやキャプションなどを付与できるライブラリ、Rehype Pretty Codeを紹介します。
第3回 行番号と行の強調ハイライト
コードブロックに付与できるメタ情報を使って、行番号の表示と、注目させたい行のハイライト強調表示を行ってみましょう。
第2回 インラインコードとテーマの変更
前回のコードブロックのシンタックスハイライトに加え、インラインコードのシンタックスハイライト、テーマの変更、ダークモードへの対応を解説します。
第1回 導入とコードブロックのスタイリング
シンタックスハイライトを実現するRehype Pretty Codeを紹介します。第1回目はAstroプロジェクトへのRehype Pretty Codeの導入と、コードブロックの基本的なスタイリングについて解説します。