1827 字
9 分钟
正在加载...
Markdown 进阶语法指南

本文介绍了本博客系统支持的 Markdown 进阶语法,包括数学公式、提示框、容器等高级功能。这些功能可以让你的文章更加丰富和专业。
概述
本博客基于 Astro 构建,支持丰富的 Markdown 扩展语法。除了标准的 Markdown 语法外,还支持以下高级功能:
- 数学公式渲染(KaTeX)
- 多种类型的提示框
- 代码高亮和复制功能
- 脚注和定义列表
- 容器和折叠内容
- 图片缩放查看
数学公式
本博客使用 KaTeX 渲染数学公式,支持 LaTeX 语法。
行内公式
使用单个美元符号包围:
这是行内公式:$E = mc^2$
效果:这是行内公式:
块级公式
使用双美元符号包围:
$$\frac{n!}{k!(n-k)!} = \binom{n}{k}$$
效果:
常用数学符号
语法 | 效果 | 说明 |
---|---|---|
$\alpha$ | 希腊字母 | |
$\sum_{i=1}^{n}$ | 求和符号 | |
$\int_{a}^{b}$ | 积分符号 | |
$\frac{a}{b}$ | 分数 | |
$\sqrt{x}$ | 平方根 | |
$x^{2}$ | 上标 | |
$x_{i}$ | 下标 |
复杂公式示例
$$\begin{aligned}\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c}\vec{\mathbf{j}} \\\nabla \cdot \vec{\mathbf{E}} &= 4 \pi \rho \\\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \\\nabla \cdot \vec{\mathbf{B}} &= 0\end{aligned}$$
效果:
提示框语法
本博客支持多种类型的提示框,用于突出显示重要信息。
基础提示框
:::note这是一个注意提示框:::
:::tip这是一个提示框:::
:::important这是一个重要信息框:::
:::warning这是一个警告框:::
:::caution这是一个注意框:::
效果:
注意这是一个注意提示框,用于显示一般性的注意事项和说明信息。
提示这是一个提示框,用于显示有用的建议和小贴士。
重要这是一个重要信息框,用于强调重要的内容和关键信息。
警告这是一个警告框,用于提醒用户注意潜在的问题或风险。
注意这是一个注意框,用于提醒用户小心操作或注意某些事项。
自定义标题提示框
:::tip[实用技巧]你可以为提示框添加自定义标题:::
:::warning[重要提醒]自定义标题使用方括号语法:::
:::note[详细说明]提示框内可以包含复杂内容:
- **列表项目**- *斜体文本*- `代码片段`- [链接](https://example.com)
```javascriptconsole.log("代码块也支持");
:::
效果:
:::tip[实用技巧]你可以为提示框添加自定义标题,这样可以更准确地描述内容。:::
:::warning[重要提醒]使用自定义标题时,需要使用方括号 `[标题]` 的语法格式。:::
:::note[详细说明]提示框内可以包含复杂的内容:
- **列表项目**- *斜体文本*- `代码片段`- [链接](https://example.com)
```javascript// 甚至可以包含代码块console.log("Hello World!");
:::
提示框类型说明
类型 | 中文标题 | 用途 | 颜色主题 |
---|---|---|---|
note | 注意 | 一般性说明和注意事项 | 蓝色 |
tip | 提示 | 有用的建议和小贴士 | 绿色 |
important | 重要 | 重要内容和关键信息 | 紫色 |
warning | 警告 | 潜在问题和风险提醒 | 黄色 |
caution | 注意 | 需要小心的操作提醒 | 红色 |
代码高亮
本博客使用 Expressive Code 提供强大的代码高亮功能。
基础代码块
```javascriptfunction fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2);}```
带标题的代码块
```javascript title="斐波那契数列"function fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2);}```
行号显示
```python showLineNumbersdef quick_sort(arr): if len(arr) <= 1: return arr pivot = arr[len(arr) // 2] left = [x for x in arr if x < pivot] middle = [x for x in arr if x == pivot] right = [x for x in arr if x > pivot] return quick_sort(left) + middle + quick_sort(right)```
代码高亮行
```javascript {2,4-6}function example() { const highlighted = "这行会被高亮"; const normal = "普通行"; const start = "高亮区域开始"; const middle = "高亮区域中间"; const end = "高亮区域结束";}```
脚注
本博客支持脚注功能:
这里有一个脚注[^1],这里有另一个脚注[^note]。
[^1]: 这是第一个脚注的内容。[^note]: 这是命名脚注的内容。
定义列表
术语1: 定义1
术语2: 定义2a: 定义2b
容器语法
折叠容器
::: details 点击展开详情这里是隐藏的内容,点击标题可以展开。
可以包含任何 Markdown 内容:
- 列表项- **粗体文本**- `代码`
```pythonprint("Hello World")
:::
## 高亮语法
```markdown==高亮文本==
效果:==高亮文本==
缩写
*[HTML]: 超文本标记语言*[CSS]: 层叠样式表
HTML 和 CSS 是网页开发的基础。
图片增强
本博客支持图片点击放大查看功能,所有图片都会自动启用这个功能。

Front Matter 配置
每篇文章都需要在开头添加 Front Matter 配置:
---title: "文章标题"published: 2025-01-01 12:00:00description: "文章描述"image: "封面图片URL"tags: ["标签1", "标签2"]category: "分类"draft: false---
配置说明
字段 | 类型 | 必填 | 说明 |
---|---|---|---|
title | 字符串 | 是 | 文章标题 |
published | 日期时间 | 是 | 发布时间 |
description | 字符串 | 否 | 文章描述,用于SEO |
image | 字符串 | 否 | 封面图片URL |
tags | 数组 | 否 | 文章标签 |
category | 字符串 | 否 | 文章分类 |
draft | 布尔值 | 否 | 是否为草稿,默认false |
写作技巧
1. 文章结构
- 使用
<!-- more -->
标记摘要分割点 - 合理使用标题层级创建目录结构
- 使用提示框突出重要信息
2. 代码展示
- 为代码块指定正确的语言
- 使用标题和行号提高可读性
- 适当使用代码高亮功能
3. 数学公式
- 复杂公式使用块级显示
- 简单公式可以使用行内显示
- 注意公式的可读性和排版
4. 图片使用
- 提供有意义的替代文本
- 使用合适的图片尺寸
- 考虑图片的加载性能
最佳实践
1. 内容组织
- 使用提示框突出重点
- 合理使用列表和表格
- 保持段落长度适中
2. 技术文档
- 代码示例要完整可运行
- 提供必要的解释说明
- 使用脚注补充详细信息
3. 用户体验
- 确保在移动设备上的可读性
- 使用适当的标题层级
- 提供清晰的导航结构
总结
本博客的 Markdown 进阶语法提供了丰富的功能:
- 数学公式:支持 LaTeX 语法的数学表达式
- 提示框:五种类型的信息提示框
- 代码高亮:强大的代码展示功能
- 交互功能:图片放大、代码复制等
- 扩展语法:脚注、定义列表、容器等
掌握这些进阶语法,可以让你的文章更加专业和美观。记住,好的内容不仅需要丰富的功能,更需要清晰的结构和有价值的信息。
希望这份进阶语法指南能帮助你更好地使用本博客系统!如果你是初学者,建议先学习基础语法。
Footnotes
Markdown 进阶语法指南
https://www.shimoxi.qzz.io/2025/07/14/20/ 评论
正在加载评论系统...