Markdown 樣式測試指南 (Markdown Style Guide)

#指南#introduction

Markdown 樣式測試指南 (Markdown Style Guide)

這是一篇用來測試和展示部落格內 Markdown 元素排版樣式的測試指南。透過這篇文章，你可以檢驗全域的 global.css 對於各種 Markdown 標籤的渲染是否美觀。

1. 標題測試 (Headings)

這是二級標題 <h2>。

1.1 三級標題 <h3>

1.1.1 四級標題 <h4>

2. 文字強調 (Typography)

你可以在這裡看到各類文字樣式的渲染：

  • 粗體字 (Bold)：使用 **bold**。
  • 斜體字 (Italic)：使用 *italic*。
  • 刪除線 (Strikethrough)：使用 ~~strikethrough~~。
  • 行內程式碼 (Inline Code)：使用 `inline code`。

3. 引用區塊 (Blockquotes)

接下來是引用（Blockquote）的樣式展示，這在說明或引導讀者時非常常用：

「極簡創業家（The Minimalist Entrepreneur）並不是要你把規模做小，而是要你從最精簡的基礎出發，專注於解決真實社群的痛點，以最快的速度實現獲利。」 —— Sahil Lavingia

4. 程式碼區塊 (Code Blocks)

這是程式碼區塊（Code Block）的渲染效果展示，通常會帶有適當的內距、圓角與暗色背景：

// 這是 Astro getStaticPaths 的動態路由生成範例
export async function getStaticPaths() {
  const allPosts = await getCollection('posts');
  return allPosts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}
// On-chain state updates demonstration
type StateUpdate = Key<[ trace | standard, modified, proper dynamic_ line-height ]>;

5. Alerts & Carousel Parser Tests

[!NOTE elevated=“true”] This is an elevated note for testing parser rendering.

> [!NOTE elevated="true"]
> Slide 1: Elevated note inside carousel test.
<!-- slide -->
> [!NOTE elevated="true"]
> Slide 2: Elevated note inside carousel test.

5. 表格測試 (Tables)

以下是資料表格的渲染樣式：

標籤類型 (Tag) 代表顏色 (Hex) 適用內容類型 寫作摩擦力
#隨筆 (essay) #d946ef (霓虹粉紫) 碎碎念、日常靈感、多巴胺碎片 極低
#指南 (playbook) #0ea5e9 (霓虹天藍) 程式開發筆記、外語學習步驟 中等
#作品 (showcase) #10b981 (霓虹翠綠) 二創音樂 Remix、Astro 模板販售 中等
#專題 (exploration) #f59e0b (霓虹橘黃) 哲學研究、經濟模型深度分析 高

6. 清單測試 (Lists)

無序清單 (Unordered List)

  • 探索多重潛能的邊界。
  • 消除寫作前的分類焦慮。
    • 物理目錄簡化為單一 posts 資料夾。
    • 先寫文，後打 Tag。
  • 實踐極簡變現。

有序清單 (Ordered List)

  1. 在本地端執行 npm install。
  2. 執行 npm run dev 啟動開發伺服器。
  3. 在瀏覽器開啟 http://localhost:4321/posts/markdown-style-guide 查看效果。