Astro 博客主题功能与 Markdown 示例

快速入口

• 基础语法参考：常用 Markdown 教程
• 扩展能力参考：Expressive Code
• Markdown 渲染参考：markdown-it

常用 Markdown

标题

Markdown 使用 # 表示标题层级。

1
## 这是一个二级标题（H2）
2

3
### 这是一个三级标题（H3）
4

5
#### 这是一个四级标题（H4）
6

7
##### 这是一个五级标题（H5）
8

9
###### 这是一个六级标题（H6）

分割线（Horizontal Rules）

使用三个或以上 - 或 * 创建分割线。

1
***
2
---

效果：

强调（Emphasis）

Markdown 支持加粗、斜体和删除线。

1
**这是加粗文本**  *这是斜体文本*  ~~这是删除线~~

效果： 这是加粗文本 这是斜体文本 这是删除线

块引用（Blockquotes）

使用 > 表示引用内容。

1
> 块引用也可以嵌套...
2
>
3
> > ...通过在前面继续添加 `>` 符号

效果：

块引用也可以嵌套…

…通过在前面继续添加 > 符号

脚注（References）

脚注可以用于补充说明。

1
这是一个包含可点击脚注的示例[^1]。
2

3
这是第二个包含脚注的示例[^2]。
4

5
[^1]: 第一个脚注示例，点击可以返回正文。
6
[^2]: 第二个脚注示例。

效果： 这是一个包含可点击脚注的示例¹。

这是第二个包含脚注的示例²。

如果你查看 src/content/blog/markdown-elements.md，你会发现脚注以及“Footnotes”标题是通过
remark-rehype 插件自动添加到页面底部的。

列表（Lists）

无序列表：

• 可以使用 +、- 或 * 开头
• 子列表通过缩进 2 个空格创建：
  • 符号变化会强制开启新列表：
    • 示例一
    • 示例二
    • 示例三
• 非常简单！

有序列表：

1. 第一项

2. 第二项

3. 第三项

4. 你可以继续用递增数字

5. 或者全部写成 1. 也可以

从指定数字开始：

57. 第一项
58. 第二项

代码（Code）

1. 行内代码： code

2. 缩进代码块： 用 4 个空格缩进形成代码块

1
// 一些注释
2
这是第一行代码
3
这是第二行代码
4
这是第三行代码

3. 代码块（围栏形式）：用 ``` 包住代码

1
此处为实例文本

语法高亮：在 ``` 后面写语言，比如 js、python，代码会自动上色

4. 语法高亮

1
var foo = function (bar) {
2
  return bar++;
3
};
4

5
console.log(foo(5));

更具表达性的代码示例

1. 添加标题

1
console.log("Title example");

2. 一个 Bash 终端示例

1
echo "A base terminal example"

3. 高亮代码行

1
function demo() {
2
  console.log("this line is marked as deleted");
3
  // This line and the next one are marked as inserted
4
  console.log("this is the second inserted line");
5

6
  return "this line uses the neutral default marker type";
7
}

Expressive Code 的功能远不止这里展示的这些，并且提供了大量的 自定义配置。

表格与图片

1
图片格式：![Alt Text](url)

示例：

1. 基本表格写法（表格里可以写 Markdown）

2. 列对齐方式 对齐规则：:--- → 左对齐 :---: → 居中 ---: → 右对齐 示例

注释:

1
<!-- 你看不见我 -->

一些常用标识符

⭐ 大标题 📌 重点 💡 方法 ⚠ 易错 🔥 必背 ✅ 完成 ⬜ 未完成 🔄 进行中 ⭐ 重点 ❗ 注意

链接

来自 markdown-it

扩展 Markdown

支持 Remixicon 图标

1
:i{class="ri-poker-hearts-fill"}
2
:i{class="ri-poker-clubs-fill"}

支持按钮

1
:btn[Google]{href="https://www.google.com"}

Google

1
:::btn{href="#"}
2
:i{class="ri-share-box-line"} Open in new tab
3
:::

支持遮掩文本

默认模糊，鼠标移上去会显示；点击或按回车也可以切换显示状态。

1
:spoiler[这是一段默认模糊的内容]

效果：

这是一段默认模糊的内容

支持 GitHub 仓库卡片

1
::github{repo="用户名/仓库名"}

例子：

cirry

/

astro-yi

Waiting for api.github.com...

Waiting

Waiting

Waiting

支持折叠块

1
:::collapse[Hello World]
2
文本
3
:::

1
<details>
2
<summary>点击展开</summary>
3
文本
4
</details>

支持提示块

1
:::tip[标题]
2
自定义标题
3
:::
4

5
:::note
6
注意
7
:::
8

9
:::caution
10
警告
11
:::
12

13
:::danger
14
危险
15
:::

支持 Mermaid 图表

使用方法：

• 代码块以 ```mermaid 开始
• 以 ``` 结束
• 在 Frontmatter 中启用 mermaid: true

Mermaid 代码示例：

1
flowchart TD
2
  A[开始] --> B[学习 Mermaid]
3
  B --> C{会了吗?}
4
  C -- 是 --> D[写博客]
5
  C -- 否 --> B

渲染结果：

flowchart TD
  A[开始] --> B[学习 Mermaid]
  B --> C{会了吗?}
  C -- 是 --> D[写博客]
  C -- 否 --> B

支持 MathJax 数学公式

• 请在 Frontmatter 中设置：mathjax: true。

块级公式模式

1
---
2
mathjax: true
3
---
4
hello!
5
$$ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $$
6
hello!

hello! $$ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $$ hello!

行内公式模式

1
---
2
mathjax: true
3
---
4
hello! $ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $ hello!

hello! $ \sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t $ hello!

VS Code 插件用法

快捷键

加粗: Alt + B 斜体: Alt + I 删除线: Alt + s 勾选/取消勾选任务列表项

标题锚点：

大多数 Markdown 处理器会自动为标题创建锚点（anchor），便于页面内跳转：

支持提示块

可复制模板

下面是一份可直接新建文章使用的模板：

1
---
2
title: "文章标题"
3
description: "一句话描述这篇文章讲什么"
4
date: 2026-03-05
5
lastModified: 2026-03-05
6
category: [分类1, 分类2]
7
tags: [标签1, 标签2]
8
mermaid: false
9
mathjax: false
10
draft: false
11
sticky: 0
12
series: "系列名"
13
seriesOrder: 1
14
slug: english-study
15
---
4 collapsed lines
16

17
## 一、前言
18

19
```