Back to Blog

Markdown 完整展示範例

#展示#教學#Markdown
Markdown 完整展示範例

Markdown 格式展示

這是一份示範用的 Blog Markdown 文件。
每個區塊都分成兩部分：

  • 效果：實際渲染出來會長什麼樣
  • 寫法：對應的 Markdown / HTML 原始內容

1. 基本 Markdown

標題

效果

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

寫法

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

強調

效果

粗體文字
斜體文字
粗體 + 斜體

寫法

**粗體文字**
_斜體文字_
**_粗體 + 斜體_**

清單

效果

  • 無序清單
    • 子項目 1
    • 子項目 2
  • 項目 2
  • 項目 3
  1. 有序清單
  2. 第二項
  3. 第三項

寫法

- 無序清單
  - 子項目 1
  - 子項目 2
- 項目 2
- 項目 3

1. 有序清單
2. 第二項
3. 第三項

連結

效果

Google

寫法

[Google](https://www.google.com)

行內程式碼

效果

這是行內程式碼：console.log("Hello World")

寫法

這是行內程式碼：`console.log("Hello World")`

多行程式碼

效果

const greeting = "Hello";
const name = "World";
console.log(`${greeting}, ${name}!`);

寫法

```javascript
const greeting = "Hello";
const name = "World";
console.log(`${greeting}, ${name}!`);
```

顯示檔名 + 行高亮

效果

app.ts
const greeting = "Hello";
const name = "World";
const message = `${greeting}, ${name}!`;
console.log(message);

寫法

```typescript filename="app.ts" {2-4}
const greeting = "Hello";
const name = "World";
const message = `${greeting}, ${name}!`;
console.log(message);
```

區塊引用

效果

這是一段引用文字 可以換行，格式會自動保持

寫法

> 這是一段引用文字
> 可以換行，格式會自動保持

分隔線

效果

寫法

---

表格

效果

姓名年齡職業
小明20工程師
小華22設計師
小美21全端工程師

寫法

| 姓名 | 年齡 | 職業       |
| ---- | ---- | ---------- |
| 小明 | 20   | 工程師     |
| 小華 | 22   | 設計師     |
| 小美 | 21   | 全端工程師 |

任務清單

效果

  • 已完成項目
  • 待完成項目

寫法

- [x] 已完成項目
- [ ] 待完成項目

2. 圖片

一般 Markdown 圖片

效果

範例圖片

寫法

![範例圖片](https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1200&auto=format&fit=crop)

可控制排版的圖片

支援參數：

  • data-width
  • data-align
  • data-ratio
  • data-fit

效果

可控排版圖片

寫法

<img
  src="https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1200&auto=format&fit=crop"
  alt="可控排版圖片"
  data-width="720px"
  data-align="center"
  data-ratio="16/9"
  data-fit="cover"
/>

圖片參數表

參數用途可用值
data-width控制圖片寬度720px, 100%, 60vw
data-align控制水平對齊left, center, right
data-ratio控制圖片比例16/9, 4/3, 1/1
data-fit控制圖片填充方式cover, contain, fill, none, scale-down

3. 區塊排版

使用原生 <div> 搭配 data-* 參數控制版型。

支援參數：

  • data-layout
  • data-surface
  • data-width
  • data-align

參數表

參數值效果
data-layoutstack垂直堆疊
data-layoutcolumns-2雙欄排版
data-surfacecard卡片式容器
data-width720px固定寬度
data-alignleft, center, right區塊對齊

垂直堆疊

效果

卡片一

這是一段內容。

卡片二

這是另一段內容。

寫法

<div data-layout="stack">
  <div data-surface="card">
    <h3>卡片一</h3>
    <p>這是一段內容。</p>
  </div>

  <div data-surface="card">
    <h3>卡片二</h3>
    <p>這是另一段內容。</p>
  </div>
</div>

雙欄排版

效果

左欄內容

這裡適合放摘要、說明、清單。

右欄內容

這裡適合放補充資訊或圖片。

寫法

<div data-layout="columns-2">
  <div data-surface="card">
    <h3>左欄內容</h3>
    <p>這裡適合放摘要、說明、清單。</p>
  </div>

  <div data-surface="card">
    <h3>右欄內容</h3>
    <p>這裡適合放補充資訊或圖片。</p>
  </div>
</div>

固定寬度 + 置中

效果

置中區塊

這個區塊會限制寬度並置中顯示。

寫法

<div data-surface="card" data-width="720px" data-align="center">
  <h3>置中區塊</h3>
  <p>這個區塊會限制寬度並置中顯示。</p>
</div>

雙欄圖片

效果

圖片 A 圖片 B

寫法

<div data-layout="columns-2">
  <img
    src="https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1200&auto=format&fit=crop"
    alt="圖片 A"
    data-ratio="16/9"
    data-fit="cover"
  />
  <img
    src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1200&auto=format&fit=crop"
    alt="圖片 B"
    data-ratio="16/9"
    data-fit="cover"
  />
</div>

4. 完整展示範例

效果

我的技術筆記

這是一篇示範文章，用來展示 Blog 支援的語法。

技術摘要

前端

  • Next.js
  • TypeScript
  • Tailwind CSS

後端

  • FastAPI
  • PostgreSQL
  • Docker

圖片展示

範例圖片

程式碼展示

app.ts
const greeting = "Hello";
const name = "World";
const message = `${greeting}, ${name}!`;
console.log(message);

任務清單

  • 完成 Markdown Renderer
  • 支援圖片排版
  • 補更多展示元件

寫法

# 我的技術筆記

這是一篇示範文章，用來展示 Blog 支援的語法。

## 技術摘要

<div data-layout="columns-2">
  <div data-surface="card">
    <h3>前端</h3>
    <ul>
      <li>Next.js</li>
      <li>TypeScript</li>
      <li>Tailwind CSS</li>
    </ul>
  </div>

  <div data-surface="card">
    <h3>後端</h3>
    <ul>
      <li>FastAPI</li>
      <li>PostgreSQL</li>
      <li>Docker</li>
    </ul>
  </div>
</div>

## 圖片展示

<img
  src="https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1200&auto=format&fit=crop"
  alt="範例圖片"
  data-width="720px"
  data-align="center"
  data-ratio="16/9"
  data-fit="cover"
/>

## 程式碼展示

```typescript filename="app.ts" {2-4}
const greeting = "Hello";
const name = "World";
const message = `${greeting}, ${name}!`;
console.log(message);
```

## 任務清單

- [x] 完成 Markdown Renderer
- [x] 支援圖片排版
- [ ] 補更多展示元件

5. 現有元件映射

除了原本的 Markdown 樣式，文章內也可以直接借用現有元件。

CTA 按鈕

使用原生 <a>，加上 data-button 即可套用 CustomButton。

效果

查看作品集

查看 GitHub

寫法

<a href="https://alaner652.com" data-button="primary">查看作品集</a>

<a href="https://github.com/alaner652" data-button="outline" data-size="sm">查看 GitHub</a>

TaskList 元件

使用 <task-list>，其中 tasks 需傳入 JSON 字串。

效果

寫法

<task-list title="申請準備進度" tasks='[
    {"title":"整理專案經歷","completed":true},
    {"title":"撰寫自傳與讀書計畫","completed":true},
    {"title":"完成備審排版優化","completed":false}
  ]'></task-list>

6. 建議用法

  • 文章主體仍以 Markdown 為主
  • 需要版型時再加 <div> 或 <img>
  • 一個區塊只做一件事，避免把太多排版混在一起
  • 優先使用 data-layout、data-surface、data-width、data-align