这是一篇样式预览文章，用于展示博客中支持的各种 Markdown 样式和 HTML 元素效果。

标题样式

这是普通段落文本，用于测试行高和间距。正文应该在各种主题模式下都清晰可读。

二级标题

三级标题内容

三级标题

四级标题内容

四级标题

五级标题内容

五级标题

六级标题内容

六级标题

文本格式

基础文本样式

这是**粗体文本**，这是*斜体文本*，这是***粗斜体文本***。<br>
这是<b>粗体文本</b>，这是<i>斜体文本</i>，这是<b><i>粗斜体文本</i></b>。
这是<del>删除线文本</del>，这是<u>下划线文本</u>。

这是粗体文本，这是斜体文本，这是粗斜体文本。

这是粗体文本，这是斜体文本，这是粗斜体文本。
这是删除线文本，这是下划线文本。

行内代码

这是 行内代码 的示例，可以在句子中使用。

高亮文本

这是使用 <mark> 标签的红色高亮文本。
这是使用 <hl> 自定义标签的高亮文本。
这是使用 <hlb> 自定义标签的粗体高亮文本。

注释文本

<q>注释文本 #ccc; #666;</q>

注释文本 #ccc; #666;

<q style="font-size: 0.8em;">注：(1) `d3j` 表示删除含光标所在行的下面 3 行；<br />    (2) 由于 `d` 操作符，原本为<b>字符级</b>的移动命令变成了<b>行级</b>；</q>
</pre></div>

1 Of threats of Hell and Hopes of Paradise! -> `d3j`
2 One thing at least is certain—This Life flies;
3 One thing is certain and the rest is Lies;
4 The Flower that once has blown for ever dies.

注：(1) `d3j` 表示删除含光标所在行的下面 3 行；
    (2) 由于 `d` 操作符，原本为字符级的移动命令变成了行级；

代码块

无语法高亮

这是普通代码块
没有语法高亮

Python 代码

def hello_world():
    """这是一个 Python 函数示例"""
    name = "世界"
    print(f"你好，{name}！")
    return True

# 列表推导式
numbers = [1, 2, 3, 4, 5]
squared = [x**2 for x in numbers]

JavaScript 代码

// JavaScript 示例
function greet(name) {
    const message = `Hello, ${name}!`;
    console.log(message);
    return message;
}

// 箭头函数
const add = (a, b) => a + b;

Bash 代码

#!/bin/bash
# 这是一个 Shell 脚本示例
echo "Hello, World!"
for file in *.txt; do
    echo "Processing: $file"
done

CSS 代码

/* CSS 示例 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
}

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

列表

无序列表

  • 第一项
  • 第二项
    • 嵌套项目 A
    • 嵌套项目 B
      • 三级嵌套 1
      • 三级嵌套 2
  • 第三项

有序列表

  1. 第一步
  2. 第二步
    1. 子步骤 A
    2. 子步骤 B
  3. 第三步

任务列表

- [x] 已完成的任务
- [ ] 未完成的任务
- [ ] 另一个待办事项
  • 已完成的任务
  • 未完成的任务
  • 另一个待办事项

引用

普通引用

这是一段引用文本。
可以跨越多行。

—— 引用来源

嵌套引用

外层引用

内层引用

更深层的引用

表格

基础表格

列1 列2 列3
数据1 数据2 数据3
数据4 数据5 数据6

复杂表格

姓名 年龄 职业 状态
张三 25 工程师 在职
李四 30 设计师 高亮
王五 28 产品经理 休假

对齐方式

左对齐 居中对齐 右对齐
左 中 右
Left Center Right

链接

普通链接

这是一个 https://example.com 的示例。

带标题的链接

这是一个[带标题的链接](https://example.com "鼠标悬停显示标题")。

这是一个带标题的链接。

分割线

上面是内容

下面是内容


数学公式

行内公式

$E = mc^2$

爱因斯坦质能方程：$E = mc^2$

块级公式

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
f(x) = \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}
$$
$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$$$ f(x) = \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x-\mu)^2}{2\sigma^2}} $$

矩阵

$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$
$$ \begin{pmatrix} a & b \\ c & d \end{pmatrix} $$

常用颜色预览

以下颜色经过精心选择，确保在 Light 模式（白色背景）和 Dark 模式（深色背景）下都能清晰显示。

文字颜色

基础颜色

黑色文字 #000000 <span style="color: #000000;">黑色文字 #000000</span>
深灰色 #333333 <span style="color: #333333;">深灰色 #333333</span>
中灰色 #666666 <span style="color: #666666;">中灰色 #666666</span>
浅灰色 #999999 <span style="color: #999999;">浅灰色 #999999</span>

红色系

红色 #dc3545 <span style="color: #dc3545;">红色 #dc3545</span>
深红色 #e60000 <span style="color: #e60000;">深红色 #e60000</span>
柔和红 #ff6b6b <span style="color: #ff6b6b;">柔和红 #ff6b6b</span>

绿色系

绿色 #198754 <span style="color: #198754;">绿色 #198754</span>
森林绿 #198844 <span style="color: #198844;">森林绿 #198844</span>
草绿色 #96c24e <span style="color: #96c24e;">草绿色 #96c24e</span>
青绿色 #4ec9b0 <span style="color: #4ec9b0;">青绿色 #4ec9b0</span>

蓝色系

蓝色 #0d6efd <span style="color: #0d6efd;">蓝色 #0d6efd</span>
深蓝色 #1533ff <span style="color: #1533ff;">深蓝色 #1533ff</span>
天蓝色 #3971ed <span style="color: #3971ed;">天蓝色 #3971ed</span>
浅蓝色 #61afef <span style="color: #61afef;">浅蓝色 #61afef</span>

黄色/橙色系

黄色 #ffc107 <span style="color: #ffc107;">黄色 #ffc107</span>
橙色 #fba922 <span style="color: #fba922;">橙色 #fba922</span>
深橙色 #ff9500 <span style="color: #ff9500;">深橙色 #ff9500</span>

紫色系

紫色 #6f42c1 <span style="color: #6f42c1;">紫色 #6f42c1</span>
品红色 #a36ac7 <span style="color: #a36ac7;">品红色 #a36ac7</span>
淡紫色 #c678dd <span style="color: #c678dd;">淡紫色 #c678dd</span>

青色系

青色 #0dcaf0 <span style="color: #0dcaf0;">青色 #0dcaf0</span>
深青色 #17a2b8 <span style="color: #17a2b8;">深青色 #17a2b8</span>
绿松石 #1abc9c <span style="color: #1abc9c;">绿松石 #1abc9c</span>

背景色与文字组合

以下颜色组合在 Light 和 Dark 模式下都保持高对比度，确保文字清晰可读。

浅色背景（配黑色文字）

警告黄 #fff3cd + 黑字 <span style="background-color: #fff3cd; color: #000;">警告黄 #fff3cd + 黑字</span>
信息蓝 #d1ecf1 + 黑字 <span style="background-color: #d1ecf1; color: #000;">信息蓝 #d1ecf1 + 黑字</span>
成功绿 #d4edda + 黑字 <span style="background-color: #d4edda; color: #000;">成功绿 #d4edda + 黑字</span>
错误红 #f8d7da + 黑字 <span style="background-color: #f8d7da; color: #000;">错误红 #f8d7da + 黑字</span>
中性灰 #e2e3e5 + 黑字 <span style="background-color: #e2e3e5; color: #000;">中性灰 #e2e3e5 + 黑字</span>

中等色背景（配黑色文字）

温暖黄 #ffeaa7 + 黑字 <span style="background-color: #ffeaa7; color: #000;">温暖黄 #ffeaa7 + 黑字</span>
冷灰色 #dfe6e9 + 黑字 <span style="background-color: #dfe6e9; color: #000;">冷灰色 #dfe6e9 + 黑字</span>
中灰蓝 #b2bec3 + 黑字 <span style="background-color: #b2bec3; color: #000;">中灰蓝 #b2bec3 + 黑字</span>
浅黄色 #fed71a + 黑字 <span style="background-color: #fed71a; color: #000;">浅黄色 #fed71a + 黑字</span>
浅绿色 #83cbac + 黑字 <span style="background-color: #83cbac; color: #000;">浅绿色 #83cbac + 黑字</span>

深色背景（配白色文字）

红色 #dc3545 + 白字 <span style="background-color: #dc3545; color: #fff;">红色 #dc3545 + 白字</span>
蓝色 #0d6efd + 白字 <span style="background-color: #0d6efd; color: #fff;">蓝色 #0d6efd + 白字</span>
绿色 #198754 + 白字 <span style="background-color: #198754; color: #fff;">绿色 #198754 + 白字</span>
黄色 #ffc107 + 黑字 <span style="background-color: #ffc107; color: #000;">黄色 #ffc107 + 黑字</span>
紫色 #6f42c1 + 白字 <span style="background-color: #6f42c1; color: #fff;">紫色 #6f42c1 + 白字</span>
青色 #0dcaf0 + 黑字 <span style="background-color: #0dcaf0; color: #000;">青色 #0dcaf0 + 黑字</span>
橙色 #fd7e14 + 白字 <span style="background-color: #fd7e14; color: #fff;">橙色 #fd7e14 + 白字</span>
深灰 #343a40 + 白字 <span style="background-color: #343a40; color: #fff;">深灰 #343a40 + 白字</span>

代码相关颜色

数字/常量 #fba922 <span style="color: #fba922;">数字/常量 #fba922</span>
关键字 #dc3545 <span style="color: #dc3545;">关键字 #dc3545</span>
字符串 #198754 <span style="color: #198754;">字符串 #198754</span>
函数/类型 #0d6efd <span style="color: #0d6efd;">函数/类型 #0d6efd</span>
特殊符号 #a36ac7 <span style="color: #a36ac7;">特殊符号 #a36ac7</span>
注释 #969896 <span style="color: #969896;">注释 #969896</span>

高对比度组合（推荐使用）

这些组合在任何背景下都保持清晰：

纯黑底白字 <span style="background-color: #000; color: #fff;">纯黑底白字</span>
纯白底黑字<span style="background-color: #fff; color: #000;border: 1px solid #ddd;">纯黑底白字</span>
红色底白字 <span style="background-color: #dc3545; color: #fff;">红色底白字</span>
蓝色底白字 <span style="background-color: #0d6efd; color: #fff;">蓝色底白字</span>
绿色底白字 <span style="background-color: #198754; color: #fff;">绿色底白字</span>

HTML 标签测试

带边框的 html 文本容器

<div style="display: flex; justify-content: center;"> <pre style="text-align: left; border: 2px solid #333; padding: 15px; line-height: 1.4; overflow-x: auto; max-width: 100%;">
Hex View   00 01 02 03 04 05 06 07  08 09 0A 0B 0C 0D 0E 0F
--------   -----------------------  -----------------------   ----------------
00000000   ef 72 b8 f0 22 26 68 ed  b6 0f 06 e9 08 00 45 00   .r.."&h.......E. 
00000010   00 34 00 00 40 00 34 06  dc 3a b6 8c e1 30 c0 a8   .4..@.4..:...0.. 
00000020   00 0a 00 50 ee 61 9e 66  b5 65 de 81 e5 16 80 12   ...P.a.f.e...... 
00000030   ff ff fe d8 00 00 02 04  05 3c 01 01 04 02 01 03   .........<...... 
00000040   03 07                                              ..
</pre> </div>

Hex View   00 01 02 03 04 05 06 07  08 09 0A 0B 0C 0D 0E 0F
--------   -----------------------  -----------------------   ----------------
00000000   ef 72 b8 f0 22 26 68 ed  b6 0f 06 e9 08 00 45 00   .r.."&h.......E. 
00000010   00 34 00 00 40 00 34 06  dc 3a b6 8c e1 30 c0 a8   .4..@.4..:...0.. 
00000020   00 0a 00 50 ee 61 9e 66  b5 65 de 81 e5 16 80 12   ...P.a.f.e...... 
00000030   ff ff fe d8 00 00 02 04  05 3c 01 01 04 02 01 03   .........<...... 
00000040   03 07                                              ..

不带边框的 html 文本容器

<div style="display: flex; justify-content: center;">
<pre style="text-align: left; padding: 15px; line-height: 1; overflow-x: auto; max-width: 100%;">
      +-----+              +=======================+
 A ---| &   |              |       Nand Gate       |
      |     o--- out       |=======================|
 B ---|     |              |   A   |   B   |  out  |
      +-----+              |-------|-------|-------|
                           |   0   |   0   |   1   |
                           |-------|-------|-------|
if (A=B=1) set out=0       |   0   |   1   |   1   |
else set out=1             |-------|-------|-------|
                           |   1   |   0   |   1   |
                           |-------|-------|-------|
                           |   1   |   1   |   0   |
                           +-----------------------+
<br /><q style="font-size: 0.8em;">注：(1) 左上、左下、右侧分别为：与门的元器件图示、逻辑描述、真值表<br />    (2) 与门 (and) 仅在两个输出均为 1 时返回 1</q></pre>
</span></pre>
</div>

      +-----+              +=======================+
 A ---| &   |              |       Nand Gate       |
      |     o--- out       |=======================|
 B ---|     |              |   A   |   B   |  out  |
      +-----+              |-------|-------|-------|
                           |   0   |   0   |   1   |
                           |-------|-------|-------|
if (A=B=1) set out=0       |   0   |   1   |   1   |
else set out=1             |-------|-------|-------|
                           |   1   |   0   |   1   |
                           |-------|-------|-------|
                           |   1   |   1   |   0   |
                           +-----------------------+

注：(1) 左上、左下、右侧分别为：与门的元器件图示、逻辑描述、真值表
    (2) 与门 (and) 仅在两个输出均为 1 时返回 1

图片测试

普通图片

![示例图片](/images/path/filename.jpg)

示例图片

带标题的图片

<figure>
  <img src="/images/path/filename.jpg" alt="描述性文本 (头像)" style="display: block; margin-left: auto; margin-right: auto;">
  <figcaption>题注: (icon)</figcaption>
</figure>
描述性文本 (头像)
题注: (icon)

长文本测试

这是一段较长的文本，用于测试段落排版和行高。良好的排版应该让阅读变得轻松舒适，字间距、行间距都需要经过精心调整。中英文混排时，还需要特别注意字体选择和字重搭配，确保整体视觉效果和谐统一。

特殊字符

ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ
⓿❶❷❸❹❺❻❼❽❾❿⓫⓬⓭⓮⓯⓰⓱⓲⓳⓴ ⓪①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳
º¹²³⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿ′ ₀₁₂₃₄₅₆₇₈₉₊₋₌₍₎ ×÷
½ ⊕⊖⊗⊘⊙ ─│┌┬┐└┴┘├┼┤╭╮╰╯∾∫× ━┃┏┳┓┗┻┛┣╋┫ ═║╔╦╗╚╩╝╠╬╣
⬆️↗️➡️↘️⬇️↙️⬅️↖️⭐🌟❤️▪️◾📝📁📂✔️❌⭕☑️✅❎◾　🟥
‹› ﹛﹜ 『』 〖〗 [] 《》 ﹝﹞ 〔〕 {} 「」 【】
︵︶ ︷︸ ︿﹀ ︹︺ ︽︾ ﹁﹂ ﹃﹄ ︻︼
⋀⋁><←↑↓→⋮⋱⋰⟵⟶⇠ ⋯ ⇢ ↖↗↘↙←→ ∨∧ ★■ ═══════════════════════
© ® ™ … — – « » ‹ ›

本文档最后更新于 2026-04-09