Markdown 渲染全特性演示

---

title: "Markdown 渲染全特性演示" tags:

• 测试
• Markdown
• 代码高亮

---

这篇文章用来测试所有 Markdown 渲染特性——代码高亮、表格、引用块、列表等等。

内联代码与强调

你可以使用 useState、useEffect 等 Hook，也可以直接调用 fetch('/api/data') 获取数据。

支持 粗体、斜体、删除线 以及 行内代码 的组合使用。

---

代码块 · TypeScript

// 工具类型示例
type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K]
}

interface User {
  id: number
  name: string
  address: {
    city: string
    zip: string
  }
}

const user: DeepReadonly<User> = {
  id: 1,
  name: 'weyloch',
  address: { city: 'Beijing', zip: '100000' },
}

// user.name = 'other'        // ❌ 只读，编译报错
// user.address.city = 'SH'  // ❌ 深层只读同样受保护

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

async function fetchUser(id: number): Promise<Result<User>> {
  try {
    const res = await fetch(`/api/users/${id}`)
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    return { ok: true, value: await res.json() }
  } catch (e) {
    return { ok: false, error: e as Error }
  }
}

代码块 · React JSX

import { useState, useCallback } from 'react'

interface Props {
  initialCount?: number
}

export function Counter({ initialCount = 0 }: Props) {
  const [count, setCount] = useState(initialCount)

  const increment = useCallback(() => setCount(c => c + 1), [])
  const decrement = useCallback(() => setCount(c => c - 1), [])
  const reset     = useCallback(() => setCount(initialCount), [initialCount])

  return (
    <div className="flex items-center gap-4 p-4 rounded-xl bg-white/10">
      <button onClick={decrement} className="px-3 py-1 rounded bg-red-500/20">−</button>
      <span className="text-2xl font-mono font-bold">{count}</span>
      <button onClick={increment} className="px-3 py-1 rounded bg-green-500/20">+</button>
      <button onClick={reset} className="ml-4 text-xs text-white/40 hover:text-white">重置</button>
    </div>
  )
}

代码块 · Bash

# 初始化项目
pnpm create next-app my-blog --typescript --tailwind --app

# 安装依赖
pnpm add drizzle-orm better-sqlite3
pnpm add -D drizzle-kit @types/better-sqlite3

# 生成迁移并推送
npx drizzle-kit generate
npx drizzle-kit migrate

代码块 · JSON

{
  "name": "my-blog",
  "version": "0.1.0",
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "15.0.0",
    "drizzle-orm": "^0.40.0",
    "better-sqlite3": "^11.0.0"
  }
}

---

引用块

「任何足够先进的技术，都与魔法无异。」 — Arthur C. Clarke

注意：在生产环境中，务必设置强随机的 JWT_SECRET 环境变量， 不要使用代码中的 fallback 默认值。

---

有序列表与无序列表

部署前检查清单：

1. 环境变量全部配置完毕（.env.production）
2. 数据库已备份
3. 静态资源 CDN 已就绪
4. 监控告警已开启

技术栈：

• 框架：Next.js 15 (App Router + Turbopack)
• 数据库：SQLite + Drizzle ORM
• 样式：Tailwind CSS v4
• 语法高亮：Shiki
• 部署：Vercel / 自托管

---

表格

Hook	作用	常见误用
useState	组件本地状态	存放派生数据
useEffect	副作用处理	滥用作数据获取
useCallback	函数引用稳定	过度优化简单函数
useMemo	计算值缓存	缓存非昂贵计算
useRef	持久引用 / DOM	替代 state 触发渲染

---

嵌套列表

• 前端
  • React
    • Hooks
    • Server Components
  • Vue
    • Composition API
• 后端
  • Node.js
    • Express
    • Fastify
  • Go
    • net/http
    • Fiber

---

渲染测试完毕。如果你能看到语法高亮、清晰的表格、以及没有下划线的标题，说明一切正常 ✅