假设你希望 Markdown 中的链接都带一个箭头,但正文、列表和标题继续沿用默认样式。给 components 传入 a 对应的 Vue 组件即可,不需要修改原文或重新编写 Markdown 解析器。
1. 准备自己的链接组件
示例的 reading/link.vue 接收已经校验的 href,通过默认插槽显示链接文字,再加上箭头。保留普通 <a>,点击和键盘操作仍使用浏览器链接行为。
2. 替换链接的显示
在阅读器所在组件中导入链接组件,并把它交给 components.a:
vue
<script setup lang="ts">
import { QuireMarkdown } from '@quirekit/incremark/vue'
import ReadingLink from './link.vue'
const components = { a: ReadingLink }
</script>
<template>
<QuireMarkdown content="[文档](https://example.com/docs)" :components="components" />
</template>
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 的表达式。