Rehype Pretty Codeを使いこなす
- カテゴリー
- JavaScript >
- ライブラリ
全6回
MarkdownやMDXを利用して作成されているコンテンツ中のコードブロックやインラインコードに、シンタックスハイライトや行番号、コードタイトルやキャプションなどを付与できるライブラリ、Rehype Pretty Codeを紹介します。
最終回 Visitor Hooksで実現するインライン色プレビュー 後編
前編では、直前にプレビューを追加したいトークンを特定して抽出する処理を行いました。後編ではトークンを場合分けし、色プレビューを付与する処理を行います。
第5回 Visitor Hooksで実現する色プレビュー 前編
コード中に色を表すコードが出現した場合、その色が実際にどんなものなのかを示すプレビューを表示できると便利そうです。コードエディタにはよくある機能ですが、これをRehype Pretty CodeのVisitor Hooksを使って実装します。
第4回 コードブロックで使えるレシピ集
コンテンツに生かせるアイデアとして、特定の文字列のハイライト機能の活用法を紹介します。また、Markdownの簡潔さはそのままに、コードブロックに言語名やタイトルの表示も追加できます。
第3回 行番号と行の強調ハイライト
コードブロックに付与できるメタ情報を使って、行番号の表示と、注目させたい行のハイライト強調表示を行ってみましょう。
第2回 インラインコードとテーマの変更
前回のコードブロックのシンタックスハイライトに加え、インラインコードのシンタックスハイライト、テーマの変更、ダークモードへの対応を解説します。
第1回 導入とコードブロックのスタイリング
シンタックスハイライトを実現するRehype Pretty Codeを紹介します。第1回目はAstroプロジェクトへのRehype Pretty Codeの導入と、コードブロックの基本的なスタイリングについて解説します。