跳到正文
QuireKit Markdown
开发者文档
预览版 · 未发布
扩展与渲染查看 Markdown ↗

HTML 与内联样式

显示 Markdown 中的 HTML,按需限制标签、地址和内联样式。

当 Markdown 包含 <div> 卡片或其他 HTML 时,先决定是否需要把它显示成元素。默认会显示原始 HTML 文字;需要显示经过净化的元素时,再开启 html。

开启并限制 HTML

html 为 true 时,完整 HTML 片段经 HTML parser 与固定 白名单净化后生成 Vue 节点。支持块级和行内 HTML;行内 HTML 可包含 Markdown,代码内容 保持字面值。事件属性、脚本、危险 URL、iframe、<style> 标签和任意模板表达式不能开启。

vue

上面的配置只允许列出的四种标签,HTML 链接只接受指定站点,HTML 图片不显示。省略这些限制并设置 html: true 时,使用内置白名单。

这些选项只能进一步限制净化后的标签和 HTML URL,不改变普通 Markdown 链接策略。 HTML 的 id 与片段链接使用阅读实例命名空间;文档中的 HTML 不能自行注册 Vue 组件。 自定义组件通过上面的 components 或阅读贡献接入。未闭合、超过 65,536 个 UTF-16 单元、超过 32 层 元素或超出解析节点预算的 HTML 片段保留源码。HTML 块内不重新解释 Markdown。段落中 混入块元素、Markdown 链接内嵌 HTML 链接也保留源码,避免浏览器重排导致 SSR 水合不一致。

提示框、布局与内联样式

html: true 默认移除 style 属性。需要呈现带背景、边框、间距的 HTML 卡片时,显式 使用 html: { styles: 'safe' }。下面的同一份 HTML 包含可换行的 Flex 卡片、表格、两层 原生折叠面板、页内链接和后置引用;可以关闭样式对照,也可以流式回放。

正在准备示例…

vue

这是一组固定样式子集:纯色背景/文字、边框、非负间距与尺寸、基本文字排版、Flex 与 Grid 布局。颜色接受十六进制和基础名称;Grid 列可使用 1fr 2fr,不接受 repeat() 等 函数。数值长度上限为 2048px、128em/rem 或 100%,字体另有范围限制;单个 style 最多 4096 个 UTF-16 单元、64 项声明。无效声明单项丢弃,超预算丢弃整个 style。

不接收 URL、CSS 函数、变量、转义、注释、!important、定位、z-index、动画、透明度、 display: none 或外部样式表。原始 class 仍受固定 HTML 净化规则约束。规则在服务端和 客户端一致,样式策略变化会使块缓存失效;未闭合 HTML 继续保留源码,闭合后显示样式。 更复杂的视觉能力通过宿主提供的 components 接入。

QuireKit Markdown · QuireKit流式 Markdown · @quirekit/incremark · MIT