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

本文介绍了本博客系统支持的 Markdown 进阶语法,包括数学公式、提示框、容器等高级功能。这些功能可以让你的文章更加丰富和专业。

概述#

本博客基于 Astro 构建,支持丰富的 Markdown 扩展语法。除了标准的 Markdown 语法外,还支持以下高级功能:

  • 数学公式渲染(KaTeX)
  • 多种类型的提示框
  • 代码高亮和复制功能
  • 脚注和定义列表
  • 容器和折叠内容
  • 图片缩放查看

数学公式#

本博客使用 KaTeX 渲染数学公式,支持 LaTeX 语法。

行内公式#

使用单个美元符号包围:

这是行内公式:$E = mc^2$

效果:这是行内公式:E=mc2E = mc^2

块级公式#

使用双美元符号包围:

$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$

效果:

n!k!(nk)!=(nk)\frac{n!}{k!(n-k)!} = \binom{n}{k}

常用数学符号#

语法效果说明
$\alpha$α\alpha希腊字母
$\sum_{i=1}^{n}$i=1n\sum_{i=1}^{n}求和符号
$\int_{a}^{b}$ab\int_{a}^{b}积分符号
$\frac{a}{b}$ab\frac{a}{b}分数
$\sqrt{x}$x\sqrt{x}平方根
$x^{2}$x2x^{2}上标
$x_{i}$xix_{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}
$$

效果:

×B1cEt=4πcjE=4πρ×E+1cBt=0B=0\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)
```javascript
console.log("代码块也支持");

:::

效果:
:::tip[实用技巧]
你可以为提示框添加自定义标题,这样可以更准确地描述内容。
:::
:::warning[重要提醒]
使用自定义标题时,需要使用方括号 `[标题]` 的语法格式。
:::
:::note[详细说明]
提示框内可以包含复杂的内容:
- **列表项目**
- *斜体文本*
- `代码片段`
- [链接](https://example.com)
```javascript
// 甚至可以包含代码块
console.log("Hello World!");

:::

提示框类型说明#

类型中文标题用途颜色主题
note注意一般性说明和注意事项蓝色
tip提示有用的建议和小贴士绿色
important重要重要内容和关键信息紫色
warning警告潜在问题和风险提醒黄色
caution注意需要小心的操作提醒红色

代码高亮#

本博客使用 Expressive Code 提供强大的代码高亮功能。

基础代码块#

```javascript
function 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 showLineNumbers
def 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,这里有另一个脚注2

定义列表#

术语1
: 定义1
术语2
: 定义2a
: 定义2b

容器语法#

折叠容器#

::: details 点击展开详情
这里是隐藏的内容,点击标题可以展开。
可以包含任何 Markdown 内容:
- 列表项
- **粗体文本**
- `代码`
```python
print("Hello World")

:::

## 高亮语法
```markdown
==高亮文本==

效果:==高亮文本==

缩写#

*[HTML]: 超文本标记语言
*[CSS]: 层叠样式表
HTML 和 CSS 是网页开发的基础。

图片增强#

本博客支持图片点击放大查看功能,所有图片都会自动启用这个功能。

![示例图片](图片URL "图片标题")

Front Matter 配置#

每篇文章都需要在开头添加 Front Matter 配置:

---
title: "文章标题"
published: 2025-01-01 12:00:00
description: "文章描述"
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 进阶语法提供了丰富的功能:

  1. 数学公式:支持 LaTeX 语法的数学表达式
  2. 提示框:五种类型的信息提示框
  3. 代码高亮:强大的代码展示功能
  4. 交互功能:图片放大、代码复制等
  5. 扩展语法:脚注、定义列表、容器等

掌握这些进阶语法,可以让你的文章更加专业和美观。记住,好的内容不仅需要丰富的功能,更需要清晰的结构和有价值的信息。


希望这份进阶语法指南能帮助你更好地使用本博客系统!如果你是初学者,建议先学习基础语法。

Footnotes#

  1. 这是第一个脚注的内容。

  2. 这是命名脚注的内容。

Markdown 进阶语法指南
https://www.shimoxi.qzz.io/2025/07/14/20/
作者
石墨烯积木
发布于
2025-07-14
许可协议
CC BY-NC-SA 4.0

评论

正在加载评论系统...