[{"data":1,"prerenderedAt":716},["ShallowReactive",2],{"navigation_examples":3,"navigation_docs":95,"-examples-plugins-vue-vite-binding":295,"-examples-plugins-vue-vite-binding-surround":710,"$fO2LDsatOlEnN_yILttRzgSL1iDDCnMGs-5UWDWAVZbc":713},[4],{"title":5,"path":6,"stem":7,"children":8,"page":34},"Examples","\u002Fexamples","examples",[9,35,60],{"title":10,"path":11,"stem":12,"children":13,"page":34},"Frameworks","\u002Fexamples\u002Fframeworks","examples\u002F1.frameworks",[14,19,24,29],{"title":15,"path":16,"stem":17,"icon":18},"Astro","\u002Fexamples\u002Fframeworks\u002Fastro","examples\u002F1.frameworks\u002Fastro\u002FREADME","i-simple-icons:astro",{"title":20,"path":21,"stem":22,"icon":23},"Next.js","\u002Fexamples\u002Fframeworks\u002Fnextjs","examples\u002F1.frameworks\u002Fnextjs\u002FREADME","i-simple-icons:nextdotjs",{"title":25,"path":26,"stem":27,"icon":28},"Nuxt","\u002Fexamples\u002Fframeworks\u002Fnuxt-ui","examples\u002F1.frameworks\u002Fnuxt\u002FREADME","i-simple-icons-nuxt",{"title":30,"path":31,"stem":32,"icon":33},"VitePress","\u002Fexamples\u002Fframeworks\u002Fvitepress","examples\u002F1.frameworks\u002Fvitepress\u002FREADME","i-simple-icons-vitepress",false,{"title":36,"path":37,"stem":38,"children":39,"page":34},"Vite","\u002Fexamples\u002Fvite","examples\u002F2.vite",[40,45,50,55],{"title":41,"path":42,"stem":43,"icon":44},"HTML Preview","\u002Fexamples\u002Fvite\u002Fhtml","examples\u002F2.vite\u002Fhtml\u002FREADME","i-lucide-file-code",{"title":46,"path":47,"stem":48,"icon":49},"React","\u002Fexamples\u002Fvite\u002Freact","examples\u002F2.vite\u002Freact\u002FREADME","i-simple-icons-react",{"title":51,"path":52,"stem":53,"icon":54},"Svelte","\u002Fexamples\u002Fvite\u002Fsvelte","examples\u002F2.vite\u002Fsvelte\u002FREADME","i-simple-icons-svelte",{"title":56,"path":57,"stem":58,"icon":59},"Vue","\u002Fexamples\u002Fvite\u002Fvue","examples\u002F2.vite\u002Fvue\u002FREADME","i-simple-icons-vuedotjs",{"title":61,"path":62,"stem":63,"children":64,"page":34},"Plugins","\u002Fexamples\u002Fplugins","examples\u002F3.plugins",[65,70,75,80,85,90],{"title":66,"path":67,"stem":68,"icon":69},"Binding (frontmatter + data)","\u002Fexamples\u002Fplugins\u002Fvue-vite-binding","examples\u002F3.plugins\u002Fvue-vite-binding\u002FREADME","i-lucide-replace",{"title":71,"path":72,"stem":73,"icon":74},"Syntax Highlighting","\u002Fexamples\u002Fplugins\u002Fvue-vite-highlight","examples\u002F3.plugins\u002Fvue-vite-highlight\u002FREADME","i-lucide-code",{"title":76,"path":77,"stem":78,"icon":79},"JSON Render","\u002Fexamples\u002Fplugins\u002Fvue-vite-json-render","examples\u002F3.plugins\u002Fvue-vite-json-render\u002FREADME","i-lucide-braces",{"title":81,"path":82,"stem":83,"icon":84},"Math formulas","\u002Fexamples\u002Fplugins\u002Fvue-vite-math","examples\u002F3.plugins\u002Fvue-vite-math\u002FREADME","i-lucide-calculator",{"title":86,"path":87,"stem":88,"icon":89},"Mermaid diagrams","\u002Fexamples\u002Fplugins\u002Fvue-vite-mermaid","examples\u002F3.plugins\u002Fvue-vite-mermaid\u002FREADME","i-simple-icons-mermaid",{"title":91,"path":92,"stem":93,"icon":94},"Punctuation","\u002Fexamples\u002Fplugins\u002Fvue-vite-punctuation","examples\u002F3.plugins\u002Fvue-vite-punctuation\u002FREADME","i-lucide-quote",[96,110,132,159,251,273],{"title":97,"icon":98,"path":99,"stem":100,"children":101,"page":34},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[102,106],{"title":103,"path":104,"stem":105},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F0.introduction",{"title":107,"path":108,"stem":109},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F1.installation",{"title":111,"icon":112,"path":113,"stem":114,"children":115,"page":34},"Syntax","i-lucide-file-text","\u002Fsyntax","2.syntax",[116,120,124,128],{"title":117,"path":118,"stem":119},"Markdown","\u002Fsyntax\u002Fmarkdown","2.syntax\u002F1.markdown",{"title":121,"path":122,"stem":123},"Components","\u002Fsyntax\u002Fcomponents","2.syntax\u002F2.components",{"title":125,"path":126,"stem":127},"Attributes","\u002Fsyntax\u002Fattributes","2.syntax\u002F3.attributes",{"title":129,"path":130,"stem":131},"AST","\u002Fsyntax\u002Fcomark-ast","2.syntax\u002F4.comark-ast",{"title":133,"icon":134,"path":135,"stem":136,"children":137,"page":34},"Rendering","i-lucide-layout","\u002Frendering","3.rendering",[138,142,145,148,151,154],{"title":139,"path":140,"stem":141,"icon":44},"HTML","\u002Frendering\u002Fhtml","3.rendering\u002F2.html",{"title":56,"path":143,"stem":144,"icon":59},"\u002Frendering\u002Fvue","3.rendering\u002F3.vue",{"title":25,"path":146,"stem":147,"icon":28},"\u002Frendering\u002Fnuxt","3.rendering\u002F4.nuxt",{"title":46,"path":149,"stem":150,"icon":49},"\u002Frendering\u002Freact","3.rendering\u002F5.react",{"title":51,"path":152,"stem":153,"icon":54},"\u002Frendering\u002Fsvelte","3.rendering\u002F6.svelte",{"title":155,"path":156,"stem":157,"icon":158},"ANSI (Terminal)","\u002Frendering\u002Fansi","3.rendering\u002F7.ansi","i-lucide-terminal",{"title":61,"icon":160,"path":161,"stem":162,"children":163,"page":34},"i-lucide-plug","\u002Fplugins","4.plugins",[164,234],{"title":165,"path":166,"stem":167,"children":168,"page":34},"Built-in","\u002Fplugins\u002Fbuilt-in","4.plugins\u002F1.built-in",[169,174,179,182,186,191,196,200,204,209,214,219,222,225,230],{"title":170,"path":171,"stem":172,"icon":173},"Security","\u002Fplugins\u002Fbuilt-in\u002Fsecurity","4.plugins\u002F1.built-in\u002F01.security","i-lucide-shield-check",{"title":175,"path":176,"stem":177,"icon":178},"Emoji","\u002Fplugins\u002Fbuilt-in\u002Femoji","4.plugins\u002F1.built-in\u002F02.emoji","i-lucide-smile",{"title":71,"path":180,"stem":181,"icon":74},"\u002Fplugins\u002Fbuilt-in\u002Fhighlight","4.plugins\u002F1.built-in\u002F03.highlight",{"title":183,"path":184,"stem":185,"icon":112},"Summary Extraction","\u002Fplugins\u002Fbuilt-in\u002Fsummary","4.plugins\u002F1.built-in\u002F04.summary",{"title":187,"path":188,"stem":189,"icon":190},"Table of Contents","\u002Fplugins\u002Fbuilt-in\u002Ftoc","4.plugins\u002F1.built-in\u002F05.toc","i-lucide-list",{"title":192,"path":193,"stem":194,"icon":195},"Alerts","\u002Fplugins\u002Fbuilt-in\u002Falert","4.plugins\u002F1.built-in\u002F06.alert","i-lucide-bell",{"title":197,"path":198,"stem":199,"icon":89},"Mermaid Diagrams","\u002Fplugins\u002Fbuilt-in\u002Fmermaid","4.plugins\u002F1.built-in\u002F07.mermaid",{"title":201,"path":202,"stem":203,"icon":84},"Mathematics","\u002Fplugins\u002Fbuilt-in\u002Fmath","4.plugins\u002F1.built-in\u002F08.math",{"title":205,"path":206,"stem":207,"icon":208},"Task List","\u002Fplugins\u002Fbuilt-in\u002Ftask-list","4.plugins\u002F1.built-in\u002F09.task-list","i-lucide-check-square",{"title":210,"path":211,"stem":212,"icon":213},"Headings","\u002Fplugins\u002Fbuilt-in\u002Fheadings","4.plugins\u002F1.built-in\u002F10.headings","i-lucide-heading",{"title":215,"path":216,"stem":217,"icon":218},"Footnotes","\u002Fplugins\u002Fbuilt-in\u002Ffootnotes","4.plugins\u002F1.built-in\u002F11.footnotes","i-lucide-footprints",{"title":76,"path":220,"stem":221,"icon":79},"\u002Fplugins\u002Fbuilt-in\u002Fjson-render","4.plugins\u002F1.built-in\u002F11.json-render",{"title":91,"path":223,"stem":224,"icon":94},"\u002Fplugins\u002Fbuilt-in\u002Fpunctuation","4.plugins\u002F1.built-in\u002F12.punctuation",{"title":226,"path":227,"stem":228,"icon":229},"Breaks","\u002Fplugins\u002Fbuilt-in\u002Fbreaks","4.plugins\u002F1.built-in\u002F13.breaks","i-lucide-corner-down-left",{"title":231,"path":232,"stem":233,"icon":69},"Binding","\u002Fplugins\u002Fbuilt-in\u002Fbinding","4.plugins\u002F1.built-in\u002F14.binding",{"title":235,"path":236,"stem":237,"children":238,"page":34},"Custom","\u002Fplugins\u002Fcustom","4.plugins\u002F2.custom",[239,243,247],{"title":240,"path":241,"stem":242},"Plugin API","\u002Fplugins\u002Fcustom\u002Fplugin-api","4.plugins\u002F2.custom\u002F1.plugin-api",{"title":244,"path":245,"stem":246},"AST API","\u002Fplugins\u002Fcustom\u002Fast-api","4.plugins\u002F2.custom\u002F2.ast-api",{"title":248,"path":249,"stem":250},"Markdown-it","\u002Fplugins\u002Fcustom\u002Fmarkdown-it","4.plugins\u002F2.custom\u002F3.markdown-it",{"title":252,"icon":253,"path":254,"stem":255,"children":256,"page":34},"API Reference","i-lucide-book-open","\u002Fapi","5.api",[257,261,265,269],{"title":258,"path":259,"stem":260},"Render API","\u002Fapi\u002Frender","5.api\u002F0.render",{"title":262,"path":263,"stem":264},"Parse API","\u002Fapi\u002Fparse","5.api\u002F1.parse",{"title":266,"path":267,"stem":268},"Streaming API","\u002Fapi\u002Fauto-close","5.api\u002F2.auto-close",{"title":270,"path":271,"stem":272},"Cheat Sheet","\u002Fapi\u002Freference","5.api\u002F3.reference",{"title":274,"icon":275,"path":276,"stem":277,"children":278,"page":34},"Knowledge Base","i-lucide-library","\u002Fkb","7.kb",[279,283,287,291],{"title":280,"path":281,"stem":282},"Why Comark?","\u002Fkb\u002Fwhy-comark","7.kb\u002F0.why-comark",{"title":284,"path":285,"stem":286},"Migration from MDC","\u002Fkb\u002Fmigration-from-mdc","7.kb\u002F2.migration-from-mdc",{"title":288,"path":289,"stem":290},"Migration from MDX","\u002Fkb\u002Fmigration-from-mdx","7.kb\u002F3.migration-from-mdx",{"title":292,"path":293,"stem":294},"Twoslash","\u002Fkb\u002Ftwoslash","7.kb\u002F4.twoslash",{"id":296,"title":66,"body":297,"category":61,"demo":701,"description":702,"extension":703,"icon":701,"meta":704,"navigation":707,"path":67,"seo":708,"stem":68,"__hash__":709},"examples\u002Fexamples\u002F3.plugins\u002Fvue-vite-binding\u002FREADME.md",{"type":298,"value":299,"toc":694},"minimark",[300,307,312,321,368,372,611,615,618,681],[301,302],"code-explorer",{"org":303,"repo":304,"path":305,"defaultValue":306},"comarkdown","comark","examples\u002F3.plugins\u002Fvue-vite-binding","src\u002FApp.vue",[308,309,311],"h2",{"id":310},"features","Features",[313,314,315,316,320],"p",{},"This example demonstrates the Comark ",[317,318,319],"code",{},"binding"," plugin in a Vue + Vite app:",[322,323,324,343,352,362],"ul",{},[325,326,327,334,335,338,339,342],"li",{},[328,329,330,333],"strong",{},[317,331,332],{},"{{ path }}"," shorthand"," — interpolate values from frontmatter, the renderer's ",[317,336,337],{},"data"," prop, or a parent component's ",[317,340,341],{},"props"," directly in your markdown.",[325,344,345,351],{},[328,346,347,350],{},[317,348,349],{},"|| default"," fallback"," — supply an inline default rendered when the dot-path doesn't resolve.",[325,353,354,357,358,361],{},[328,355,356],{},"Parent props"," — nested components can reference their enclosing component's resolved attributes via ",[317,359,360],{},"props.",".",[325,363,364,367],{},[328,365,366],{},"Typed values"," — bindings come through as real JS values (strings, numbers, objects) thanks to the shared data-binding layer.",[308,369,371],{"id":370},"usage","Usage",[373,374,375,428,535],"ol",{},[325,376,377,380],{},[313,378,379],{},"Import the plugin and its matching Vue component:",[381,382,386],"pre",{"language":383,"class":384,"tabindex":385},"ts","shiki shiki-themes material-theme-lighter material-theme-palenight","0",[317,387,389],{"class":388},"language-ts",[390,391,394,398,402,406,409,412,415,418,421,425],"span",{"class":392,"style":393},"line","display: inline",[390,395,397],{"style":396},"color:#39ADB5;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic","import",[390,399,401],{"style":400},"color:#90A4AE;--shiki-dark:#BABED8"," binding",[390,403,405],{"style":404},"color:#39ADB5;--shiki-dark:#89DDFF",",",[390,407,408],{"style":404}," {",[390,410,411],{"style":400}," Binding",[390,413,414],{"style":404}," }",[390,416,417],{"style":396}," from",[390,419,420],{"style":404}," '",[390,422,424],{"style":423},"color:#91B859;--shiki-dark:#C3E88D","@comark\u002Fvue\u002Fplugins\u002Fbinding",[390,426,427],{"style":404},"'",[325,429,430,437],{},[313,431,432,433,436],{},"Wire them into ",[317,434,435],{},"\u003CComark>",":",[381,438,440],{"language":439,"class":384,"tabindex":385},"vue",[317,441,443,452,453,452,472,452,494,452,516,452,530],{"class":442},"language-vue",[390,444,445,448],{"class":392,"style":393},[390,446,447],{"style":404},"\u003C",[390,449,451],{"style":450},"color:#E53935;--shiki-dark:#F07178","Comark","\n",[390,454,455,458,462,465,468,470],{"class":392,"style":393},[390,456,457],{"style":404},"  :",[390,459,461],{"style":460},"color:#9C3EDA;--shiki-dark:#C792EA","markdown",[390,463,464],{"style":404},"=",[390,466,467],{"style":404},"\"",[390,469,461],{"style":400},[390,471,467],{"style":404},[390,473,474,476,479,481,483,486,489,492],{"class":392,"style":393},[390,475,457],{"style":404},[390,477,478],{"style":460},"plugins",[390,480,464],{"style":404},[390,482,467],{"style":404},[390,484,485],{"style":400},"[",[390,487,319],{"style":488},"color:#6182B8;--shiki-dark:#82AAFF",[390,490,491],{"style":400},"()]",[390,493,467],{"style":404},[390,495,496,498,501,503,505,508,511,514],{"class":392,"style":393},[390,497,457],{"style":404},[390,499,500],{"style":460},"components",[390,502,464],{"style":404},[390,504,467],{"style":404},[390,506,507],{"style":404},"{",[390,509,510],{"style":400}," Binding ",[390,512,513],{"style":404},"}",[390,515,467],{"style":404},[390,517,518,520,522,524,526,528],{"class":392,"style":393},[390,519,457],{"style":404},[390,521,337],{"style":460},[390,523,464],{"style":404},[390,525,467],{"style":404},[390,527,337],{"style":400},[390,529,467],{"style":404},[390,531,532],{"class":392,"style":393},[390,533,534],{"style":400},"\u002F>",[325,536,537,544],{},[313,538,539,540,543],{},"Use ",[317,541,542],{},"{{ path || default }}"," anywhere in your markdown:",[381,545,546],{"language":461,"class":384,"tabindex":385},[317,547,549,452,554,452,561,452,572,452,576,452,578],{"class":548},"language-markdown",[390,550,551],{"class":392,"style":393},[390,552,553],{"style":404},"---",[390,555,556,559],{"class":392,"style":393},[390,557,558],{"style":450},"release",[390,560,436],{"style":404},[390,562,563,566,568],{"class":392,"style":393},[390,564,565],{"style":450},"  version",[390,567,436],{"style":404},[390,569,571],{"style":570},"color:#F76D47;--shiki-dark:#F78C6C"," 2.5.1",[390,573,574],{"class":392,"style":393},[390,575,553],{"style":404},[390,577],{"class":392,"style":393},[390,579,580,583,586,589,592,595,598,601,603,606,609],{"class":392,"style":393},[390,581,582],{"style":400},"Hello, ",[390,584,585],{"style":404},"{{",[390,587,588],{"style":400}," data.user.name ",[390,590,591],{"style":404},"||",[390,593,594],{"style":423}," friend",[390,596,597],{"style":404}," }}",[390,599,600],{"style":400}," — you are on v",[390,602,585],{"style":404},[390,604,605],{"style":400}," frontmatter.release.version ",[390,607,608],{"style":404},"}}",[390,610,361],{"style":400},[308,612,614],{"id":613},"namespaces","Namespaces",[313,616,617],{},"Bindings resolve against four namespaces:",[619,620,621,634],"table",{},[622,623,624],"thead",{},[625,626,627,631],"tr",{},[628,629,630],"th",{},"Namespace",[628,632,633],{},"Source",[635,636,637,648,658,672],"tbody",{},[625,638,639,645],{},[640,641,642],"td",{},[317,643,644],{},"frontmatter",[640,646,647],{},"The document's YAML frontmatter",[625,649,650,655],{},[640,651,652],{},[317,653,654],{},"meta",[640,656,657],{},"Plugin-populated metadata on the parsed tree",[625,659,660,664],{},[640,661,662],{},[317,663,337],{},[640,665,666,667,669,670],{},"The ",[317,668,337],{}," prop passed to ",[317,671,435],{},[625,673,674,678],{},[640,675,676],{},[317,677,341],{},[640,679,680],{},"Props of the enclosing Comark component",[313,682,683,684,688,689,693],{},"See the ",[685,686,687],"a",{"href":232},"Binding plugin docs"," and the ",[685,690,692],{"href":691},"\u002Fsyntax\u002Fcomponents#data-binding","data binding contract"," for the full reference.",{"title":695,"searchDepth":696,"depth":696,"links":697},"",2,[698,699,700],{"id":310,"depth":696,"text":311},{"id":370,"depth":696,"text":371},{"id":613,"depth":696,"text":614},null,"Example showing how to interpolate frontmatter and runtime data into Markdown using the Comark `binding` plugin in Vue and Vite.","md",{"data":705},{"title":66,"description":702,"navigation":706,"category":61,"path":67},{"icon":69},{"icon":69},{"title":66,"description":702},"aaeL1qyIVI4n4pg_e5wEvEf6BqCpt1t2uxnOqG7NdZM",[701,711],{"title":71,"path":72,"stem":73,"description":712,"icon":74,"children":-1},"Example showing how to use Comark with syntax highlighting using Shiki in Vue and Vite.",{"tree":714,"files":715},[],{},1777478561731]