Markdown 扩展：高级语法功能

在基础语法之外，Markdown 还支持丰富的扩展功能。本文展示数学排版、高级代码高亮、GitHub 风格告警等特性。

数学公式

行内公式

使用单美元符号输入行内公式。例如，爱因斯坦的著名方程 $E = mc^2$ 改变了物理学。求根公式 $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ 可以求解任何一元二次方程。欧拉恒等式 $e^{i\pi} + 1 = 0$ 常被称为数学中最优美的公式。

块级公式

使用双美元符号输入块级（展示模式）公式：

高斯积分：

\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}

麦克斯韦方程组（微分形式）：

\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned}

薛定谔方程：

i\hbar \frac{\partial}{\partial t} \Psi(\mathbf{r}, t) = \hat{H} \Psi(\mathbf{r}, t)

KaTeX 示例

矩阵

3×3 单位矩阵：

I_3 = \begin{pmatrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}

矩阵乘法：

\begin{bmatrix} a & b \\ c & d \end{bmatrix} \begin{bmatrix} e & f \\ g & h \end{bmatrix} = \begin{bmatrix} ae + bg & af + bh \\ ce + dg & cf + dh \end{bmatrix}

积分

定积分：

\int_0^1 x^2 \, dx = \frac{1}{3}

二重积分：

\iint_D f(x, y) \, dA = \int_a^b \int_{g_1(x)}^{g_2(x)} f(x, y) \, dy \, dx

环路积分（斯托克斯定理）：

\oint_C \mathbf{F} \cdot d\mathbf{r} = \iint_S (\nabla \times \mathbf{F}) \cdot d\mathbf{S}

求和

有限求和：

\sum_{k=1}^{n} k = \frac{n(n+1)}{2}

无穷级数（巴塞尔问题）：

\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}

$e^x$ 的泰勒展开：

e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots

分数与二项式

连分数：

\phi = 1 + \cfrac{1}{1 + \cfrac{1}{1 + \cfrac{1}{1 + \cdots}}}

二项式系数：

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

二项式定理：

(x + y)^n = \sum_{k=0}^{n} \binom{n}{k} x^{n-k} y^k

极限与连乘

$e$ 的极限定义：

e = \lim_{n \to \infty} \left(1 + \frac{1}{n}\right)^n

沃利斯乘积：

\frac{\pi}{2} = \prod_{n=1}^{\infty} \frac{4n^2}{4n^2 - 1}

带语法高亮的代码块

JavaScript / TypeScript

async function fetchPosts(tag) {
  const response = await fetch(`/api/posts?tag=${encodeURIComponent(tag)}`);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  const posts = await response.json();
  return posts.filter(post => !post.draft).sort((a, b) =>
    new Date(b.pubDatetime) - new Date(a.pubDatetime)
  );
}

javascript

interface BlogPost {
  title: string;
  slug: string;
  pubDatetime: Date;
  modDatetime?: Date;
  author: string;
  description: string;
  tags: string[];
  category: string;
  draft: boolean;
  featured?: boolean;
}

function getPostsByTag(posts: BlogPost[], tag: string): BlogPost[] {
  return posts
    .filter(post => post.tags.includes(tag) && !post.draft)
    .sort((a, b) => b.pubDatetime.getTime() - a.pubDatetime.getTime());
}

typescript

Python

from dataclasses import dataclass
from datetime import datetime
from typing import Optional

@dataclass
class BlogPost:
    title: str
    slug: str
    pub_datetime: datetime
    author: str
    description: str
    tags: list[str]
    category: str
    draft: bool = False
    featured: bool = False
    mod_datetime: Optional[datetime] = None

    @property
    def reading_time(self) -> int:
        word_count = len(self.content.split())
        return max(1, word_count // 200)

    def matches_tag(self, tag: str) -> bool:
        return tag.lower() in [t.lower() for t in self.tags]

python

Rust

use serde::{Deserialize, Serialize};
use chrono::{DateTime, Utc};

#[derive(Debug, Serialize, Deserialize)]
struct BlogPost {
    title: String,
    slug: String,
    pub_datetime: DateTime<Utc>,
    author: String,
    description: String,
    tags: Vec<String>,
    category: String,
    #[serde(default)]
    draft: bool,
}

impl BlogPost {
    fn reading_time(&self, content: &str) -> usize {
        let word_count = content.split_whitespace().count();
        std::cmp::max(1, word_count / 200)
    }

    fn has_tag(&self, tag: &str) -> bool {
        self.tags.iter().any(|t| t.eq_ignore_ascii_case(tag))
    }
}

rust

CSS

.prose {
  --tw-prose-body: theme('colors.gray.700');
  --tw-prose-headings: theme('colors.gray.900');
  --tw-prose-links: theme('colors.blue.600');

  max-width: 65ch;
  font-size: 1.125rem;
  line-height: 1.75;
}

@media (prefers-color-scheme: dark) {
  .prose {
    --tw-prose-body: theme('colors.gray.300');
    --tw-prose-headings: theme('colors.gray.100');
    --tw-prose-links: theme('colors.blue.400');
  }
}

.prose code::before,
.prose code::after {
  content: none;
}

.prose pre {
  border-radius: 0.5rem;
  padding: 1.25rem;
  overflow-x: auto;
  tab-size: 2;
}

css

代码块高级功能

行高亮

高亮特定行以突出重点（使用 {1,3-5} 语法——具体支持取决于你的 Markdown 处理器）：

const config = {
  site: 'https://example.com',
  base: '/',
  integrations: [
    tailwind(),
    sitemap(),
  ],
};

javascript

Diff 差异标记

使用 diff 语法展示代码变更：

- const greeting = "Hello, World!";
+ const greeting = "Hello, Astro!";

  function main() {
-   console.log(greeting);
+   console.log(`${greeting} 🚀`);
+   console.log("Welcome to the blog!");
  }

diff

Shell / 终端命令

# 创建新的 Astro 项目
npm create astro@latest my-blog

# 进入项目目录
cd my-blog

# 安装依赖
pnpm install

# 启动开发服务器
pnpm run dev

# 构建生产版本
pnpm run build

bash

JSON 配置

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "react-jsx",
    "jsxImportSource": "astro",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

json

GitHub 告警

GitHub 风格的告警提供了视觉上醒目的提示框，用于不同类型的信息：

Note

这是一个注释告警。用于展示读者在浏览内容时也应注意到的有用信息。

Tip

这是一个提示告警。用于帮助用户取得更好效果的可选建议。

Important

这是一个重要告警。用于展示用户成功所需的关键信息。

Warning

这是一个警告告警。用于需要用户立即关注以避免问题的紧急信息。

Caution

这是一个危险告警。用于提醒某些操作的风险或负面后果。

包含丰富内容的告警

Tip

性能提示： 构建 Astro 站点时，使用 --remote 标志来获取远程内容：

pnpm run build --remote

bash

对于大型站点，这可以减少高达 60% 的构建时间。

Warning

v5.0 破坏性变更： content 目录已重命名为 data。请更新你的导入：

- import { getCollection } from 'astro:content';
+ import { getCollection } from 'astro:content';  // 相同 API，新的 data/ 目录

diff

运行 npx astro migrate 自动更新你的项目。

缩略语

HTML 规范由 W3C 维护。

*[HTML]: 超文本标记语言（HyperText Markup Language） *[W3C]: 万维网联盟（World Wide Web Consortium）

Web 开发中其他常见缩略语：

CSS 用于网页样式设计
JS 是 Web 的脚本语言
API 端点负责服务器通信
SSR 在服务器端渲染页面
SSG 在构建时生成静态页面

*[CSS]: 层叠样式表（Cascading Style Sheets） *[JS]: JavaScript *[API]: 应用程序编程接口（Application Programming Interface） *[SSR]: 服务端渲染（Server-Side Rendering） *[SSG]: 静态站点生成（Static Site Generation）

定义列表

Astro: 一个现代静态站点生成器，让你用更少的客户端 JavaScript 构建更快的网站。它支持多种 UI 框架，采用岛屿架构。
Tailwind CSS: 一个实用优先的 CSS 框架，提供低级别的工具类来构建自定义设计，无需编写自定义 CSS。
MDX: 一种创作格式，允许在 Markdown 文档中使用 JSX 组件，将 Markdown 的简洁性与基于组件的 UI 的强大功能相结合。
TypeScript: JavaScript 的类型化超集，编译为纯 JavaScript。它添加了可选的静态类型和基于类的面向对象编程。

键盘快捷键

使用 <kbd> 元素展示键盘快捷键：

常用编辑器快捷键

操作	Windows / Linux	macOS
保存	`Ctrl` + `S`	`⌘` + `S`
撤销	`Ctrl` + `Z`	`⌘` + `Z`
重做	`Ctrl` + `Shift` + `Z`	`⌘` + `Shift` + `Z`
查找	`Ctrl` + `F`	`⌘` + `F`
替换	`Ctrl` + `H`	`⌘` + `H`
注释	`Ctrl` + `/`	`⌘` + `/`
格式化	`Shift` + `Alt` + `F`	`Shift` + `⌥` + `F`

VS Code 进阶快捷键

操作	快捷键
命令面板	`Ctrl` + `Shift` + `P`
快速打开	`Ctrl` + `P`
切换终端	`Ctrl` + `
转到定义	`F12`
查看定义	`Alt` + `F12`
多光标	`Ctrl` + `D`
移动行	`Alt` + `↑` / `↓`

终端快捷键

像高手一样使用终端：

Ctrl + C — 取消当前命令
Ctrl + L — 清屏
Ctrl + R — 反向搜索命令历史
Ctrl + A — 光标移至行首
Ctrl + E — 光标移至行尾
Tab — 自动补全文件名和命令

总结

这些扩展 Markdown 功能为你的写作增添了强大的表现力。数学公式带来技术精确性，语法高亮的代码块提升可读性，GitHub 告警创建清晰的视觉层次。将这些与基础 Markdown 语法结合使用，即可创建精致、专业的技术内容。