Astro+MDX一些特殊样式语法

1. 特殊代码块#

1.1. 代码高亮#

1
// 这是一个简单的函数，用于计算斐波那契数列
2
function fibonacci(n) {
3
    if (n <= 1) {
4
        return n;
5
    }
6
    return fibonacci(n - 1) + fibonacci(n - 2);
7
}

脚本类语言（例如 bat ， bash ， powershell ）和文本默认不带行号：

#!/usr/bin/env bash

echo "Start build..."
pnpm install
pnpm build
echo "Done."

1.2. 行号标记#

指定行号标记变更 diff

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
}

为变更行加上标签

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === 'string' ? <span>{children}</span> : children)}
12
</button>

使用行前 +/- 标记变更 diff

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
}

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+this is an actual diff file
5
-all contents will remain unmodified
6
 no whitespace will be removed either

1.3. 高亮标记代码块内文本#

1
function demo() {
2
  // Mark any given text inside lines
3
  return 'Multiple matches of the given text are supported';
4
}

2. 图片配置#

2.1. 图片加标题#

2.2. 图片大小配置#

正常大小
正常大小
图片缩小
图片缩小

2.3. 图片并排显示#

2.4. 图片代码并排显示#

src/
  content/
    blog/
      mobile-nav-and-subposts/
        index.mdx
        mobile-navigation.mdx
        subposts.mdx

3. 标注卡片#

3.1. 常用标注卡片#

标注名称	说明
Note	用于标注一般信息或备注
Tip	用于标注提示信息或技巧
Warning	用于标注警告信息或注意事项
Danger	用于标注危险信息或警告
Important	用于标注重要信息或警告信息

3.2. 与其他组件组合使用#

Note (高级React开发教程)

这是一个高级的 React 开发教程，假设你已经熟悉 React 的 hooks 和组件生命周期。如果你需要复习，检查官方 React 文档。

Tip (提高开发效率)

你可以通过按下 Ctrl + Alt + F (Windows/Linux) or Cmd + Option + F (Mac) 快速格式化代码。

其他快捷键：

操作	Windows/Linux	Mac
搜索	`Ctrl` + `F`	`Cmd` + `F`
替换	`Ctrl` + `H`	`Cmd` + `H`
保存所有	`Ctrl` + `Alt` + `S`	`Cmd` + `Option` + `S`

Warning (浏览器兼容性问题)

该 API 不支持 Internet Explorer ，且在旧浏览器中支持有限。

1
if (!Object.fromEntries) {
2
  Object.fromEntries = function(entries) {
3
    const obj = {};
4
    for (const [key, value] of entries) {
5
      obj[key] = value;
6
    }
7
    return obj;
8
  };
9
}

查看浏览器兼容性表格以获取详细信息。

Danger (数据丢失风险)

运行此命令将永久删除当前目录中的所有文件。请确保在继续之前备份重要数据。

# 这将删除当前目录中的所有文件，请确保在继续之前备份重要数据
rm -rf ./*
# 安全的替代方案，需要确认
rm -ri ./*

操作无法撤销，恢复工具可能无法恢复数据。

Important (版本2.0的主要API变化)

版本 2.0 引入了显著的 API 变化。你需要更新你的代码以使用新的参数结构。

现在 configure() 方法返回 Promise 对象
认证需要 API 密钥对象而不是字符串
事件处理程序使用新的回调模式

一个迁移示例如下：

1
app.configure("api-key-string");
2
await app.configure({ key: "api-key-string", version: "2.0" });
3

4
app.on('event', callback);
5
app.on('event', { handler: callback, options: { once: true } });

Definition (连续函数)

函数 $f: X \rightarrow Y$ 是连续的，如果对于每个开集 $V \subseteq Y$ ，其前像 $f^{-1}(V) \subseteq X$ 是 $X$ 的开集。

Explanation (等价表述)

$\forall \varepsilon > 0, \exists \delta > 0$ 使得 $d_X(x,y) \lt \delta \implies d_Y(f(x),f(y)) \lt \varepsilon$ 。

Theorem (大数定律)

设 $X_1, X_2, \ldots$ 是独立同分布的随机变量序列，其数学期望为 $\mathbb{E}[X_i] = \mu \lt \infty$ . 对于任意 $\varepsilon > 0$ :

\lim_{n \to \infty} P\left(\left|\frac{1}{n}\sum_{i=1}^{n}X_i - \mu\right| > \varepsilon\right) = 0

Proof (证明)

我们将使用切比雪夫不等式证明证明。设 $S_n = \sum_{i=1}^{n}X_i$ 和 $\sigma^2 = \text{Var}(X_i)$ .:

P\left(\left|\frac{S_n}{n} - \mu\right| \geq \varepsilon\right) \leq \frac{\text{Var}(S_n/n)}{\varepsilon^2}

由于随机变量是独立的，我们有 :

\text{Var}(S_n/n) = \frac{\text{Var}(S_n)}{n^2} = \frac{n\sigma^2}{n^2} = \frac{\sigma^2}{n}

代入不等式，我们有 :

P\left(\left|\frac{S_n}{n} - \mu\right| \geq \varepsilon\right) \leq \frac{\sigma^2}{n\varepsilon^2}

当 $n \to \infty$ 时，右端近于 0 ，证明了定理。

Lemma (单调收敛定理)

设 $(f_n)$ 是一个非负可测函数序列，满足 $f_n(x) \leq f_{n+1}(x)$ 对于所有 $n \in \mathbb{N}$ 和几乎所有 $x$ . 定义 $f(x) = \lim_{n \to \infty} f_n(x)$ . 则 :

\lim_{n \to \infty} \int f_n \, d\mu = \int f \, d\mu

Proof (证明)

设 $g_n = f_n \cdot \chi_E$ ，其中 $E = \{x : f(x) \lt \infty\}$ 。

\int f \, d\mu = \int \lim_{n \to \infty} g_n \, d\mu \leq \liminf_{n \to \infty} \int g_n \, d\mu = \liminf_{n \to \infty} \int f_n \, d\mu

注意到 $f_n \leq f$ 对于所有 $n$ ，所以 $\int f_n \, d\mu \leq \int f \, d\mu$ . 取极限 :

\limsup_{n \to \infty} \int f_n \, d\mu \leq \int f \, d\mu

组合这些不等式，我们有 :

\int f \, d\mu \leq \liminf_{n \to \infty} \int f_n \, d\mu \leq \limsup_{n \to \infty} \int f_n \, d\mu \leq \int f \, d\mu

因此， $\lim_{n \to \infty} \int f_n \, d\mu = \int f \, d\mu$ 。

Exercise (计算函数的导数)

计算 $f(x) = x^3 \sin(x)$ 的导数。

Answer

\frac{d}{dx}[x^3 \sin(x)] = 3x^2 \sin(x) + x^3 \cos(x)

Problem (算术平均数的收敛性)

设 $(a_n)$ 收敛到 $L$ ，则 $(\frac{a_1 + a_2 + \ldots + a_n}{n})$ 也收敛到 $L$ 。

Solution (证明)

设 $\varepsilon > 0$ ，存在 $N \in \mathbb{N}$ ，使得对所有 $n \geq N$ ，有 $|a_n - L| \lt \frac{\varepsilon}{2}$ 。

设 $S_n = \frac{a_1 + a_2 + \ldots + a_n}{n}$ 。

S_n = \frac{a_1 + a_2 + \ldots + a_N + a_{N+1} + \ldots + a_n}{n}

对所有 $n > N$ ，我们有 :

\begin{align*} |S_n - L| &= \left|\frac{a_1 + a_2 + \ldots + a_n}{n} - L\right| \\ &= \left|\frac{a_1 + a_2 + \ldots + a_n - nL}{n}\right| \\ &= \left|\frac{(a_1 - L) + (a_2 - L) + \ldots + (a_n - L)}{n}\right| \\ &\leq \frac{|a_1 - L| + |a_2 - L| + \ldots + |a_N - L| + |a_{N+1} - L| + \ldots + |a_n - L|}{n} \end{align*}

设 $M = \max\{|a_1 - L|, |a_2 - L|, \ldots, |a_N - L|\}$ . 则有 :

|S_n - L| \leq \frac{NM + (n-N)\frac{\varepsilon}{2}}{n} = \frac{NM}{n} + \frac{n-N}{n} \cdot \frac{\varepsilon}{2}

当 $n \to \infty$ , $\frac{NM}{n} \to 0$ 和 $\frac{n-N}{n} \to 1$ . 对足够大的 $n$ ，我们有 :

|S_n - L| < \varepsilon

因此， $(S_n)$ 收敛到 $L$ 。

最近更新： 2026年5月2日 08:00