用 Astro 从零搭建这个博客

这是本站的第一篇技术文章，用来验证代码高亮、目录、标签等功能是否正常。

为什么选 Astro#

Astro 默认输出零 JavaScript 的静态 HTML，非常适合以阅读为主的博客：加载快、SEO 好，需要交互的地方再用「岛屿」局部注水。

代码高亮示例#

下面是一个带高亮标注的代码块（// [!code highlight] 等标注由 @shikijs/transformers 提供）：

function greet(name: string): string {
  const prefix = 'Hello'; 
  return `${prefix}, ${name}!`;
}

console.log(greet('Astro'));

diff 标注示例：

function sum(a, b) {
  return a - b; 
  return a + b; 
}

行内代码与引用#

行内代码像这样：const x = 1。

引用块：工具是为了让你更愿意持续输出，别在工具上过度纠结。

提示容器（验证）#

点击展开

折叠内容藏在这里。

任务列表（验证）#

• 已完成的事项
• 待办事项

Mermaid 图表（验证）#

graph LR
  A[写作] --> B[git push]
  B --> C[自动构建]
  C --> D[上线]

数学公式（验证）#

行内公式 $E = mc^2$，以及块级公式：

$$\int_0^1 x^2 \, dx = \frac{1}{3}$$

更多 Markdown（验证）#

行内高亮 重点内容，以及徽章 NEW 已废弃。

带标题 + 行号的代码块：

const port = 3000;
const host = 'localhost';
console.log(`http://${host}:${port}`);

图表与媒体（验证）#

小结#

如果代码块有颜色、右上角有复制按钮、右侧有目录、切换深浅色时代码配色也跟着变——那么核心功能就都正常了。