使用 remark-directive 为 Unifiedjs 提供 Markdown 视频语法的解析
💡
原文中文，约11000字，阅读约需26分钟。
📝
内容提要
本文讨论了如何在使用 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 中渲染 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 属性，确保启用相应的插件以支持该语法。
➡️
