方法1：グローバルCSSを使う

src/styles/global.css を作成する。

article h2 { font-size: 1.5rem; margin-top: 2rem; }
article p { line-height: 1.8; margin-bottom: 1rem; }
article code { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; }
article pre { background: #1e1e1e; color: #d4d4d4; padding: 1rem; border-radius: 8px; overflow-x: auto; }

レイアウトファイルでインポートする。

---
import '../styles/global.css';
---

レイアウトファイルの設定

---
title: '記事タイトル'
layout: '../../layouts/PostLayout.astro'
---

ハマったポイント

  • Markdownから生成されたHTMLには自動でクラスが付かない
  • レイアウトファイルのパスはMarkdownファイルからの相対パス

関連記事