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

替换渲染组件

替换链接、图片或代码块的外观,同时保留原有 Markdown 解析。

假设你希望 Markdown 中的链接都带一个箭头,但正文、列表和标题继续沿用默认样式。给 components 传入 a 对应的 Vue 组件即可,不需要修改原文或重新编写 Markdown 解析器。

1. 准备自己的链接组件

示例的 reading/link.vue 接收已经校验的 href,通过默认插槽显示链接文字,再加上箭头。保留普通 <a>,点击和键盘操作仍使用浏览器链接行为。

2. 替换链接的显示

在阅读器所在组件中导入链接组件,并把它交给 components.a:

vue

a 指 Markdown 链接生成的语义标签。其他标签没有指定组件时,继续使用默认显示。下面可以看到正文保持原样,链接末尾增加了箭头;源码中的 reading/components.vue 负责装配,reading/link.vue 负责链接本身。

正在准备示例…

组件会收到什么

替换项组件使用的数据
a校验后的 href 和链接文字插槽
img校验后的图片地址等语义属性
pre精确的 code、language,适合接入代码查看器
h2、table 等对应元素的语义属性和默认子内容

需要源码位置时,显式声明 node?: MarkdownNodeInfo 属性。它包含 type/from/to,范围使用当前规范化文本的 UTF-16 偏移;不要把这个对象直接转发到 DOM 属性。

只改组件、语言、HTML 策略或传输状态不会重新解析文本。组件映射与 renderNode 回调 属于应用提供的可信代码;它们自行负责额外行为,不应执行来自 Markdown 的表达式。

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