CodeGrid連載Rehype Pretty Codeを使いこなすのデモコードです。
Rehype Pretty Codeを実際にAstroプロジェクトに導入し、Markdownページでのコードの表示をカスタマイズする例を示しています。
作業段階ごとにブランチを分けて掲載しています。
Rehype Pretty Codeはまだ導入していない状態のサンプルAstroプロジェクトです。
Rehype Pretty Codeを導入し、オプション指定やスタイル追加などのカスタマイズを行う前の状態です。
コードブロックに基本的なスタイルを当てた状態です。
インラインコード表示に必要なスタイルやオプションを指定した状態です。
配色テーマをオプションで指定し、ライトモードとダークモードに応じた表示を実現した状態です。
行番号の表示を実現するサンプルです。
特定の行のハイライト表示を実現するサンプルです。
特定の変数が使われている箇所をハイライト表示するサンプルです。
ハイライト箇所に番号を表示し、コードブロックの下に各番号に対応する解説を添えたコンテンツを実現するサンプルです。
単一のトークンを表示するインラインコードにトークンIDを指定することで、正確なシンタックスハイライトを適用したサンプルです。
コードブロックに言語名を表示したサンプルです。
タイトル付きのコードブロックを実現するサンプルです。
onVisitLineフックの引数に渡されるhASTオブジェクトをJSON形式で表示し、構造を理解するためのサンプルです。
hast-util-to-stringのtoStringメソッドを使って、hASTオブジェクトから、その要素が表示するテキストを取り出すサンプルです。
Visitor Hooksを使って、色コードの直前にプレビューを表示する機能を実装したサンプルです。
- 初めて実行する際は、
npm iで依存ライブラリをインストール - 表示確認をする際は、
npm run devで開発サーバーを起動
src/pages配下にある.mdファイルを編集してください。
src/styles配下にある.cssファイルを編集してください。
新規CSSファイルを追加する場合は、
src/styles配下に設置src/layouts/Layout.astroにimport文を追加
このAstroプロジェクトは、次のコマンドによって作成されました。
npm create astro@latest -- --template minimalAstroについての詳細は、次のリンクを参考にしてください。