Sean

Markdown 语法大观园

Edited

本文档旨在演示各种各样的 Markdown 特性。它包含了从 基础 格式到 高级 元素的所有内容，特意构建得较为复杂，以全面测试您的 CSS 渲染能力，现在还包括通过 KaTeX 进行数学排版。

文档目标:

  1. 测试文本格式（粗体、斜体、删除线、组合）。
  2. 测试嵌套列表（有序、无序、任务列表）。
  3. 测试 行内代码 和 代码块（带语法高亮）。
  4. 测试 链接 和 图片。
  5. 测试 > 块引用（嵌套）。
  6. 测试表格（对齐、复杂内容）。
  7. 测试 KaTeX 数学渲染（$...$ 和 $$...$$）。
  8. 测试杂项元素（水平分割线、脚注、HTML）。

Placehold 服务演示

(H1 标题 - ===)

一个简单、快速且免费的图像占位符服务。我们将在下面广泛使用它。

主占位符横幅

文档片段

(H2 标题 - ---)

它究竟是如何工作的？

尺寸 (H3 标题)

使用 宽度 x 高度 指定尺寸：

https://placehold.co/350x100 -> 350x100 占位符

对于正方形，高度是可选的：

https://placehold.co/120 -> 120x120 正方形

最大尺寸 4000x4000px，最小尺寸 10x10px。

格式 (H4 标题)

指定图片格式：

  • SVG (默认): SVG 格式
  • PNG: PNG 格式
  • JPEG: JPEG 格式
  • WebP: WebP 格式

将格式与颜色结合：https://placehold.co/220x50/000/FFF.png -> 带颜色的 PNG

颜色 (H5 标题)

使用十六进制值表示背景/文本：

https://placehold.co/200x50/FFA500/FFF -> 十六进制颜色

或 CSS 颜色名称：

https://placehold.co/200x50/lightblue/darkblue -> CSS 名称颜色

transparent 关键字也有效：

https://placehold.co/200x50/transparent/F00 -> 透明背景

文本与字体 (H6 标题)

通过查询字符串自定义文本。空格使用 +，换行使用 \\n。

https://placehold.co/320x70?text=Line+One\\nLine+Two+with+Spaces -> 自定义文本

使用 font 参数（例如 roboto）：

https://placehold.co/300x60?text=Roboto+Font+Example&font=roboto -> Roboto 字体

支持的字体（部分列表）：

Lato 字体示例 Montserrat 字体示例 Poppins 字体示例

Retina 支持： 追加 @2x 或 @3x（仅限 PNG、JPEG、GIF、WebP、AVIF）：

https://placehold.co/[email protected] -> Retina @2x 示例

列表测试 (H2 标题)

无序列表

  • 列表项 1
    • 嵌套项 1.1
      • 更深层嵌套 1.1.1
        • 最深层？ 1.1.1.1
          • 好吧，再来一层：1.1.1.1.1
    • 嵌套项 1.2 
      // 列表项内的代码块
function greet(name) {
  console.log(`你好, ${name}! 测试列表代码。`);
}
greet('Markdown 用户');
  • 列表项 2

    列表项内的块引用。 它可以跨越多行。

  • 列表项 3, 包含 斜体、粗体 和 行内代码。

有序列表

  1. 第一项
    1. 子项 A 有序列表图片
    2. 子项 B
      1. 更深层：B.1
      2. 更深层：B.2
  2. 第二项
    • 无序子项 I
    • 无序子项 II
      1. 再次有序 1
      2. 再次有序 2
  3. 第三项

任务列表

  • 已完成的任务
    • 子任务 A (完成)
    • 子任务 B (待办)
      • 嵌套的待办任务
  • 未完成的任务
  • 另一个未完成的任务

块引用测试 (H2 标题)

这是一个标准的块引用。 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.

嵌套块引用：

第二层引用。

第三层引用，带有 粗体 和 斜体 文本。

回到第二层。

回到第一层。你可以包含其他元素：

  • 引用内的列表项 1
  • 引用内的列表项 2
# 引用内的代码块
class QuoteClass:
    def __init__(self, text):
        self.text = text
        print(f"引用内容: {self.text}")

引用内的图片：引用图片

usgs-zqX9icQfc2I-unsplash-1.jpg

代码块测试 (H2 标题)

这是一个 行内代码 的例子。

针对不同语言的围栏代码块：

JavaScript:

main.js
import React, { useState } from 'react';
 
function Counter() {
  // JS 代码块注释
  const [count, setCount] = useState(-1); 
  const [count, setCount] = useState(0); 
  return (
    <div className="counter-widget">
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      {/* 示例图片 */}
      <img src="https://placehold.co/180x40/a0a/fff?text=JS+Counter+Img" alt="JS 计数器" />
    </div>
  );
}
 
export default Counter;

Python:

# -*- coding: utf-8 -*-
import requests 
 
def fetch_data(url): 
  """从 URL 获取数据。包含文档字符串。"""
  try:
    response = requests.get(url, timeout=20)
    response = requests.get(url, timeout=10)
    response.raise_for_status() # 对错误的响应（4xx 或 5xx）抛出 HTTPError
    # TODO: 添加数据处理逻辑
    return response.json()
  except requests.exceptions.RequestException as e:
    print(f"获取数据时出错: {e}")
    return None
 
# 示例用法
api_url = "https://api.example.com/data" 
# data = fetch_data(api_url) # 为示例注释掉

CSS:

/* CSS 代码块示例 */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif; /* 设置字体栈 */
  line-height: 1.7;
  color: #444; /* 默认文本颜色 */
  background-color: #fafafa; /* 页面背景 */
  margin: 1em;
}
 
h1, h2, h3, h4, h5, h6 {
  color: #222;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  border-bottom: 2px solid #eee; /* 标题下划线 */
  padding-bottom: 0.3em;
}
 
code {
  background-color: #f0f0f0; /* 行内代码背景 */
  padding: 0.2em 0.5em;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}
 
pre > code {
  background-color: #2d2d2d; /* 代码块背景（深色） */
  color: #ccc; /* 代码块文本颜色 */
  display: block;
  padding: 1.5em;
  overflow-x: auto; /* 水平滚动 */
  border-radius: 5px;
}

无特定语言:

这是一个没有指定语言的纯文本代码块。
适用于原始文本输出或不支持的语言。
  缩进会被保留。
特殊字符如 < > & 应按字面显示。

KaTeX 数学表达式测试 (H2 标题)

Markdown 可以扩展以支持使用 KaTeX 的数学符号。

行内数学公式使用单美元符号：E=mc2E=mc^2。这个公式，∑i=1ni=n(n+1)2\sum_{i=1}^{n} i = \frac{n(n+1)}{2}，应出现在文本流中。像 α,β,γ\alpha, \beta, \gamma 这样的希腊字母很常见。

块级数学公式使用双美元符号，并显示在单独一行：

∫abf(x)dx=F(b)−F(a)\int_a^b f(x) dx = F(b) - F(a)

这是一个更复杂的例子，二次方程求根公式：

x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

矩阵也是可以的：

A=(abcd),I=(1001)\mathbf{A} = \begin{pmatrix} a & b \\ c & d \end{pmatrix}, \quad \mathbf{I} = \begin{pmatrix} 1 & 0 \\ 0 & 1 \end{pmatrix}

以及微分形式的麦克斯韦方程组：

∇⋅E=ρε0∇⋅B=0∇×E=−∂B∂t∇×B=μ0(J+ε0∂E∂t)\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 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right) \end{aligned}

测试分数和极限：

L=lim⁡x→cf(x)and∂2u∂x2+∂2u∂y2=0L = \lim_{x \to c} f(x) \quad \text{and} \quad \frac{\partial^2 u}{\partial x^2} + \frac{\partial^2 u}{\partial y^2} = 0

表格测试 (H2 标题)

表头 1 (左对齐)表头 2 (居中对齐)表头 3 (右对齐)表头 4 (混合内容)
单元格 1-1单元格 1-2单元格 1-3粗体文本
单元格 2-1 代码单元格 2-2 斜体单元格 2-3链接
单元格 3-1表格图片12345.67删除线
一个更长的单元格内容，用于测试换行和对齐行为。code 在单元格中‘a2+b2‘`\sqrt{a^2+b^2}`混合 内容 片段
表格单元格中的数学公式PQ\frac{P}{Q}最终单元格 3-3第 4 行结束

链接与图片测试 (H2 标题)

链接

图片

  • 行内图片：小图标
  • 引用样式图片：引用样式图片
  • 带链接的图片：可点击的占位符
  • 图像元素 1: ImageElement 1
  • 图像元素 2: ImageElement
  • 图像元素 3: ImageElement

其他语法元素 (H2 标题)

水平分割线

使用三个或更多的连字符、星号或下划线创建：

HTML 标签

Markdown 通常允许嵌入原始 HTML：

按 Ctrl + Shift + Esc 打开任务管理器。 水是 H2O。著名的方程式是 E=mc2。 这段文本被 高亮 了。

点击展开 (详情/摘要)

这是点击后显示的隐藏内容。

  • 它可以包含列表。
  • 以及其他 HTML 元素。
  • ![详情中的图片](https://placehold.co/120x40/eee/777?text=Details+Img)
  • 甚至数学公式：$a^2 + b^2 = c^2$
这是一个带有内联 CSS 样式的 DIV 元素。

它作为一个容器。

HTML div 内的嵌套块引用。

容器

转义字符

要显示字面的 Markdown 字符，请在它们前面使用反斜杠 \：

*不是斜体* **不是粗体** `不是代码` # 不是标题 [不是链接](http://example.com) ![不是图片](http://example.com/img.png) $不是数学公式$ $\不是数学块$

脚注

这里有一些需要脚注的文本1。这是另一点需要详细说明2。为了凑数，还有第三点3。

结论 (H2 标题)

本文档演示了大量的 Markdown 功能：多个级别的标题、文本样式、复杂列表（嵌套、有序、无序、任务）、块引用（嵌套及内容）、代码渲染（行内、带高亮的围栏代码块）、表格（对齐、包括数学公式在内的各种内容）、链接（各种类型）、图片（广泛使用 Placehold.co，带链接）、KaTeX 数学表达式（行内和块级）、水平分割线、嵌入式 HTML、字符转义和脚注。它应该能为您的 CSS 样式提供一个健壮的测试用例。

页脚图片

Footnotes

  1. 这是第一个脚注的内容。简短明了。 ↩

  2. 这是第二个较长的脚注。如果需要，它可以跨越多个段落，尽管渲染效果可能有所不同。它也可以包含格式，如 code 甚至 斜体。

    根据 Markdown 处理器的能力，块引用可能可以包含在脚注中。 L=−14FμνFμν\mathcal{L} = -\frac{1}{4} F_{\mu\nu} F^{\mu\nu}

    ↩

  3. 第三个脚注，只是为了展示多个脚注也能被处理。 ↩