Markdown 写博客够用了，但有时候总觉得差点意思——想要个折叠框、想要个提示条、想让某段内容动起来。好在 Hexo 渲染 Markdown 时不会过滤 HTML 标签，所以直接嵌进去就行。
这篇就当个笔记，记录一些能用上的写法。
折叠内容
用 <details> 就行，不需要任何 JS：
点开看看
折叠的内容放在这里，可以是代码、补充说明，或者单纯不想让页面太长的东西。
提示框
Markdown 没有提示框语法，但用 <div> 加几行样式就能做出来：
成功 — 操作完成。
错误 — 出了点问题，请检查后重试。
警告 — 这步操作不可撤销。
换个背景色和左边框颜色就能区分类型，没什么技术含量。
渐变文字
纯粹是 CSS 在起作用：
这段文字带渐变色
原理就是 background-clip: text 把背景裁到文字区域，再把文字本身设成透明。兼容性还行，现代浏览器都支持。
实时时钟
这个需要 JS 了。写个定时器每秒更新一次：
00:00:00
代码不复杂，setInterval 每秒跑一次，格式化一下时间塞进 DOM 就行。
进度条
用 @keyframes 从 0 拉到目标宽度，配合 IntersectionObserver 让它滚到可见时才播放：
HTML
CSS
JavaScript
思路：进度条初始不加 animation，IntersectionObserver 监听滚入视口后才加上动画 class。点重置按钮把 class 移除并重新监听，下次滚到又会再播。
小结
| 做法 | 效果 |
|---|---|
| 直接写 HTML 标签 | 折叠框、高亮、提示框 |
加 style 属性 |
颜色、布局、渐变 |
嵌 <script> |
时钟、交互 |
CSS @keyframes |
进度条、淡入动画 |
没什么黑魔法，就是在 Markdown 里混着写。Hexo 渲染时不会动这些标签，浏览器拿到原样渲染就行。下次想加点花活，直接往文章里塞就行。