[{"data":1,"prerenderedAt":327},["ShallowReactive",2],{"markdown-doc:\u002Fguide\u002Fcomponents":3},{"id":4,"title":5,"body":6,"description":316,"extension":317,"keywords":318,"locale":319,"meta":320,"navigation":321,"order":123,"path":322,"section":323,"seo":324,"stem":325,"__hash__":326},"docs\u002Fguide\u002Fcomponents.zh-CN.md","替换渲染组件",{"type":7,"value":8,"toc":311},"minimark",[9,22,27,42,46,53,200,212,216,219,289,300,307],[10,11,12,13,17,18,21],"p",{},"假设你希望 Markdown 中的链接都带一个箭头，但正文、列表和标题继续沿用默认样式。给 ",[14,15,16],"code",{},"components"," 传入 ",[14,19,20],{},"a"," 对应的 Vue 组件即可，不需要修改原文或重新编写 Markdown 解析器。",[23,24,26],"h2",{"id":25},"_1-准备自己的链接组件","1. 准备自己的链接组件",[10,28,29,30,33,34,37,38,41],{},"示例的 ",[14,31,32],{},"reading\u002Flink.vue"," 接收已经校验的 ",[14,35,36],{},"href","，通过默认插槽显示链接文字，再加上箭头。保留普通 ",[14,39,40],{},"\u003Ca>","，点击和键盘操作仍使用浏览器链接行为。",[23,43,45],{"id":44},"_2-替换链接的显示","2. 替换链接的显示",[10,47,48,49,52],{},"在阅读器所在组件中导入链接组件，并把它交给 ",[14,50,51],{},"components.a","：",[54,55,60],"pre",{"className":56,"code":57,"language":58,"meta":59,"style":59},"language-vue shiki shiki-themes github-light github-light github-dark","\u003Cscript setup lang=\"ts\">\nimport { QuireMarkdown } from '@quirekit\u002Fincremark\u002Fvue'\nimport ReadingLink from '.\u002Flink.vue'\nconst components = { a: ReadingLink }\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003CQuireMarkdown content=\"[文档](https:\u002F\u002Fexample.com\u002Fdocs)\" :components=\"components\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[14,61,62,92,108,121,137,147,157,191],{"__ignoreMap":59},[63,64,67,71,75,79,82,85,89],"span",{"class":65,"line":66},"line",1,[63,68,70],{"class":69},"sVPnS","\u003C",[63,72,74],{"class":73},"su0ou","script",[63,76,78],{"class":77},"sgQzM"," setup",[63,80,81],{"class":77}," lang",[63,83,84],{"class":69},"=",[63,86,88],{"class":87},"s-HEn","\"ts\"",[63,90,91],{"class":69},">\n",[63,93,95,99,102,105],{"class":65,"line":94},2,[63,96,98],{"class":97},"sDD9d","import",[63,100,101],{"class":69}," { QuireMarkdown } ",[63,103,104],{"class":97},"from",[63,106,107],{"class":87}," '@quirekit\u002Fincremark\u002Fvue'\n",[63,109,111,113,116,118],{"class":65,"line":110},3,[63,112,98],{"class":97},[63,114,115],{"class":69}," ReadingLink ",[63,117,104],{"class":97},[63,119,120],{"class":87}," '.\u002Flink.vue'\n",[63,122,124,127,131,134],{"class":65,"line":123},4,[63,125,126],{"class":97},"const",[63,128,130],{"class":129},"sUNQB"," components",[63,132,133],{"class":97}," =",[63,135,136],{"class":69}," { a: ReadingLink }\n",[63,138,140,143,145],{"class":65,"line":139},5,[63,141,142],{"class":69},"\u003C\u002F",[63,144,74],{"class":73},[63,146,91],{"class":69},[63,148,150,152,155],{"class":65,"line":149},6,[63,151,70],{"class":69},[63,153,154],{"class":73},"template",[63,156,91],{"class":69},[63,158,160,163,166,169,171,174,177,179,181,184,186,188],{"class":65,"line":159},7,[63,161,162],{"class":69},"  \u003C",[63,164,165],{"class":73},"QuireMarkdown",[63,167,168],{"class":77}," content",[63,170,84],{"class":69},[63,172,173],{"class":87},"\"[文档](https:\u002F\u002Fexample.com\u002Fdocs)\"",[63,175,176],{"class":69}," :",[63,178,16],{"class":77},[63,180,84],{"class":69},[63,182,183],{"class":87},"\"",[63,185,16],{"class":69},[63,187,183],{"class":87},[63,189,190],{"class":69}," \u002F>\n",[63,192,194,196,198],{"class":65,"line":193},8,[63,195,142],{"class":69},[63,197,154],{"class":73},[63,199,91],{"class":69},[10,201,202,204,205,208,209,211],{},[14,203,20],{}," 指 Markdown 链接生成的语义标签。其他标签没有指定组件时，继续使用默认显示。下面可以看到正文保持原样，链接末尾增加了箭头；源码中的 ",[14,206,207],{},"reading\u002Fcomponents.vue"," 负责装配，",[14,210,32],{}," 负责链接本身。",[213,214],"docs-demo",{"name":215},"reading\u002Fcomponents",[23,217,218],{"id":218},"组件会收到什么",[220,221,222,235],"table",{},[223,224,225],"thead",{},[226,227,228,232],"tr",{},[229,230,231],"th",{},"替换项",[229,233,234],{},"组件使用的数据",[236,237,238,251,261,277],"tbody",{},[226,239,240,245],{},[241,242,243],"td",{},[14,244,20],{},[241,246,247,248,250],{},"校验后的 ",[14,249,36],{}," 和链接文字插槽",[226,252,253,258],{},[241,254,255],{},[14,256,257],{},"img",[241,259,260],{},"校验后的图片地址等语义属性",[226,262,263,267],{},[241,264,265],{},[14,266,54],{},[241,268,269,270,272,273,276],{},"精确的 ",[14,271,14],{},"、",[14,274,275],{},"language","，适合接入代码查看器",[226,278,279,286],{},[241,280,281,272,283,285],{},[14,282,23],{},[14,284,220],{}," 等",[241,287,288],{},"对应元素的语义属性和默认子内容",[10,290,291,292,295,296,299],{},"需要源码位置时，显式声明 ",[14,293,294],{},"node?: MarkdownNodeInfo"," 属性。它包含 ",[14,297,298],{},"type\u002Ffrom\u002Fto","，范围使用当前规范化文本的 UTF-16 偏移；不要把这个对象直接转发到 DOM 属性。",[10,301,302,303,306],{},"只改组件、语言、HTML 策略或传输状态不会重新解析文本。组件映射与 ",[14,304,305],{},"renderNode"," 回调\n属于应用提供的可信代码；它们自行负责额外行为，不应执行来自 Markdown 的表达式。",[308,309,310],"style",{},"html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .su0ou, html code.shiki .su0ou{--shiki-default:#22863A;--shiki-light:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":59,"searchDepth":94,"depth":94,"links":312},[313,314,315],{"id":25,"depth":94,"text":26},{"id":44,"depth":94,"text":45},{"id":218,"depth":94,"text":218},"替换链接、图片或代码块的外观，同时保留原有 Markdown 解析。","md",null,"zh-CN",{},true,"\u002Fguide\u002Fcomponents","扩展与渲染",{"title":5,"description":316},"guide\u002Fcomponents.zh-CN","tF1DQqVocmI8RWO1OQRYResFApuHKtInnjdel0Vfi_U",1793045321582]