HTML in Markdown 渲染测试

这篇文章用于验证博客构建系统（marked + v-html）对原生 HTML 标签的渲染支持。以下是各类 HTML 元素的展示。

1. details / summary 折叠块

点击展开隐藏内容

这是一段被折叠的内容。支持 Markdown 格式。

print("代码块也可以放在折叠区域内")
默认展开的折叠块

这个折叠块默认是展开状态，点击可以收起。

2. 自定义样式 div

渐变背景卡片
这是一个使用内联样式的 div 元素，带有渐变背景和圆角。
⚠️ 自定义警告框
使用 HTML + 内联样式实现的警告提示框。

3. 表格（HTML 原生）

特性 Markdown 表格 HTML 表格
合并单元格 ❌ 不支持 ✅ 支持
自定义样式 ❌ 有限 ✅ 完全控制
嵌套内容 ❌ 纯文本 ✅ 任意 HTML

4. 嵌入视频占位

🎬

此处可嵌入 <video> 或 <iframe>

5. 进度条

75%

6. kbd 键盘按键

使用 Ctrl + C 复制，Ctrl + V 粘贴。

按 Ctrl + Shift + I 打开开发者工具。

7. mark 高亮标记

这是一段包含 高亮文本 的段落。HTML 的 <mark> 标签可以标记重要内容。

8. sub / sup 上下标

水的化学式是 H2O。质能方程 E = mc2。

9. abbr 缩写

HTML 是网页的标准标记语言。

10. 引用块（HTML 增强）

这是一个使用自定义样式的 blockquote 元素。
— 带紫色左边框和淡紫色背景

11. 混合 Markdown 与 HTML

下面是一个混合使用的例子：

✅ 优点
  • 支持任意 HTML 标签
  • 内联样式完全生效
  • 可以与 Markdown 混排
❌ 限制
  • 无法引用外部 CSS 类
  • JS 脚本不会执行
  • 需注意 Tailwind prose 样式覆盖

结论

构建系统（marked + v-html）完整支持原生 HTML 渲染，包括内联样式、复杂布局和交互元素（如 <details>）。可以放心在 Markdown 中混用 HTML 来实现更丰富的排版效果。

本文由 AI 辅助生成，可能存在错误或遗漏，请以实际资料和官方文档为准。