Astro 内置了 Shiki 代码高亮,无需额外配置即可获得 VS Code 级别的语法着色。

TypeScript 示例

type User = {
  id: number;
  name: string;
};

async function fetchUser(id: number): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error('请求失败');
  return res.json();
}

Python 示例

def fibonacci(n: int) -> int:
    a, b = 0, 1
    for _ in range(n):
        a, b = b, a + b
    return a

print([fibonacci(i) for i in range(10)])

Shell 示例

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

切换右上角的主题按钮,可以看到代码块在深色/浅色模式下使用不同的配色。

行内代码

const x = 1 这样的行内代码也有样式区分。