[{"data":1,"prerenderedAt":302},["ShallowReactive",2],{"markdown-doc:\u002Fguide\u002Fhtml":3},{"id":4,"title":5,"body":6,"description":290,"extension":291,"keywords":292,"locale":293,"meta":294,"navigation":295,"order":296,"path":297,"section":298,"seo":299,"stem":300,"__hash__":301},"docs\u002Fguide\u002Fhtml.zh-CN.md","HTML 与内联样式",{"type":7,"value":8,"toc":286},"minimark",[9,22,27,40,179,186,193,197,210,214,258,269,283],[10,11,12,13,17,18,21],"p",{},"当 Markdown 包含 ",[14,15,16],"code",{},"\u003Cdiv>"," 卡片或其他 HTML 时，先决定是否需要把它显示成元素。默认会显示原始 HTML 文字；需要显示经过净化的元素时，再开启 ",[14,19,20],{},"html","。",[23,24,26],"h2",{"id":25},"开启并限制-html","开启并限制 HTML",[10,28,29,31,32,35,36,39],{},[14,30,20],{}," 为 ",[14,33,34],{},"true"," 时，完整 HTML 片段经 HTML parser 与固定\n白名单净化后生成 Vue 节点。支持块级和行内 HTML；行内 HTML 可包含 Markdown，代码内容\n保持字面值。事件属性、脚本、危险 URL、iframe、",[14,37,38],{},"\u003Cstyle>"," 标签和任意模板表达式不能开启。",[41,42,47],"pre",{"className":43,"code":44,"language":45,"meta":46,"style":46},"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,48,49,92,120,152,168],{"__ignoreMap":46},[50,51,54,58,62,65,69,72,76,79,81,83,85,87,89],"span",{"class":52,"line":53},"line",1,[50,55,57],{"class":56},"sVPnS","\u003C",[50,59,61],{"class":60},"su0ou","QuireMarkdown",[50,63,64],{"class":56}," :",[50,66,68],{"class":67},"sgQzM","content",[50,70,71],{"class":56},"=",[50,73,75],{"class":74},"s-HEn","\"",[50,77,78],{"class":56},"text",[50,80,75],{"class":74},[50,82,64],{"class":56},[50,84,20],{"class":67},[50,86,71],{"class":56},[50,88,75],{"class":74},[50,90,91],{"class":56},"{\n",[50,93,95,98,101,104,107,109,112,114,117],{"class":52,"line":94},2,[50,96,97],{"class":56},"  allowedElements: [",[50,99,100],{"class":74},"'div'",[50,102,103],{"class":56},", ",[50,105,106],{"class":74},"'span'",[50,108,103],{"class":56},[50,110,111],{"class":74},"'strong'",[50,113,103],{"class":56},[50,115,116],{"class":74},"'a'",[50,118,119],{"class":56},"],\n",[50,121,123,126,129,133,137,140,143,146,149],{"class":52,"line":122},3,[50,124,125],{"class":67},"  allowLink",[50,127,128],{"class":56},": ",[50,130,132],{"class":131},"sde8i","url",[50,134,136],{"class":135},"sDD9d"," =>",[50,138,139],{"class":56}," url.",[50,141,142],{"class":67},"startsWith",[50,144,145],{"class":56},"(",[50,147,148],{"class":74},"'https:\u002F\u002Fexample.com\u002F'",[50,150,151],{"class":56},"),\n",[50,153,155,158,161,164],{"class":52,"line":154},4,[50,156,157],{"class":67},"  allowImage",[50,159,160],{"class":56},": () ",[50,162,163],{"class":135},"=>",[50,165,167],{"class":166},"sUNQB"," false\n",[50,169,171,174,176],{"class":52,"line":170},5,[50,172,173],{"class":56},"}",[50,175,75],{"class":74},[50,177,178],{"class":56}," \u002F>\n",[10,180,181,182,185],{},"上面的配置只允许列出的四种标签，HTML 链接只接受指定站点，HTML 图片不显示。省略这些限制并设置 ",[14,183,184],{},"html: true"," 时，使用内置白名单。",[10,187,188,189,192],{},"这些选项只能进一步限制净化后的标签和 HTML URL，不改变普通 Markdown 链接策略。\nHTML 的 id 与片段链接使用阅读实例命名空间；文档中的 HTML 不能自行注册 Vue 组件。\n自定义组件通过上面的 ",[14,190,191],{},"components"," 或阅读贡献接入。未闭合、超过 65,536 个 UTF-16 单元、超过 32 层\n元素或超出解析节点预算的 HTML 片段保留源码。HTML 块内不重新解释 Markdown。段落中\n混入块元素、Markdown 链接内嵌 HTML 链接也保留源码，避免浏览器重排导致 SSR 水合不一致。",[23,194,196],{"id":195},"提示框布局与内联样式","提示框、布局与内联样式",[10,198,199,201,202,205,206,209],{},[14,200,184],{}," 默认移除 ",[14,203,204],{},"style"," 属性。需要呈现带背景、边框、间距的 HTML 卡片时，显式\n使用 ",[14,207,208],{},"html: { styles: 'safe' }","。下面的同一份 HTML 包含可换行的 Flex 卡片、表格、两层\n原生折叠面板、页内链接和后置引用；可以关闭样式对照，也可以流式回放。",[211,212],"docs-demo",{"name":213},"reading\u002Fhtml",[41,215,217],{"className":43,"code":216,"language":45,"meta":46,"style":46},"\u003CQuireMarkdown :content=\"text\" :html=\"{ styles: 'safe' }\" \u002F>\n",[14,218,219],{"__ignoreMap":46},[50,220,221,223,225,227,229,231,233,235,237,239,241,243,245,248,251,254,256],{"class":52,"line":53},[50,222,57],{"class":56},[50,224,61],{"class":60},[50,226,64],{"class":56},[50,228,68],{"class":67},[50,230,71],{"class":56},[50,232,75],{"class":74},[50,234,78],{"class":56},[50,236,75],{"class":74},[50,238,64],{"class":56},[50,240,20],{"class":67},[50,242,71],{"class":56},[50,244,75],{"class":74},[50,246,247],{"class":56},"{ styles: ",[50,249,250],{"class":74},"'safe'",[50,252,253],{"class":56}," }",[50,255,75],{"class":74},[50,257,178],{"class":56},[10,259,260,261,264,265,268],{},"这是一组固定样式子集：纯色背景\u002F文字、边框、非负间距与尺寸、基本文字排版、Flex 与\nGrid 布局。颜色接受十六进制和基础名称；Grid 列可使用 ",[14,262,263],{},"1fr 2fr","，不接受 ",[14,266,267],{},"repeat()"," 等\n函数。数值长度上限为 2048px、128em\u002Frem 或 100%，字体另有范围限制；单个 style 最多\n4096 个 UTF-16 单元、64 项声明。无效声明单项丢弃，超预算丢弃整个 style。",[10,270,271,272,275,276,279,280,282],{},"不接收 URL、CSS 函数、变量、转义、注释、",[14,273,274],{},"!important","、定位、z-index、动画、透明度、\n",[14,277,278],{},"display: none"," 或外部样式表。原始 class 仍受固定 HTML 净化规则约束。规则在服务端和\n客户端一致，样式策略变化会使块缓存失效；未闭合 HTML 继续保留源码，闭合后显示样式。\n更复杂的视觉能力通过宿主提供的 ",[14,281,191],{}," 接入。",[204,284,285],{},"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":46,"searchDepth":94,"depth":94,"links":287},[288,289],{"id":25,"depth":94,"text":26},{"id":195,"depth":94,"text":196},"显示 Markdown 中的 HTML，按需限制标签、地址和内联样式。","md",null,"zh-CN",{},true,6,"\u002Fguide\u002Fhtml","扩展与渲染",{"title":5,"description":290},"guide\u002Fhtml.zh-CN","2PE5lR9D1onWkWFeeqmrNGNmVE5245moQcBmmnBJMes",1793045321583]