Markdown 中输入比例(如16:9)，页面渲染失败造成文本拆行、冒号丢失的解决办法

很多朋友可能会遇到这样一个奇怪的问题，明明在 Markdown 中输入正常的句子，比如 “偏向横屏比例（16：9 或 3:2）”，渲染到页面后却出现异常：

第一行显示：偏向横屏比例（16：9 或 3  
第二行显示：空行  
第三行显示：）。  

• 冒号后的数字（如 :2）被“吃掉”或丢失
• 内容被强制拆分成多行
• 类似 16:9、4:3、1:1、aspect(16:9) 等常见比例/分辨率写法都会触发
• 其他带冒号的普通文本（如时间 12:30、章节 1:2）也可能受影响，但比例最典型

博主在使用 Astro 中也遇到了同样的问题，且测试发现，是使用英文冒号时才出现这个问题。现在把解决办法发出来，希望能帮助到大家。

先进行了一些简单的尝试：

笨方法

方法 A：使用反引号

偏向横屏比例（16:9 或 `3:2`）。

方法 B：使用 HTML 实体

偏向横屏比例（16:9 或 3:2）。

方法 C：使用中文全角冒号

如果不介意视觉上的微小差异，中文冒号 ：

偏向横屏比例（16：9 或 3：2）。

虽然这些办法都能暂时解决问题，但是无疑是治标不治本，还给自己找了很多不必要的麻烦。这些方法显示比较笨，还改变了正常的输入方法，实在是不行，那就直接接着寻找其它方法。

在进行了深入查找后发现是，项目中使用了 remark-directive 插件（版本：v4.0.0）。找到问题跟原了，那咱直接移除病根，尝试在 astro.config.mjs 文件中注释掉该插件，发现上面的那句话在页面上终于能正常显示了。

但是这又引发另外一个问题，项目中的其它使用该插件实现的功能组件，比如：:::note、::vhLivePhoto、::vhMusic 等自定义组件都无法正常工作了。

不行啊，直接继续寻找办法。

询问 Ai，说是：remark-directive 导致 Markdown 中常见比例写法（如 16:9、3:2）被误解析为 text directive，造成文本拆行、冒号丢失。

给出的解决办法说是，可以写一个简单 post-process 插件来 “修复” 误判的 text directive，并给出了相关代码。但是这怎么行，为了解决一个简单的问题，还要装插件，这是把问题越搞越复杂了。

最终解决办法

其实不用这么复杂，从社区反馈得知：

remark-directive 从 v4.0.0 开始，故意不再忽略不支持/未知的 text directive（以前 v3.x 会自动忽略）

那么问题就简单了，既然以前的版本没有这个问题，那咱们直接把 remark-directive 插件退回到旧版本应该就能解决问题了。说干就干，直接卸载项目中的该插件，并安装其旧版本：

npm uninstall remark-directive
npm install remark-directive@3.0.1
# 或 pnpm add remark-directive@3.0.1

重启服务器后，发现显示终于正常了。