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