H1 標題

H2 標題

H3 標題

H4 標題

H5 標題
H6 標題

文字樣式

普通文字。粗體，斜體，刪除線，inline code，粗體斜體。

這是一段比較長的段落，用來測試行距與最大寬度的設定是否舒適。工程師的 blog 最重要的是閱讀體驗，文字不能太擠也不能太散，行高約 1.75 是比較舒服的數值。

連結

外部連結，相對連結。

清單

無序清單

  • 第一項
  • 第二項
    • 巢狀項目 A
    • 巢狀項目 B
      • 更深一層
  • 第三項

有序清單

  1. 第一步
  2. 第二步
  3. 第三步

Task List

  • 建立 Astro 專案
  • 設定 GitHub Actions
  • 刻 Claude UI layout
  • 上線第一篇文章

Blockquote

這是一段引言。AI 不是來取代你的，而是來放大你的能力。

多行引言第一行

第二行，中間有空行。

程式碼區塊

TypeScript

interface Post {
  title: string;
  date: Date;
  tags: string[];
}


async function getPosts(): Promise<Post[]> {
  const posts = await getCollection("blog");
  return posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
}

Bash

Terminal window
pnpm create astro@latest blog -- --template minimal
cd blog && pnpm install
git push origin main

JSON

{
  "name": "blog",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build"
  }
}

無語言標記

純文字 code block
沒有 syntax highlight

表格

工具用途費用
Astro靜態網站生成免費
GitHub Pages部署免費
CloudflareDNS + Analytics免費
Umami Cloud進階 Analytics免費（基本）

圖片

Docker Desktop 顯示 OpenMemory 的服務正在運行
圖：這是用來測試 rehype-figure-caption plugin 的說明文字。

水平線

上方

下方

Admonitions

長程式碼（測試橫向捲動）

const result = await Promise.all(
  posts.map(async (post) => ({
    slug: post.slug,
    title: post.data.title,
    date: post.data.date,
    tags: post.data.tags,
  })),
);