元件設計測試

這篇文章不是給讀者看的，是給元件看的：每一種區塊都在這裡出現一次，改樣式時一頁看完晝、夜讀與手機寬度。

文字與行內元素

一般段落裡會有粗體、斜體（中文不建議用）、刪除線、行內程式碼 useEffect 與 pnpm run dev、
外部連結 TanStack Start、GitHub 連結，
還有站內連結 回到文章列表。註腳也要能用¹，同一個註腳可以引用兩次¹，再來一個²。

按 Ctrl+K 開啟搜尋（小寫 Esc 也是同樣樣式）。
日文的漢字(かんじ)可以標振假名，冷僻字也能標注音：馨(ㄒㄧㄣ)。
這句話後面有一則旁註旁註桌機顯示在段落右側；手機點編號才展開。，
再來一則旁註旁註整篇連號，支援 markdown 與 code。看編號有沒有接著算。

用螢光筆畫重點，用朱筆劃底線、刪掉這句、
把關鍵字圈起來或框起來；也能換顏色、換筆色。
跨行也可以：這是一段比較長、在窄螢幕上會折成兩行以上的螢光筆標記，每一行都會各自畫上一筆，不會只畫在第一行。

清單

• 無序清單第一項
• 第二項，裡面有 code
  • 巢狀項目
• 第三項

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

• 已完成的待辦
• 還沒做的待辦

表格

數學

行內公式 $E = mc^2$，區塊公式：

程式碼

單行指令（不顯示行號）：

pnpm --filter tan-blog dev

高亮行 {2,4-5}，第 4 行很長（測試自動換行與橫向捲動）：

import { createServerFn } from '@tanstack/react-start'
const greet = createServerFn({ method: 'GET' })
  .handler(async () => {
    const message = 'hello from the server, this line is intentionally rather long so we can test wrapping behaviour on narrow screens'
    return { message }
  })

超過 15 行（預設收合、底部淡出、展開／收合後捲回區塊開頭）：

def fib(n):
    a, b = 0, 1
    for _ in range(n):
        a, b = b, a + b
    return a


def main():
    for i in range(10):
        print(i, fib(i))


if __name__ == "__main__":
    main()

# 下面多寫幾行讓它超過 15 行
x = 1
y = 2
z = x + y
print(z)

各語言圖示：

export const Hello = () => <p>Hello</p>

{ "name": "sao-blog", "private": true }

fn main() { println!("hello"); }

package main

FROM node:22-alpine

Get-ChildItem -Recurse

example.com { reverse_proxy localhost:3000 }

沒有標記語言的程式碼（顯示「純文字」）

檔名標題 title="..."：

import { defineConfig } from 'vite'

export default defineConfig({ server: { port: 3004 } })

差異標記 // [!code ++]、// [!code --]（複製時不含刪除行）：

const app = new Elysia()
  .use(cors())
  .use(cors({ origin: 'https://sao.blog' }))
  .listen(3000)

聚焦 // [!code focus]（其餘行淡掉，滑過恢復）與 // [!code highlight]：

export async function loader() {
  const post = await getPost()
  if (!post) throw notFound()
  return post
}

提示

引言

一般的 markdown 引言，不用斜體。

第二段。

折疊

console.log('accordion')

可同時展開多項：

問答模式 variant="faq"：

分頁

只放一段程式碼時，程式碼貼齊外框、工具浮在右上角：

console.log('hi')

print('hi')

預設選第二個分頁、分頁很多（窄螢幕橫向捲動）：

圖片

預設外框（髮絲線＋柔影），alt 當圖說並自動編號：

山谷裡的晨霧（預設外框）

截圖襯底：

桌上的筆電（截圖襯底）

拍立得（直式照片）：

午睡的小狗

裝飾圖（alt 以 _ 開頭，不顯示圖說）：

輪播

城市街景

夜晚的公路

第三張是文字，輪播裡也可以放任意 markdown。

1 / 3

圖表

進度條

效能比較

越低越好（自動找出最佳、其餘標倍數）：

越高越好、手動標記：

Playground

<button id="b">Click</button>

import { useState } from 'react'

export default function App() {
  const [n, setN] = useState(0)
  return <button onClick={() => setN(n + 1)}>clicked {n} times</button>
}

步驟

1. 安裝 Docker

   curl -fsSL https://get.docker.com | sh

2. 寫好 compose 檔

   建一個 compose.yaml，內容支援任意 markdown。

3. 啟動服務

   執行 docker compose up -d，打開 http://localhost:3000。

檔案樹

連結卡片

github.com/owner/repo 會自動變成 GitHub 卡片（星星、語言、過去一年的 commit）：

TanStack/router

終端機

靜態（預設）：指令前有提示字元，複製只會複製指令。

# 安裝相依套件
$ pnpm install
Lockfile is up to date, resolution step is skipped
Packages: +1287
Done in 4.2s
$ pnpm --filter tan-blog dev
  VITE v8.3.4  ready in 1830 ms
  ➜  Local:   http://localhost:3004/

animate：捲到才逐行打出來，點一下跳到結尾。

PS C:\code> git status
On branch main
nothing to commit, working tree clean
PS C:\code> git log --oneline -1
ace150b feat(tan-blog): Mark 手繪標記
$ 

推文

網址也會自動變成推文卡片（含影片封面）：

便條紙

捲到這裡時，這個螢光筆標記和圈圈才會畫上去。

前後對比

黑白彩色

影片

YouTube