[{"data":1,"prerenderedAt":292},["ShallowReactive",2],{"markdown-doc:\u002Fen\u002Fguide\u002Fhtml":3},{"id":4,"title":5,"body":6,"description":280,"extension":281,"keywords":282,"locale":283,"meta":284,"navigation":285,"order":286,"path":287,"section":288,"seo":289,"stem":290,"__hash__":291},"docs\u002Fguide\u002Fhtml.en.md","HTML and inline styles",{"type":7,"value":8,"toc":276},"minimark",[9,18,23,34,173,179,182,186,199,203,247,258,273],[10,11,12,13,17],"p",{},"When Markdown contains an HTML card or other markup, decide whether it should become elements. By default it remains visible source text. Enable ",[14,15,16],"code",{},"html"," when you need sanitized HTML presentation.",[19,20,22],"h2",{"id":21},"enable-and-restrict-html","Enable and restrict HTML",[10,24,25,26,29,30,33],{},"With ",[14,27,28],{},"html: true",", complete HTML islands pass through an\nHTML parser and fixed allowlist sanitizer before becoming Vue nodes. Block and inline HTML\nare supported; inline HTML can contain Markdown, while code stays literal. Event attributes,\nscripts, dangerous URLs, iframe, ",[14,31,32],{},"\u003Cstyle>"," tags and arbitrary template expressions cannot be enabled.",[35,36,41],"pre",{"className":37,"code":38,"language":39,"meta":40,"style":40},"language-vue shiki shiki-themes github-light github-light github-dark","\u003CQuireMarkdown :content=\"text\" :html=\"{\n  allowedElements: ['div', 'span', 'strong', 'a'],\n  allowLink: url => url.startsWith('https:\u002F\u002Fexample.com\u002F'),\n  allowImage: () => false\n}\" \u002F>\n","vue","",[14,42,43,86,114,146,162],{"__ignoreMap":40},[44,45,48,52,56,59,63,66,70,73,75,77,79,81,83],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"sVPnS","\u003C",[44,53,55],{"class":54},"su0ou","QuireMarkdown",[44,57,58],{"class":50}," :",[44,60,62],{"class":61},"sgQzM","content",[44,64,65],{"class":50},"=",[44,67,69],{"class":68},"s-HEn","\"",[44,71,72],{"class":50},"text",[44,74,69],{"class":68},[44,76,58],{"class":50},[44,78,16],{"class":61},[44,80,65],{"class":50},[44,82,69],{"class":68},[44,84,85],{"class":50},"{\n",[44,87,89,92,95,98,101,103,106,108,111],{"class":46,"line":88},2,[44,90,91],{"class":50},"  allowedElements: [",[44,93,94],{"class":68},"'div'",[44,96,97],{"class":50},", ",[44,99,100],{"class":68},"'span'",[44,102,97],{"class":50},[44,104,105],{"class":68},"'strong'",[44,107,97],{"class":50},[44,109,110],{"class":68},"'a'",[44,112,113],{"class":50},"],\n",[44,115,117,120,123,127,131,134,137,140,143],{"class":46,"line":116},3,[44,118,119],{"class":61},"  allowLink",[44,121,122],{"class":50},": ",[44,124,126],{"class":125},"sde8i","url",[44,128,130],{"class":129},"sDD9d"," =>",[44,132,133],{"class":50}," url.",[44,135,136],{"class":61},"startsWith",[44,138,139],{"class":50},"(",[44,141,142],{"class":68},"'https:\u002F\u002Fexample.com\u002F'",[44,144,145],{"class":50},"),\n",[44,147,149,152,155,158],{"class":46,"line":148},4,[44,150,151],{"class":61},"  allowImage",[44,153,154],{"class":50},": () ",[44,156,157],{"class":129},"=>",[44,159,161],{"class":160},"sUNQB"," false\n",[44,163,165,168,170],{"class":46,"line":164},5,[44,166,167],{"class":50},"}",[44,169,69],{"class":68},[44,171,172],{"class":50}," \u002F>\n",[10,174,175,176,178],{},"The configuration above permits only four listed tags, restricts HTML links to one site and disallows HTML images. Setting ",[14,177,28],{}," without these restrictions uses the built-in allowlist.",[10,180,181],{},"These options only further restrict sanitized tags and HTML URLs; they do not change ordinary\nMarkdown link policy. HTML ids and fragment links are namespaced per reader. Document HTML\ncannot register Vue components; use the component map or reading contributions instead.\nIncomplete HTML, islands above 65,536 UTF-16 units, element depth above 32, or the parser node budget\nretain source. HTML blocks do not reinterpret Markdown inside them. Block elements in a\nparagraph and HTML anchors inside Markdown links retain source too, preventing browser\nrearrangement from causing SSR hydration mismatches.",[19,183,185],{"id":184},"cards-layouts-and-inline-styles","Cards, layouts and inline styles",[10,187,188,190,191,194,195,198],{},[14,189,28],{}," strips ",[14,192,193],{},"style"," attributes by default. Explicitly use ",[14,196,197],{},"html: { styles: 'safe' }","\nfor HTML cards with backgrounds, borders and spacing. This example uses wrapping Flex cards,\na table, nested native disclosures, an HTML fragment link and late Markdown references.\nToggle styles for comparison or replay the same source as a stream.",[200,201],"docs-demo",{"name":202},"reading\u002Fhtml",[35,204,206],{"className":37,"code":205,"language":39,"meta":40,"style":40},"\u003CQuireMarkdown :content=\"text\" :html=\"{ styles: 'safe' }\" \u002F>\n",[14,207,208],{"__ignoreMap":40},[44,209,210,212,214,216,218,220,222,224,226,228,230,232,234,237,240,243,245],{"class":46,"line":47},[44,211,51],{"class":50},[44,213,55],{"class":54},[44,215,58],{"class":50},[44,217,62],{"class":61},[44,219,65],{"class":50},[44,221,69],{"class":68},[44,223,72],{"class":50},[44,225,69],{"class":68},[44,227,58],{"class":50},[44,229,16],{"class":61},[44,231,65],{"class":50},[44,233,69],{"class":68},[44,235,236],{"class":50},"{ styles: ",[44,238,239],{"class":68},"'safe'",[44,241,242],{"class":50}," }",[44,244,69],{"class":68},[44,246,172],{"class":50},[10,248,249,250,253,254,257],{},"The fixed subset includes solid background\u002Ftext colors, borders, nonnegative spacing and sizes,\nbasic typography, Flex and Grid. Colors accept hexadecimal values and basic names; Grid columns\ncan use ",[14,251,252],{},"1fr 2fr",", but not functions such as ",[14,255,256],{},"repeat()",". Lengths are bounded to 2048px, 128em\u002Frem\nor 100%, with separate font-size limits. Each style attribute permits at most 4096 UTF-16 units\nand 64 declarations. Invalid declarations are dropped individually; exceeding a budget drops\nthe entire style attribute.",[10,259,260,261,264,265,268,269,272],{},"URLs, CSS functions, variables, escapes, comments, ",[14,262,263],{},"!important",", positioning, z-index,\nanimations, opacity, ",[14,266,267],{},"display: none"," and external stylesheets are not accepted. Source classes\nstill follow the fixed HTML sanitizer. The same rules run on the server and client; style policy\nchanges invalidate cached blocks. Incomplete HTML stays visible as source until its closing tag\narrives. Use host-provided ",[14,270,271],{},"components"," for richer presentation.",[193,274,275],{},"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 .sde8i, html code.shiki .sde8i{--shiki-default:#E36209;--shiki-light:#E36209;--shiki-dark:#FFAB70}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":40,"searchDepth":88,"depth":88,"links":277},[278,279],{"id":21,"depth":88,"text":22},{"id":184,"depth":88,"text":185},"Render Markdown HTML and restrict its elements, destinations and inline styles.","md",null,"en",{},true,6,"\u002Fen\u002Fguide\u002Fhtml","Extensions and rendering",{"title":5,"description":280},"guide\u002Fhtml.en","pJQeISG7q6j44eyANKssRJH2W4s-N_uZmOMjmCyCZBo",1793045321690]