Markdown 写作与代码展示

这份指南演示正文排版、代码和图表的写法，可以直接参考本文的 Markdown 源文件。首次写文章时，先阅读博客编写与发布指南，了解目录、标签和发布步骤。

文字与链接 ​

支持 粗体、斜体、删除线、高亮、行内代码 const message = 'hello'，以及 H₂O 和 x²。

文章之间可以使用相对链接，例如博客编写与发布指南。完整语法参考 VitePress 文档。

[博客编写与发布指南](../17/blog-writing-guide)

记录一次清晰的思考，比堆积许多零散的片段更有价值。

Emoji ​

可以直接输入 Unicode Emoji，例如 🚀、📝、✅；也支持简码 🚀、📝、✅。

🚀 开始写作
:memo: 记录想法
:white_check_mark: 完成发布

Emoji 的外观由读者设备决定。通用图标库需要自行安装并作为 Vue 组件引入，不属于 Emoji 简码功能。

代码高亮与行号 ​

代码在构建时高亮，读者不需要额外下载语法解析器。语言标记支持 csharp、typescript、vue、sql、bash、json 等。右上角可复制代码。

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddScoped<IGreetingService, GreetingService>();
var app = builder.Build();

app.MapGet("/hello", (IGreetingService service) => service.Hello());
app.Run();

代码差异与聚焦 ​

const timeout = 1000
const timeout = 3000
const controller = new AbortController() 

多文件代码分组 ​

export async function getPosts() {
  const response = await fetch('/posts.json')
  if (!response.ok) throw new Error('无法加载文章')
  return response.json()
}

{
  "title": "一篇新的记录",
  "tags": ["Vue", "TypeScript"]
}

表格与任务列表 ​

• 为文章写清晰的标题和摘要
• 添加多个相关标签
• 完成下一篇技术记录

数学公式 ​

行内公式 $O(n\log n)$ 可以直接穿插在段落中。独立公式如下：

Mermaid 图表 ​

使用围栏语言 mermaid 可以绘制流程图、时序图等。下面展示这个博客的内容处理过程。

flowchart LR
  A[Markdown 日期目录] --> B[校验与构建]
  B --> C[静态文章]
  B --> D[日期归档与标签]
  B --> E[搜索索引]
  C --> F[Vercel / Nginx]
  D --> F
  E --> F

图表随明暗主题切换。无法渲染时仍能展开阅读图表源码。

注释、定义与折叠内容 ​

脚注能让补充信息保持在正文之外。^[1]

SSG

在构建阶段生成各个路由的 HTML，部署时只需要静态文件服务器。

HTML 的语义结构有助于浏览器理解内容。

本地图片 ​

支持同目录或相邻目录中的图片。下面是一张随文章一起存放的 SVG 示例图：