Markdown 特性测试
这是一篇用来核对本站 Markdown 渲染效果的隐藏文章，常见的 Markdown 与 HTML 写法各来一份，改样式的时候可以进来看看有没有渲染崩。
本文章由 AI 生成。
本文在
article.json里写了"hidden": true，所以不会出现在博客列表中； 但 RSS、站点地图与左侧标签列表并不区分隐藏文章，正文里别写见不得人的东西。
标题层级
一级标题由文章标题自动生成，下面依次是二到六级标题，左侧的「目录」会按这些标题的层级自动生成，标题右侧的 🔗 可以复制锚点链接。
三级标题
四级标题
五级标题
六级标题
带标点、空格与 Emoji 🌟 的标题
标题里的标点、空格与 Emoji 都会被 marked 转写进 id 属性，例如这一节的锚点就是 #带标点空格与-emoji--的标题 这一类生成结果。
文本样式
| 写法 | 效果 |
|---|---|
**粗体** |
粗体 |
*斜体* |
斜体 |
***粗斜体*** |
粗斜体 |
~~删除线~~ |
|
==高亮== |
==高亮==（不是标准 Markdown，marked 不认，原样输出） |
| *反斜杠转义* | *反斜杠转义* |
<mark> |
高亮 |
<kbd> |
按 Ctrl + Shift + I 打开开发者工具 |
<abbr title="…"> |
CSS |
<sub> 与 <sup> |
H2O、x2 |
| HTML 实体 | © … 😀 |
链接
- 行内链接：本站首页
- 自动链接：https://dsy4567.icu
- 邮箱自动链接：dsy4567@outlook.com
- 引用式链接：博客列表
- 站内绝对路径：如何优化网站加载速度
- 锚点链接：跳回标题层级
- 链接里带格式：加粗的链接
- 链接里带括号：维基百科的括号条目
图片
本站自定义了一条 alt 尺寸语法 ，构建与前端渲染会据此写出 width / height 属性并开启懒加载，避免图片撑破布局或引起跳动。
带 title 的图片：
图片外面套链接（点图放大）：
不写尺寸的图片（没有占位高度，加载完成前会跳一下）：
列表
无序列表，嵌套用两个空格缩进：
- 苹果
- 香蕉
- 芭蕉
- 大蕉
- 更深一层
- 樱桃
有序列表，编号不从 1 开始时 start 属性会跟着变：
- 第三步
- 第四步
- 嵌套的有序项
- 再来一个
任务列表，marked 会渲染成禁用的复选框（本站没给 checkbox 写样式，用的是浏览器默认外观）：
- 已经做完的
- 还没做的
- 普通的条目
宽松列表，条目之间空一行后可以塞段落与代码块：
第一个条目
条目里的第二段。
const 结果 = 1 + 1;第二个条目
引用
单段引用， 引用里的第二行会被并进同一段。
空一行之后仍是引用里的新段落。
嵌套引用。
引用里的标题
- 引用里的列表
- 第二项
引用里的代码块
代码
行内代码：const 变量 = "值";；带反引号的用两个反引号包起来：含 ` 反引号；尖括号会被转义：<div>。
带语言标注的围栏代码块，语言名会显示在左上角，双击即可复制：
/**
* 计算平均分
* @param {number[]} 分数数组 分数列表
* @returns {number} 平均分
*/
function 计算平均分(分数数组) {
// 制表符缩进，与站点代码风格一致
const 总分 = 分数数组.reduce((累加, 当前) => 累加 + 当前, 0);
return 总分 / 分数数组.length;
}
console.log(计算平均分([90, 80, 100]));
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>示例页面</title>
</head>
<body>
<p>你好，世界</p>
</body>
</html>
#!/bin/bash
set -e
echo "你好，世界"
{
"id": "markdown-test",
"hidden": true,
"tags": ["技术"]
}
语言标注在 highlight.js 里不存在时，左上角会显示「未知」：
这里的语言标注 highlight.js 不认识
不写语言标注时交给 highlight.js 自动识别：
不写语言名也能双击复制
行首四个空格的缩进式代码块，没有语言标注，也没有复制按钮：
这是一段缩进式代码块
第二行仍然在同一个代码块里
表格
| 左对齐 | 居中 | 右对齐 |
|---|---|---|
| 内容 | 内容 | 100 |
加粗与代码 |
链接 | |
| 转义竖线 | | 第二列 | 第三列 |
| 长内容会换行 | 单元格里的内容长了会自动折行，不会把表格撑出容器 | 0.618 |
分隔线
三种写法都会渲染成 <hr>：
换行与空格
单个换行不会变成 <br>：这两行在源码里分了行
渲染后仍是同一段。
行尾两个空格 会变成硬换行。
行尾一个反斜杠
同样会变成硬换行。
需要排版缩进时可以用实体： 这就是两个全角空格的效果。
也可以直接写
标签来换行。
连续的空格 会被合并成一个。
HTML 与自定义标签
原生折叠块：
点击展开（里面是可以解析的 Markdown）
- 折叠块里的列表
- 折叠块里的加粗与
代码
本站自定义的剧透标签 <spoiler>，鼠标悬停或键盘聚焦后才会显示：
这就是被藏起来的内容
其它 HTML 标签：删除、插入、高亮、小字、程序输出、短引用
、code 标签、带内联样式的 span、反向文字。
HTML 注释不会显示：
已知不支持
- 脚注：
[^1]与[^1]: 说明会被 marked 当成引用式链接的写法，渲染成一条链接，而不是脚注。 - 高亮
==文本==：不是标准 Markdown，需要额外插件，本站没装。 - 定义列表：
术语换行接: 解释的写法没有任何效果。 - 任务列表以外的扩展：复选框只有浏览器默认样式，本站没有额外的 CSS。