Custom components
Replace links, images or code-block presentation while retaining Markdown parsing.
Suppose every Markdown link should have an arrow, while body text, lists and headings keep their default appearance. Supply a Vue component for components.a; the source and Markdown parser stay the same.
1. Prepare a link component
The example's reading/link.vue receives a validated href, displays its default slot and adds an arrow. Keeping an ordinary <a> retains the browser's link and keyboard behavior.
2. Replace link presentation
Import the link component beside the reader and supply it as components.a:
<script setup lang="ts">
import { QuireMarkdown } from '@quirekit/incremark/vue'
import ReadingLink from './link.vue'
const components = { a: ReadingLink }
</script>
<template>
<QuireMarkdown content="[Documentation](https://example.com/docs)" :components="components" />
</template>
a names the semantic tag produced for Markdown links. Tags without a replacement keep their default output. In the example, body text remains unchanged and the link gains an arrow. reading/components.vue assembles the reader; reading/link.vue defines the link itself.
Data received by a component
| Replacement | Data supplied |
|---|---|
a | Validated href and a slot containing link text |
img | Validated image destination and other semantic attributes |
pre | Exact code and language, suitable for a code viewer |
h2, table and others | Corresponding semantic attributes and default children |
Explicitly declare node?: MarkdownNodeInfo if you need source positions. It contains type/from/to with UTF-16 offsets in the current normalized text. Do not forward this object as a DOM attribute.
Changing components, locale, HTML policy or transport status does not reparse source.
Component maps and renderNode callbacks are trusted application code and own any additional
behavior. They should not execute expressions supplied by Markdown.