# 替换渲染组件

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

假设你希望 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` 负责链接本身。

### reading/components.vue

```vue
<script setup lang="ts">
import { computed } from "vue";
import { QuireMarkdown } from "@quirekit/incremark/vue";
import "@quirekit/incremark/styles.css";
import ReadingLink from "./link.vue";
import type { ExampleLocale } from "../shared/types";

const props = withDefaults(defineProps<{ /** Tutorial language. */ locale?: ExampleLocale }>(), { locale: "zh-CN" });
const components = { a: ReadingLink };
const source = computed(() => props.locale === "zh-CN"
  ? "普通正文保持默认样式，[文档链接](https://example.com/docs)由自己的组件显示。"
  : "Body text keeps its default appearance; the [documentation link](https://example.com/docs) uses a custom component.");
</script>
<template><div class="p-qk-surface"><QuireMarkdown :content="source" :components="components" :locale="locale" /></div></template>

```

### reading/link.vue

```vue
<script setup lang="ts">
import type { MarkdownNodeInfo } from "@quirekit/incremark/vue";
defineProps<{
  /** Validated link destination, omitted when HTML policy rejects it. */ href?: string;
  /** Source metadata is explicitly consumed rather than forwarded to the DOM. */ node?: MarkdownNodeInfo;
}>();
</script>
<template><a :href="href" class="qk-prose-node" data-custom-link><slot /> ↗</a></template>

```

### shared/types.ts

```ts
/** Example host language; independent of the documentation router. */
export type ExampleLocale = "zh-CN" | "en";

```

## 组件会收到什么

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

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

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