示例片段库（格式演示 + 可抄）

本页集中展示 VitePress 对 多种代码与结构化内容 的渲染，并可直接当模板改。

1. 表格

模型用途粗分

用途	适合	注意
补全/改函数	中小上下文模型	给文件路径与接口
跨文件重构	长上下文 / Agent	限定改动范围
审 diff	强推理	只贴 diff
写文档	任意	要求贴目录结构

复杂度 vs 人工占比

任务	AI 可占比	人必须盯
CRUD 样板	高	权限字段
并发/分布式	中低	一致性模型
安全鉴权	中	威胁模型
算法竞赛题	高	复杂度证明

---

2. Bash / Shell

#!/usr/bin/env bash
set -euo pipefail

APP_DIR="${APP_DIR:-.}"
cd "$APP_DIR"

die() { echo "error: $*" >&2; exit 1; }

command -v node >/dev/null || die "node not found"

echo "node=$(node -v)"
npm test

# 管道与 jq
gh api repos/:owner/:repo/actions/runs --jq '.workflow_runs[0].conclusion'

---

3. JavaScript / TypeScript

// 简单重试
async function withRetry(fn, times = 3) {
  let last
  for (let i = 0; i < times; i++) {
    try {
      return await fn()
    } catch (e) {
      last = e
      await new Promise((r) => setTimeout(r, 200 * (i + 1)))
    }
  }
  throw last
}

type Result<T, E = Error> =
  | { ok: true; value: T }
  | { ok: false; error: E }

export function ok<T>(value: T): Result<T> {
  return { ok: true, value }
}

export function err<E = Error>(error: E): Result<never, E> {
  return { ok: false, error }
}

---

4. Python

from __future__ import annotations

from dataclasses import dataclass


@dataclass(frozen=True)
class Page:
    path: str
    title: str


def normalize_path(path: str) -> str:
    p = path.strip().strip("/")
    return p or "home"

---

5. JSON / JSONC 配置

{
  "name": "self-mds",
  "private": true,
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs"
  }
}

---

6. YAML

name: ci
on:
  push:
    branches: [master, main]
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: npm
      - run: npm ci
      - run: npm run build

---

7. Diff

 function auth(req, res, next) {
-  if (req.headers.token) return next()
+  const token = req.headers.authorization?.replace(/^Bearer\s+/i, '')
+  if (token && verify(token)) return next()
   return res.status(401).end()
 }

---

8. SQL

SELECT u.id, u.email, count(o.id) AS order_cnt
FROM users u
LEFT JOIN orders o ON o.user_id = u.id
WHERE u.created_at >= now() - interval '30 days'
GROUP BY u.id, u.email
HAVING count(o.id) > 0
ORDER BY order_cnt DESC
LIMIT 50;

---

9. Dockerfile

FROM node:20-alpine AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/docs/.vitepress/dist /usr/share/nginx/html
EXPOSE 80

---

10. 文件树

docs/
  ai-coding/
    index.md
    workflow.md
    prompt-patterns.md
    review-checklist.md
    tooling-cheatsheet.md
    snippets.md          ← 本页
  .vitepress/
    config.mts
    sidebar.mts          # 自动扫目录生成文件夹树

---

11. 提示容器（VitePress）

信息

用于补充背景，不阻断阅读。

技巧

先写测试再让 AI 填实现，评审更轻松。

注意

AI 常「看起来对」——以测试与类型为准。

危险

不要把生产 .env 贴进对话或提交进 Git。

点击展开：一段 HTTP 状态小表

码	含义
200	OK
201	Created
400	Bad Request
401	Unauthorized
403	Forbidden
404	Not Found
500	Server Error

---

12. 任务列表

• [x] 建立 AI 编程分区
• [x] 放进多语言代码示例
• [ ] 按自己栈替换示例仓库路径
• [ ] 补一条真实 PR 复盘链接

---

13. 数学（可选）

行内：时间复杂度 $O(n \log n)$。

块级：

$$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$

---

14. 引用与链接

好的抽象来自真实重复，不是来自 AI 的「先建框架」。

站内：工作流 · 提示词 · 工具链

站外：VitePress Markdown