[{"data":1,"prerenderedAt":326},["ShallowReactive",2],{"markdown-doc:\u002Fen\u002Fguide\u002Fcomponents":3},{"id":4,"title":5,"body":6,"description":315,"extension":316,"keywords":317,"locale":318,"meta":319,"navigation":320,"order":118,"path":321,"section":322,"seo":323,"stem":324,"__hash__":325},"docs\u002Fguide\u002Fcomponents.en.md","Custom components",{"type":7,"value":8,"toc":310},"minimark",[9,18,23,38,42,48,196,209,213,217,288,299,306],[10,11,12,13,17],"p",{},"Suppose every Markdown link should have an arrow, while body text, lists and headings keep their default appearance. Supply a Vue component for ",[14,15,16],"code",{},"components.a","; the source and Markdown parser stay the same.",[19,20,22],"h2",{"id":21},"_1-prepare-a-link-component","1. Prepare a link component",[10,24,25,26,29,30,33,34,37],{},"The example's ",[14,27,28],{},"reading\u002Flink.vue"," receives a validated ",[14,31,32],{},"href",", displays its default slot and adds an arrow. Keeping an ordinary ",[14,35,36],{},"\u003Ca>"," retains the browser's link and keyboard behavior.",[19,39,41],{"id":40},"_2-replace-link-presentation","2. Replace link presentation",[10,43,44,45,47],{},"Import the link component beside the reader and supply it as ",[14,46,16],{},":",[49,50,55],"pre",{"className":51,"code":52,"language":53,"meta":54,"style":54},"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=\"[Documentation](https:\u002F\u002Fexample.com\u002Fdocs)\" :components=\"components\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[14,56,57,87,103,116,132,142,152,187],{"__ignoreMap":54},[58,59,62,66,70,74,77,80,84],"span",{"class":60,"line":61},"line",1,[58,63,65],{"class":64},"sVPnS","\u003C",[58,67,69],{"class":68},"su0ou","script",[58,71,73],{"class":72},"sgQzM"," setup",[58,75,76],{"class":72}," lang",[58,78,79],{"class":64},"=",[58,81,83],{"class":82},"s-HEn","\"ts\"",[58,85,86],{"class":64},">\n",[58,88,90,94,97,100],{"class":60,"line":89},2,[58,91,93],{"class":92},"sDD9d","import",[58,95,96],{"class":64}," { QuireMarkdown } ",[58,98,99],{"class":92},"from",[58,101,102],{"class":82}," '@quirekit\u002Fincremark\u002Fvue'\n",[58,104,106,108,111,113],{"class":60,"line":105},3,[58,107,93],{"class":92},[58,109,110],{"class":64}," ReadingLink ",[58,112,99],{"class":92},[58,114,115],{"class":82}," '.\u002Flink.vue'\n",[58,117,119,122,126,129],{"class":60,"line":118},4,[58,120,121],{"class":92},"const",[58,123,125],{"class":124},"sUNQB"," components",[58,127,128],{"class":92}," =",[58,130,131],{"class":64}," { a: ReadingLink }\n",[58,133,135,138,140],{"class":60,"line":134},5,[58,136,137],{"class":64},"\u003C\u002F",[58,139,69],{"class":68},[58,141,86],{"class":64},[58,143,145,147,150],{"class":60,"line":144},6,[58,146,65],{"class":64},[58,148,149],{"class":68},"template",[58,151,86],{"class":64},[58,153,155,158,161,164,166,169,172,175,177,180,182,184],{"class":60,"line":154},7,[58,156,157],{"class":64},"  \u003C",[58,159,160],{"class":68},"QuireMarkdown",[58,162,163],{"class":72}," content",[58,165,79],{"class":64},[58,167,168],{"class":82},"\"[Documentation](https:\u002F\u002Fexample.com\u002Fdocs)\"",[58,170,171],{"class":64}," :",[58,173,174],{"class":72},"components",[58,176,79],{"class":64},[58,178,179],{"class":82},"\"",[58,181,174],{"class":64},[58,183,179],{"class":82},[58,185,186],{"class":64}," \u002F>\n",[58,188,190,192,194],{"class":60,"line":189},8,[58,191,137],{"class":64},[58,193,149],{"class":68},[58,195,86],{"class":64},[10,197,198,201,202,205,206,208],{},[14,199,200],{},"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. ",[14,203,204],{},"reading\u002Fcomponents.vue"," assembles the reader; ",[14,207,28],{}," defines the link itself.",[210,211],"docs-demo",{"name":212},"reading\u002Fcomponents",[19,214,216],{"id":215},"data-received-by-a-component","Data received by a component",[218,219,220,233],"table",{},[221,222,223],"thead",{},[224,225,226,230],"tr",{},[227,228,229],"th",{},"Replacement",[227,231,232],{},"Data supplied",[234,235,236,249,259,275],"tbody",{},[224,237,238,243],{},[239,240,241],"td",{},[14,242,200],{},[239,244,245,246,248],{},"Validated ",[14,247,32],{}," and a slot containing link text",[224,250,251,256],{},[239,252,253],{},[14,254,255],{},"img",[239,257,258],{},"Validated image destination and other semantic attributes",[224,260,261,265],{},[239,262,263],{},[14,264,49],{},[239,266,267,268,270,271,274],{},"Exact ",[14,269,14],{}," and ",[14,272,273],{},"language",", suitable for a code viewer",[224,276,277,285],{},[239,278,279,281,282,284],{},[14,280,19],{},", ",[14,283,218],{}," and others",[239,286,287],{},"Corresponding semantic attributes and default children",[10,289,290,291,294,295,298],{},"Explicitly declare ",[14,292,293],{},"node?: MarkdownNodeInfo"," if you need source positions. It contains ",[14,296,297],{},"type\u002Ffrom\u002Fto"," with UTF-16 offsets in the current normalized text. Do not forward this object as a DOM attribute.",[10,300,301,302,305],{},"Changing components, locale, HTML policy or transport status does not reparse source.\nComponent maps and ",[14,303,304],{},"renderNode"," callbacks are trusted application code and own any additional\nbehavior. They should not execute expressions supplied by Markdown.",[307,308,309],"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":54,"searchDepth":89,"depth":89,"links":311},[312,313,314],{"id":21,"depth":89,"text":22},{"id":40,"depth":89,"text":41},{"id":215,"depth":89,"text":216},"Replace links, images or code-block presentation while retaining Markdown parsing.","md",null,"en",{},true,"\u002Fen\u002Fguide\u002Fcomponents","Extensions and rendering",{"title":5,"description":315},"guide\u002Fcomponents.en","rWsFqYLeHgRfxvhjsQCReind1HsibPiNo95yb9Ive8c",1793045320729]