[{"data":1,"prerenderedAt":751},["ShallowReactive",2],{"text-diagram-doc:\u002Fen\u002Fguide\u002Frendering":3,"text-diagram-source:recipes\u002Frender.ts":275,"mdc--a8k2v9-key":276},{"id":4,"title":5,"body":6,"description":264,"extension":265,"keywords":266,"locale":267,"meta":268,"navigation":269,"order":40,"path":270,"section":271,"seo":272,"stem":273,"__hash__":274},"docs\u002Fguide\u002Frendering.en.md","Render without an editor",{"type":7,"value":8,"toc":256},"minimark",[9,18,23,26,128,138,142,165,187,191,194,201,205,208,211,215,234,238,248,252],[10,11,12,13,17],"p",{},"Use ",[14,15,16],"code",{},"@quirekit\u002Ftext-diagram\u002Fbrowser"," when you only need an image. It requires neither Vue nor the authoring UI. The caller supplies the language explicitly; the renderer does not guess it from source.",[19,20,22],"h2",{"id":21},"_1-generate-svg-from-source","1. Generate SVG from source",[10,24,25],{},"Provide a language, source and cancellation signal. In a browser, render a two-node flowchart:",[27,28,34],"pre",{"className":29,"code":30,"filename":31,"language":32,"meta":33,"style":33},"language-ts shiki shiki-themes github-light github-light github-dark","import { renderTextDiagram, rasterizeTextDiagram } from '@quirekit\u002Ftext-diagram\u002Fbrowser'\nconst controller = new AbortController()\nconst vector = await renderTextDiagram('mermaid', 'flowchart LR; A-->B', {\n  ownerDocument: document,\n  signal: controller.signal,\n})\n","Generate SVG","ts","",[14,35,36,56,79,110,116,122],{"__ignoreMap":33},[37,38,41,45,49,52],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"sDD9d","import",[37,46,48],{"class":47},"sVPnS"," { renderTextDiagram, rasterizeTextDiagram } ",[37,50,51],{"class":43},"from",[37,53,55],{"class":54},"s-HEn"," '@quirekit\u002Ftext-diagram\u002Fbrowser'\n",[37,57,59,62,66,69,72,76],{"class":39,"line":58},2,[37,60,61],{"class":43},"const",[37,63,65],{"class":64},"sUNQB"," controller",[37,67,68],{"class":43}," =",[37,70,71],{"class":43}," new",[37,73,75],{"class":74},"sgQzM"," AbortController",[37,77,78],{"class":47},"()\n",[37,80,82,84,87,89,92,95,98,101,104,107],{"class":39,"line":81},3,[37,83,61],{"class":43},[37,85,86],{"class":64}," vector",[37,88,68],{"class":43},[37,90,91],{"class":43}," await",[37,93,94],{"class":74}," renderTextDiagram",[37,96,97],{"class":47},"(",[37,99,100],{"class":54},"'mermaid'",[37,102,103],{"class":47},", ",[37,105,106],{"class":54},"'flowchart LR; A-->B'",[37,108,109],{"class":47},", {\n",[37,111,113],{"class":39,"line":112},4,[37,114,115],{"class":47},"  ownerDocument: document,\n",[37,117,119],{"class":39,"line":118},5,[37,120,121],{"class":47},"  signal: controller.signal,\n",[37,123,125],{"class":39,"line":124},6,[37,126,127],{"class":47},"})\n",[10,129,130,133,134,137],{},[14,131,132],{},"ownerDocument"," supplies browser measurement. ",[14,135,136],{},"signal"," allows cancellation when source changes or the page exits. The result retains this render's source and SVG.",[19,139,141],{"id":140},"_2-generate-png-from-the-same-result","2. Generate PNG from the same result",[27,143,146],{"className":29,"code":144,"filename":145,"language":32,"meta":33,"style":33},"const raster = await rasterizeTextDiagram(vector, document, controller.signal)\n","Generate PNG",[14,147,148],{"__ignoreMap":33},[37,149,150,152,155,157,159,162],{"class":39,"line":40},[37,151,61],{"class":43},[37,153,154],{"class":64}," raster",[37,156,68],{"class":43},[37,158,91],{"class":43},[37,160,161],{"class":74}," rasterizeTextDiagram",[37,163,164],{"class":47},"(vector, document, controller.signal)\n",[10,166,167,170,171,174,175,178,179,182,183,186],{},[14,168,169],{},"vector.svg"," is a static SVG string; ",[14,172,173],{},"raster.dataUrl"," can be used as an image ",[14,176,177],{},"src",". Both retain the rendered ",[14,180,181],{},"language"," and ",[14,184,185],{},"source",". Before displaying a result, verify that its request is still current; never attach an old image to new source.",[19,188,190],{"id":189},"concurrency-and-cleanup","Concurrency and cleanup",[10,192,193],{},"For successive edits, abort the previous controller before creating one for the new source. Cancellation prevents late results from being accepted; it does not promise immediate computation cancellation in every engine. Mermaid renders are serialized in a shared queue. PlantUML \u002F DOT use independent sandbox frames removed on cancellation.",[10,195,196,197,200],{},"If you create a Blob URL from SVG, call ",[14,198,199],{},"URL.revokeObjectURL"," when replacing the image or destroying the host. The host still owns its images, containers and events. PNG has a white background and scales to the raster budget; its pixel dimensions may differ from the SVG.",[19,202,204],{"id":203},"keep-source-on-failure","Keep source on failure",[10,206,207],{},"Blank or oversized source, syntax errors, unsupported external resources and engine timeouts can reject the Promise. Retiring an old request normally needs no error message. A current failure should show a short explanation, the original source and a retry action. Do not accept a diagnostic image as a valid preview.",[10,209,210],{},"Model functions do not validate DSL syntax. Editor highlighting is an authoring aid; successful engine rendering is the validation step.",[19,212,214],{"id":213},"server-rendering","Server rendering",[10,216,217,218,222,223,228,229,233],{},"Source objects, templates and Markdown fence functions work in Node. These rendering functions require DOM, font measurement, iframes and Canvas: ",[219,220,221],"strong",{},"they are not a Node rendering API",". SSR can display a saved PNG; open the workbench on the client. See ",[224,225,227],"a",{"href":226},"\u002Fen\u002Fguide\u002Fdeployment","deployment"," and the ",[224,230,232],{"href":231},"\u002Fen\u002Fapi\u002Fbrowser","browser API",".",[19,235,237],{"id":236},"complete-module-reference","Complete module reference",[10,239,240,243,244,247],{},[14,241,242],{},"recipes\u002Frender.ts"," combines these steps in one function; ",[14,245,246],{},"shared\u002Ftypes.ts"," defines the two results. Inspect the complete files below:",[249,250],"docs-recipe",{"name":251},"recipes\u002Frender",[253,254,255],"style",{},"html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}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":33,"searchDepth":58,"depth":58,"links":257},[258,259,260,261,262,263],{"id":21,"depth":58,"text":22},{"id":140,"depth":58,"text":141},{"id":189,"depth":58,"text":190},{"id":203,"depth":58,"text":204},{"id":213,"depth":58,"text":214},{"id":236,"depth":58,"text":237},"Generate SVG and PNG from an explicit language and source, with cancellation and cleanup.","md",null,"en",{},true,"\u002Fen\u002Fguide\u002Frendering","Integration",{"title":5,"description":264},"guide\u002Frendering.en","7AL8aBbvsqvD66og8fC_FUb1FpJEpgYENY4SXlxAC2A","import type { TextDiagramLanguage } from \"@quirekit\u002Ftext-diagram\";\nimport { renderTextDiagram, rasterizeTextDiagram } from \"@quirekit\u002Ftext-diagram\u002Fbrowser\";\nimport type { DiagramFiles } from \"..\u002Fshared\u002Ftypes\";\n\n\u002F**\n * Renders both formats in a browser without mounting the authoring UI.\n * @param language - Explicit supported grammar.\n * @param source - Exact source, kept alongside the generated files.\n * @param owner - Browser document used for measurement and rasterization.\n * @param signal - Abort on source replacement or host destruction.\n * @returns Sanitized SVG and PNG tied to the same immutable source snapshot.\n *\u002F\nexport async function createDiagramFiles(language: TextDiagramLanguage, source: string, owner: Document, signal: AbortSignal): Promise\u003CDiagramFiles> {\n  const vector = await renderTextDiagram(language, source, { ownerDocument: owner, signal });\n  const raster = await rasterizeTextDiagram(vector, owner, signal);\n  signal.throwIfAborted();\n  return { vector, raster };\n}\n",{"data":277,"body":278},{},{"type":279,"children":280},"root",[281,746],{"type":282,"tag":27,"props":283,"children":285},"element",{"className":29,"code":284,"language":32,"meta":33,"style":33},"import type { TextDiagramLanguage } from \"@quirekit\u002Ftext-diagram\";\nimport { renderTextDiagram, rasterizeTextDiagram } from \"@quirekit\u002Ftext-diagram\u002Fbrowser\";\nimport type { DiagramFiles } from \"..\u002Fshared\u002Ftypes\";\n\n\u002F**\n * Renders both formats in a browser without mounting the authoring UI.\n * @param language - Explicit supported grammar.\n * @param source - Exact source, kept alongside the generated files.\n * @param owner - Browser document used for measurement and rasterization.\n * @param signal - Abort on source replacement or host destruction.\n * @returns Sanitized SVG and PNG tied to the same immutable source snapshot.\n *\u002F\nexport async function createDiagramFiles(language: TextDiagramLanguage, source: string, owner: Document, signal: AbortSignal): Promise\u003CDiagramFiles> {\n  const vector = await renderTextDiagram(language, source, { ownerDocument: owner, signal });\n  const raster = await rasterizeTextDiagram(vector, owner, signal);\n  signal.throwIfAborted();\n  return { vector, raster };\n}\n\n",[286],{"type":282,"tag":14,"props":287,"children":288},{"__ignoreMap":33},[289,324,348,377,385,394,402,426,448,470,492,510,519,645,675,704,723,737],{"type":282,"tag":37,"props":290,"children":291},{"class":39,"line":40},[292,298,303,309,313,319],{"type":282,"tag":37,"props":293,"children":295},{"style":294},"--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583",[296],{"type":297,"value":44},"text",{"type":282,"tag":37,"props":299,"children":300},{"style":294},[301],{"type":297,"value":302}," type",{"type":282,"tag":37,"props":304,"children":306},{"style":305},"--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8",[307],{"type":297,"value":308}," { TextDiagramLanguage } ",{"type":282,"tag":37,"props":310,"children":311},{"style":294},[312],{"type":297,"value":51},{"type":282,"tag":37,"props":314,"children":316},{"style":315},"--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF",[317],{"type":297,"value":318}," \"@quirekit\u002Ftext-diagram\"",{"type":282,"tag":37,"props":320,"children":321},{"style":305},[322],{"type":297,"value":323},";\n",{"type":282,"tag":37,"props":325,"children":326},{"class":39,"line":58},[327,331,335,339,344],{"type":282,"tag":37,"props":328,"children":329},{"style":294},[330],{"type":297,"value":44},{"type":282,"tag":37,"props":332,"children":333},{"style":305},[334],{"type":297,"value":48},{"type":282,"tag":37,"props":336,"children":337},{"style":294},[338],{"type":297,"value":51},{"type":282,"tag":37,"props":340,"children":341},{"style":315},[342],{"type":297,"value":343}," \"@quirekit\u002Ftext-diagram\u002Fbrowser\"",{"type":282,"tag":37,"props":345,"children":346},{"style":305},[347],{"type":297,"value":323},{"type":282,"tag":37,"props":349,"children":350},{"class":39,"line":81},[351,355,359,364,368,373],{"type":282,"tag":37,"props":352,"children":353},{"style":294},[354],{"type":297,"value":44},{"type":282,"tag":37,"props":356,"children":357},{"style":294},[358],{"type":297,"value":302},{"type":282,"tag":37,"props":360,"children":361},{"style":305},[362],{"type":297,"value":363}," { DiagramFiles } ",{"type":282,"tag":37,"props":365,"children":366},{"style":294},[367],{"type":297,"value":51},{"type":282,"tag":37,"props":369,"children":370},{"style":315},[371],{"type":297,"value":372}," \"..\u002Fshared\u002Ftypes\"",{"type":282,"tag":37,"props":374,"children":375},{"style":305},[376],{"type":297,"value":323},{"type":282,"tag":37,"props":378,"children":379},{"class":39,"line":112},[380],{"type":282,"tag":37,"props":381,"children":382},{"emptyLinePlaceholder":269},[383],{"type":297,"value":384},"\n",{"type":282,"tag":37,"props":386,"children":387},{"class":39,"line":118},[388],{"type":282,"tag":37,"props":389,"children":391},{"style":390},"--shiki-default:#6A737D;--shiki-light:#6A737D;--shiki-dark:#6A737D",[392],{"type":297,"value":393},"\u002F**\n",{"type":282,"tag":37,"props":395,"children":396},{"class":39,"line":124},[397],{"type":282,"tag":37,"props":398,"children":399},{"style":390},[400],{"type":297,"value":401}," * Renders both formats in a browser without mounting the authoring UI.\n",{"type":282,"tag":37,"props":403,"children":405},{"class":39,"line":404},7,[406,411,416,421],{"type":282,"tag":37,"props":407,"children":408},{"style":390},[409],{"type":297,"value":410}," * ",{"type":282,"tag":37,"props":412,"children":413},{"style":294},[414],{"type":297,"value":415},"@param",{"type":282,"tag":37,"props":417,"children":418},{"style":305},[419],{"type":297,"value":420}," language",{"type":282,"tag":37,"props":422,"children":423},{"style":390},[424],{"type":297,"value":425}," - Explicit supported grammar.\n",{"type":282,"tag":37,"props":427,"children":429},{"class":39,"line":428},8,[430,434,438,443],{"type":282,"tag":37,"props":431,"children":432},{"style":390},[433],{"type":297,"value":410},{"type":282,"tag":37,"props":435,"children":436},{"style":294},[437],{"type":297,"value":415},{"type":282,"tag":37,"props":439,"children":440},{"style":305},[441],{"type":297,"value":442}," source",{"type":282,"tag":37,"props":444,"children":445},{"style":390},[446],{"type":297,"value":447}," - Exact source, kept alongside the generated files.\n",{"type":282,"tag":37,"props":449,"children":451},{"class":39,"line":450},9,[452,456,460,465],{"type":282,"tag":37,"props":453,"children":454},{"style":390},[455],{"type":297,"value":410},{"type":282,"tag":37,"props":457,"children":458},{"style":294},[459],{"type":297,"value":415},{"type":282,"tag":37,"props":461,"children":462},{"style":305},[463],{"type":297,"value":464}," owner",{"type":282,"tag":37,"props":466,"children":467},{"style":390},[468],{"type":297,"value":469}," - Browser document used for measurement and rasterization.\n",{"type":282,"tag":37,"props":471,"children":473},{"class":39,"line":472},10,[474,478,482,487],{"type":282,"tag":37,"props":475,"children":476},{"style":390},[477],{"type":297,"value":410},{"type":282,"tag":37,"props":479,"children":480},{"style":294},[481],{"type":297,"value":415},{"type":282,"tag":37,"props":483,"children":484},{"style":305},[485],{"type":297,"value":486}," signal",{"type":282,"tag":37,"props":488,"children":489},{"style":390},[490],{"type":297,"value":491}," - Abort on source replacement or host destruction.\n",{"type":282,"tag":37,"props":493,"children":495},{"class":39,"line":494},11,[496,500,505],{"type":282,"tag":37,"props":497,"children":498},{"style":390},[499],{"type":297,"value":410},{"type":282,"tag":37,"props":501,"children":502},{"style":294},[503],{"type":297,"value":504},"@returns",{"type":282,"tag":37,"props":506,"children":507},{"style":390},[508],{"type":297,"value":509}," Sanitized SVG and PNG tied to the same immutable source snapshot.\n",{"type":282,"tag":37,"props":511,"children":513},{"class":39,"line":512},12,[514],{"type":282,"tag":37,"props":515,"children":516},{"style":390},[517],{"type":297,"value":518}," *\u002F\n",{"type":282,"tag":37,"props":520,"children":522},{"class":39,"line":521},13,[523,528,533,538,544,548,553,558,563,567,571,575,581,585,590,594,599,603,607,611,616,621,625,630,635,640],{"type":282,"tag":37,"props":524,"children":525},{"style":294},[526],{"type":297,"value":527},"export",{"type":282,"tag":37,"props":529,"children":530},{"style":294},[531],{"type":297,"value":532}," async",{"type":282,"tag":37,"props":534,"children":535},{"style":294},[536],{"type":297,"value":537}," function",{"type":282,"tag":37,"props":539,"children":541},{"style":540},"--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0",[542],{"type":297,"value":543}," createDiagramFiles",{"type":282,"tag":37,"props":545,"children":546},{"style":305},[547],{"type":297,"value":97},{"type":282,"tag":37,"props":549,"children":551},{"style":550},"--shiki-default:#E36209;--shiki-light:#E36209;--shiki-dark:#FFAB70",[552],{"type":297,"value":181},{"type":282,"tag":37,"props":554,"children":555},{"style":294},[556],{"type":297,"value":557},":",{"type":282,"tag":37,"props":559,"children":560},{"style":540},[561],{"type":297,"value":562}," TextDiagramLanguage",{"type":282,"tag":37,"props":564,"children":565},{"style":305},[566],{"type":297,"value":103},{"type":282,"tag":37,"props":568,"children":569},{"style":550},[570],{"type":297,"value":185},{"type":282,"tag":37,"props":572,"children":573},{"style":294},[574],{"type":297,"value":557},{"type":282,"tag":37,"props":576,"children":578},{"style":577},"--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF",[579],{"type":297,"value":580}," string",{"type":282,"tag":37,"props":582,"children":583},{"style":305},[584],{"type":297,"value":103},{"type":282,"tag":37,"props":586,"children":587},{"style":550},[588],{"type":297,"value":589},"owner",{"type":282,"tag":37,"props":591,"children":592},{"style":294},[593],{"type":297,"value":557},{"type":282,"tag":37,"props":595,"children":596},{"style":540},[597],{"type":297,"value":598}," Document",{"type":282,"tag":37,"props":600,"children":601},{"style":305},[602],{"type":297,"value":103},{"type":282,"tag":37,"props":604,"children":605},{"style":550},[606],{"type":297,"value":136},{"type":282,"tag":37,"props":608,"children":609},{"style":294},[610],{"type":297,"value":557},{"type":282,"tag":37,"props":612,"children":613},{"style":540},[614],{"type":297,"value":615}," AbortSignal",{"type":282,"tag":37,"props":617,"children":618},{"style":305},[619],{"type":297,"value":620},")",{"type":282,"tag":37,"props":622,"children":623},{"style":294},[624],{"type":297,"value":557},{"type":282,"tag":37,"props":626,"children":627},{"style":540},[628],{"type":297,"value":629}," Promise",{"type":282,"tag":37,"props":631,"children":632},{"style":305},[633],{"type":297,"value":634},"\u003C",{"type":282,"tag":37,"props":636,"children":637},{"style":540},[638],{"type":297,"value":639},"DiagramFiles",{"type":282,"tag":37,"props":641,"children":642},{"style":305},[643],{"type":297,"value":644},"> {\n",{"type":282,"tag":37,"props":646,"children":648},{"class":39,"line":647},14,[649,654,658,662,666,670],{"type":282,"tag":37,"props":650,"children":651},{"style":294},[652],{"type":297,"value":653},"  const",{"type":282,"tag":37,"props":655,"children":656},{"style":577},[657],{"type":297,"value":86},{"type":282,"tag":37,"props":659,"children":660},{"style":294},[661],{"type":297,"value":68},{"type":282,"tag":37,"props":663,"children":664},{"style":294},[665],{"type":297,"value":91},{"type":282,"tag":37,"props":667,"children":668},{"style":540},[669],{"type":297,"value":94},{"type":282,"tag":37,"props":671,"children":672},{"style":305},[673],{"type":297,"value":674},"(language, source, { ownerDocument: owner, signal });\n",{"type":282,"tag":37,"props":676,"children":678},{"class":39,"line":677},15,[679,683,687,691,695,699],{"type":282,"tag":37,"props":680,"children":681},{"style":294},[682],{"type":297,"value":653},{"type":282,"tag":37,"props":684,"children":685},{"style":577},[686],{"type":297,"value":154},{"type":282,"tag":37,"props":688,"children":689},{"style":294},[690],{"type":297,"value":68},{"type":282,"tag":37,"props":692,"children":693},{"style":294},[694],{"type":297,"value":91},{"type":282,"tag":37,"props":696,"children":697},{"style":540},[698],{"type":297,"value":161},{"type":282,"tag":37,"props":700,"children":701},{"style":305},[702],{"type":297,"value":703},"(vector, owner, signal);\n",{"type":282,"tag":37,"props":705,"children":707},{"class":39,"line":706},16,[708,713,718],{"type":282,"tag":37,"props":709,"children":710},{"style":305},[711],{"type":297,"value":712},"  signal.",{"type":282,"tag":37,"props":714,"children":715},{"style":540},[716],{"type":297,"value":717},"throwIfAborted",{"type":282,"tag":37,"props":719,"children":720},{"style":305},[721],{"type":297,"value":722},"();\n",{"type":282,"tag":37,"props":724,"children":726},{"class":39,"line":725},17,[727,732],{"type":282,"tag":37,"props":728,"children":729},{"style":294},[730],{"type":297,"value":731},"  return",{"type":282,"tag":37,"props":733,"children":734},{"style":305},[735],{"type":297,"value":736}," { vector, raster };\n",{"type":282,"tag":37,"props":738,"children":740},{"class":39,"line":739},18,[741],{"type":282,"tag":37,"props":742,"children":743},{"style":305},[744],{"type":297,"value":745},"}\n",{"type":282,"tag":253,"props":747,"children":748},{},[749],{"type":297,"value":750},"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);}",1793045389220]