使用 remark-directive 为 Unifiedjs 提供 Markdown 视频语法的解析
内容提要
本文讨论了如何在使用 Unifiedjs 渲染 Markdown 时解决视频标签被过滤的问题。作者发现需要启用 `allowDangerousHtml` 选项以支持 HTML 标签，并实现了一个自定义的 Remark 插件，使用 `:::video` 语法在 Markdown 中嵌入视频，成功渲染视频内容。
关键要点
-
在使用 Unifiedjs 渲染 Markdown 时，视频标签被过滤，需要启用 allowDangerousHtml 选项。
-
通过 remark-rehype 插件将 MDAST 转换为 HAST 时，HTML 标签可能会被屏蔽。
-
可以使用 remark-directive 插件实现自定义指令，以 :::video 语法在 Markdown 中嵌入视频。
-
自定义指令插件支持配置视频的 src、poster 和 title 属性，最终渲染为 <video> 标签。
-
在使用 rehype-sanitize 插件时，需要配置白名单以允许渲染视频标签及其属性。
延伸解读
Unifiedjs 的工作流程
Unifiedjs 的工作流程包括将 Markdown 转换为 MDAST，再通过 remark-rehype 转换为 HAST，最后由 Rehype 处理为 HTML。这一流程的清晰设计使得开发者能够更容易地定位和解决问题，尤其是在处理 HTML 标签时。
自定义指令的优势
使用 remark-directive 插件可以实现自定义指令，允许在 Markdown 中以更直观的方式嵌入视频。这种方法不仅简化了代码，还提高了可读性，适合需要频繁嵌入视频的场景。
安全性与性能考量
在启用 allowDangerousHtml 选项时，需注意安全性问题。虽然可以渲染 HTML 标签，但这也可能引入潜在的安全风险，因此在处理不受信任的内容时应谨慎使用。
延伸问答
如何在 Unifiedjs 中渲染 Markdown 视频标签？
需要启用 allowDangerousHtml 选项，并使用 remark-directive 插件实现自定义指令，以 :::video 语法嵌入视频。
为什么我的 Markdown 中的 <video> 标签会被过滤？
因为在使用 remark-rehype 插件时，默认会过滤 HTML 标签，需要配置 allowDangerousHtml 选项以允许渲染。
remark-directive 插件的作用是什么？
remark-directive 插件用于支持 Markdown 中的自定义指令语法，允许用户以更灵活的方式嵌入内容。
如何配置 rehype-sanitize 插件以允许视频标签？
在 rehype-sanitize 插件的选项中，需要配置 tagNames 和 attributes 的白名单，以允许渲染视频标签及其属性。
使用 Markdown 嵌入视频的最佳实践是什么？
可以使用 :::video 语法自定义指令来嵌入视频，同时确保配置相关插件以支持视频标签的渲染。
如何在 Markdown 中使用自定义指令嵌入视频？
使用 :::video 语法，后面跟视频的 src、poster 和 title 属性，确保启用相应的插件以支持该语法。
