Astro で Markdown を GitHub っぽく表示する
概要
Astro はファイルベースルーティングなので /src/pages/ ディレクトリ内に .md ファイルを配置するだけで、Markdown を HTML に変換してルートに応じたページを作成してくれます。便利ですね！
Markdown ファイルの内容を HTML に変換はしてくれるものの、スタイル指定が無いので見た目が微妙です。。
そこで、github-markdown-css というライブラリを使ってスタイルを整えてみたいと思います。このライブラリを使うことで Markdown ファイルの内容を GitHub っぽい見た目で表示できるようになります。最終的な見た目はこんな感じです。
ちなみに、対象のファイルの中身はこちらです。
Astro プロジェクト作成と Markdown ファイルを表示
Astro のドキュメントどおりにコマンド実行するとプロジェクトが作成され開発サーバーが起動します。
pnpm create astro@latest
cd <My Project>
pnpm dev
src/pages/page/index.md を作成して http://localhost:4321/page/ にアクセスすると .md ファイルに書いた内容が表示されるはずです。
スタイルの調整
ライブラリをインストールします。css のコードは、CDN も配信されていますが今回は pnpm 経由でダウンロードしました。
pnpm add github-markdown-css
Astro ではレイアウトをコンポーネントとして作成し、.md ファイル内でそれを指定して使うことが出来ます。Astro のレイアウトについてはこちら。
今回は src/layouts/MarkdownLayout.astro を作成してレイアウトを定義しておきます。css の内容はライブラリの README を参考にしました。
このレイアウトを対象のページに反映します。.md ファイル上部にコードフェンスを作って layout: で指定します。
これでスタイルが反映されて、いい感じの見た目になるはずです。
【おまけ】ダークモード対応
このライブラリはデフォルトでダークモードに対応しており、@media (prefers-color-scheme) の値を元に自動的にライト・ダークモードを切り替えてくれます。この値が OS の設定を取得するので、ウェブページ上の操作で切り替えることが出来ません。
手動で切り替えできるようにするため、今回は以下のように対応しました。
- ライトモードの CSS のみ使用
-
darkクラスを追加したり削除する処理を JS で実装
ライトモードのみ使いたいのでインポート元を以下のように変更。
ユーザー操作用のコンポーネントを作成します。script タグでは is:inline を指定することで Astro 側での不要なバンドルを避けることができます。（スクリプトとイベントハンドリングより）
上記の script では以下の処理を行っています。
-
window.matchMedia("(prefers-color-scheme: dark)")から OS の設定がライトモードかダークモードかを取得してthemeに代入 -
themeの値で判定して html タグにdarkクラスを追加または削除 - ボタンを押した際は
toggle()を使ってdarkクラスの追加または削除 -
onchangeを使って OS の設定変更検知
これで、右上の太陽とか月をクリックするとライト・ダークモードが切り替えできるようになります。ダークモードだとこんな見た目です。
参考
▼ Astro のドキュメントです。日本語対応しているのはありがたいですね。
▼ github-markdown-css のリポジトリです。
▼ prefers-color-scheme に関する説明です。
▼ 今回作成した最終的なコードです。
Discussion