博客美化 - 更改引用和代码块的渲染，支持GitHub Alert

本文最后更新于 2026年4月10日 下午

长期以来我一直觉得我的博客的引用、代码块丑陋不堪，以及不支持GitHub Alert如[!TIPS]等特性十分难受，今天逐个解决了一下。

全程Vibe Coding解决，使用Copilot + GPT 5.3 Codex High。

引用部分

prompt大致是仿照VitePress的风格，修改引用块的部分。

具体文件位于 source/css/custom.css，并通过主题配置 _config.fluid.yml 里的 custom_css 引入。

引用块主要做了三件事：

  1. 调整左侧强调边框；
  2. 增加圆角与背景渐变；
  3. 统一暗色模式下的颜色变量。

例如核心样式大致是这样：

:root {
  --vp-like-quote-bg: #f5f9ff;
  --vp-like-quote-border: #3a8ee6;
}

.markdown-body blockquote {
  border-left: 4px solid var(--vp-like-quote-border);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, var(--vp-like-quote-bg), transparent);
}

代码块部分

prompt也差不多，仿照VitePress的风格，然后修改了样式和代码字体。

代码字体用了这组：JetBrains Mono、Fira Code、Cascadia Code，再回退到常见 monospace。

代码块样式改动重点：

  1. 统一边框、圆角、背景色；
  2. 调整 figure.highlight 的表格布局；
  3. 保证横向滚动时不破版；
  4. 行号列与代码列行高、间距保持一致。

关键样式示例：

.markdown-body figure.highlight {
  border: 1px solid var(--vp-like-code-border);
  border-radius: 12px;
  overflow-x: auto;
}

.markdown-body figure.highlight td.gutter pre,
.markdown-body figure.highlight td.code > pre {
  line-height: 1.75 !important;
}

By LLM:

关于代码行号，我这里做了“双保险”：

  1. 配置层：在 _config.fluid.yml 和 _config.yml 里都将行号相关开关设为 false；
  2. 渲染后处理层：加了 scripts/strip-code-gutter.js，在 after_post_render 阶段检测到 line_number: false 时，主动移除 figure.highlight 里的 td.gutter。

这样即使某些页面因为历史缓存或渲染链差异仍带了 gutter，也会在最终 HTML 输出前被剥离，保证页面表现与配置一致。

支持GitHub Alert的处理

个人不懂Markdown的解析过程，但是阅读Hexo Fluid官方文档的时候，看到了这一部分：

Hexo Fluid文档关于Tag的描述

于是我就考虑能否将类似于

> [!TIPS]

的格式，解析成Hexo Fluid原生支持的格式？

把上面的idea喂给Copilot，写成了一个JavaScript脚本scripts\gfm-alert-to-note.js。

通过这样映射：

const ALERT_CLASS_MAP = {
  note: 'info',
  tip: 'success',
  tips: 'success',
  important: 'primary',
  warning: 'danger',
  caution: 'warning'
};

脚本思路其实很直接：

  1. 在 after_post_render 拿到文章渲染后的 HTML；
  2. 用 cheerio 找到所有 blockquote；
  3. 检查第一行是否是 [!NOTE] / [!TIP] 这类标记；
  4. 按映射表把类型转换成 Fluid 的 note-xxx；
  5. 最后把原始 blockquote 替换为 <div class="note note-xxx">...</div>。

对应实现文件是：scripts/gfm-alert-to-note.js。

效果对比

之前：

code-format-show
quote-show

现在：

code-now-show
quote-now-show

总结

其实今天本来是打算把博客迁移到VitePress上的（单纯觉得太好看了），但是发现我考虑不清楚如何设计一个合适的文件目录结构，以及该如何合理划分内容的编排，所以暂且搁置吧。

没准下次更新的博客就是《把博客迁移到VitePress》上了。