Markdown 主题完整性测试源码

Markdown 主题完整测试页 本页用于系统测试 Markdown 渲染区域中的标题、正文、链接、列表、引用、分割线、图片、表格、代码块、强调文本、任务列表等样式是否正常。 重点观察： 浅色 / 深色模式下文字是否清晰； 各类代码块配色是否统一； 表格、引用、链接、图片、列表是否存在颜色冲突； 是否出现“黑底黑字”“亮底浅字”“链接过亮”“表格看不清”等问题。 --- 一级标题 H1 这是一段普通正文，用来测试正文颜色、字号、行高、段落间距、字重以及整体阅读舒适度。 这是 加粗文本 ，这是 斜体文本 ，这是 加粗斜体文本 ，这是 删除线文本 ，这是 行内代码 ，这是一个普通链接 。 这是一段较长的正文测试文本，用来检查在不同主题背景之下，正文颜色是否足够清晰，是否存在发灰、发黑、发虚、对比度不足的问题。一个合格的 Markdown 主题不只是“能显示”，还要在长时间阅读时足够稳定，不刺眼，不糊，不累。 --- 二级标题 H2 三级标题 H3 四级标题 H4 五级标题 H5 六级标题 H6 --- 文本强调测试 普通文本效果。 这是加粗文本效果。 这是斜体文本效果。 这是加粗斜体效果。 这是删除线文本效果。 这是包含 inline code 的句子，用来测试行内代码背景和文字颜色。 这是一个带链接的句子：访问测试链接 。 --- 无序列表测试 第一项普通文本 第二项包含 加粗内容 第三项包含 斜体内容 第四项包含 行内代码 第五项包含测试链接 嵌套无序列表 一级列表 二级列表 三级列表 四级列表 --- 有序列表测试 第一项普通文本 第二项包含 强调内容 第三项包含 代码片段 第四项包含 斜体说明 第五项包含 删除说明 --- 任务列表测试 [x] 已完成任务 [ ] 未完成任务 [x] 深色模式颜色测试 [ ] 浅色模式颜色测试 [x] 表格样式测试 [ ] 图片边框与间距测试 --- 引用块测试 这是一级引用块，用于测试： 引用背景色 引用左侧边框色 引用文字颜色 引用内部链接：Example 引用内部行内代码： const theme = 'dark' 引用中的标题 这里是引用中的正文，用来观察深色模式和浅色模式下，引用块内部标题与正文的颜色层级是否合理。 引用中的二级嵌套 这是二级嵌套引用，用于测试多层引用背景和缩进是否正常。 --- 分割线测试 上面应该有一条分割线，下面再来一条： --- 如果你的主题正常，那么分割线应该清晰但不抢眼。 --- 表格测试 | 测试项目 | 预期效果 | 当前说明 | |:--|:--|:--| | 正文颜色 | 清晰可读，不发灰 | 深浅色都要看 | | 标题颜色 | 层级明显，对比充足 | H1-H6 都检查 | | 链接颜色 | 明显区分正文 | hover 和 visited 要看 | | 行内代码 | 背景柔和，文字突出 | 不能太亮也不能太灰 | | 代码块背景 | 应有独立容器感 | 与正文区分明显 | | 表格表头 | 表头背景清晰 | 深色模式要重点看 | | 表格边框 | 不刺眼但可分辨 | 不能糊成一片 | | 表格 hover | 有轻微反馈 | 不要过重 | | 引用块 | 左边框和背景协调 | 文字不能发灰 | | 图片样式 | 间距自然，圆角协调 | 失败占位也要看 | --- 图片测试 测试图片 图片下方这段文字用于观察图片和段落之间的间距、圆角、阴影、边框、居中效果，以及加载失败时的替代显示是否正常。 --- 行内代码密集测试 以下内容用于测试多个 inline code 在连续文本中出现时的显示效果，例如 npm run dev 、 pnpm build 、 python main.py 、 SELECT FROM article 、 、 color: var(--md-text); 。 你需要重点观察： 行内代码背景是否过亮； 行内代码文字是否过黄； 与普通正文的区分是否明显； 行内代码在深色模式下是否仍然清晰。 --- 代码块测试：Bash bash cd /www/wwwroot/project npm install npm run dev npm run build scp -r dist/ root@server:/www/wwwroot/site 代码块测试：Python python def greet(name: str) - str: return f"Hello, {name}" if name == " main ": users = ["Alice", "Bob", "Charlie"] for user in users: print(greet(user)) 代码块测试：JavaScript javascript const theme = document.documentElement.dataset.theme; function applyTheme(name) { document.documentElement.dataset.theme = name; console.log("当前主题：", name); } if (theme === "dark") { applyTheme("dark"); } else { applyTheme("light"); } 代码块测试：TypeScript typescript interface User {