[{"data":1,"prerenderedAt":453},["ShallowReactive",2],{"blog-markdown":3},{"path":4,"data":5,"meta":10,"nodes":18},"\u002Fblog\u002Fmarkdown",{"title":6,"description":7,"date":8,"badge":9},"Rendering Markdown with Comark Content","How Markdown files become a component tree you render with MarkdownDocument.","2026-07-15","Markdown",{"key":11,"source":12,"stem":13,"extension":14,"kind":15,"type":16,"partial":17},"default\u002Fblog\u002Fmarkdown.md","default","blog\u002Fmarkdown",".md","document","text\u002Fmarkdown",false,[19,23,54,59,81,175,195,199,206,433,449],[20,21,6],"h1",{"id":22},"rendering-markdown-with-comark-content",[24,25,26,27,32,33,36,37,40,41,45,46,49,50,53],"p",{},"Markdown is the natural fit for prose: articles, docs, changelogs. ",[28,29,31],"a",{"href":30},"https:\u002F\u002Fcomark-content-docs.vercel.app\u002F","Comark Content","\nparses every ",[34,35,14],"code",{}," file in ",[34,38,39],{},"content\u002F"," into a ",[42,43,44],"strong",{},"MarkdownDocument",": the frontmatter\nbecomes ",[34,47,48],{},"data",", and the body becomes a tree of ",[34,51,52],{},"nodes"," you render with Vue.",[55,56,58],"h2",{"id":57},"components-in-markdown","Components in Markdown",[24,60,61,65,66,68,69,72,73,76,77,80],{},[28,62,64],{"href":63},"https:\u002F\u002Fcomark.dev","Comark"," is short for ",[42,67,58],{},". On top of standard CommonMark and\nGFM, it adds a component syntax: a ",[34,70,71],{},"::"," block, ",[34,74,75],{},"{}"," props, and ",[34,78,79],{},"#name"," slots.",[82,83,86],"pre",{"language":84,"class":85},"md","shiki shiki-themes material-theme-lighter material-theme-palenight",[34,87,89,101,102,101,108,101,114,101,116,101,121,101,162,101,167,101,171],{"class":88},"language-md",[90,91,94,97],"span",{"class":92,"style":93},"line","display: inline",[90,95,71],{"style":96},"color:#39ADB5;--shiki-dark:#89DDFF",[90,98,100],{"style":99},"color:#E53935;--shiki-dark:#F07178","page-hero","\n",[90,103,104],{"class":92,"style":93},[90,105,107],{"style":106},"color:#9C3EDA;--shiki-dark:#C792EA","#title",[90,109,110],{"class":92,"style":93},[90,111,113],{"style":112},"color:#90A4AE;--shiki-dark:#BABED8","Hello from Markdown",[90,115],{"class":92,"style":93},[90,117,118],{"class":92,"style":93},[90,119,120],{"style":106},"#links",[90,122,123,126,129,132,135,138,141,145,147,150,152,154,157,159],{"class":92,"style":93},[90,124,125],{"style":96},"  :::",[90,127,128],{"style":99},"button",[90,130,131],{"style":96},"{",[90,133,134],{"style":106},"to",[90,136,137],{"style":96},"=",[90,139,140],{"style":96},"\"",[90,142,144],{"style":143},"color:#91B859;--shiki-dark:#C3E88D","\u002Fposts",[90,146,140],{"style":96},[90,148,149],{"style":106}," size",[90,151,137],{"style":96},[90,153,140],{"style":96},[90,155,156],{"style":143},"lg",[90,158,140],{"style":96},[90,160,161],{"style":96},"}",[90,163,164],{"class":92,"style":93},[90,165,166],{"style":112},"  Read the posts",[90,168,169],{"class":92,"style":93},[90,170,125],{"style":96},[90,172,173],{"class":92,"style":93},[90,174,71],{"style":96},[24,176,177,178,181,182,185,186,189,190,194],{},"Props use the ",[34,179,180],{},":"," prefix for typed values (",[34,183,184],{},":count=\"5\"",", ",[34,187,188],{},":items='[\"a\",\"b\"]'","),\nand named slots map to Vue slots. See the full\n",[28,191,193],{"href":192},"https:\u002F\u002Fcomark.dev\u002Fsyntax\u002Fcomponents","component syntax"," reference.",[55,196,198],{"id":197},"rendering-it","Rendering it",[24,200,201,202,205],{},"Fetch the parsed document from the Content instance, then hand its nodes to\n",[34,203,204],{},"\u003CMarkdownDocument>"," with a map from tag names to your components:",[82,207,210],{"language":208,"filename":209,"class":85},"vue","pages\u002F[slug].vue",[34,211,213,101,239,101,283,101,285,101,351,101,371,101,380,101,382,101,391,101,425],{"class":212},"language-vue",[90,214,215,218,221,224,227,229,231,234,236],{"class":92,"style":93},[90,216,217],{"style":96},"\u003C",[90,219,220],{"style":99},"script",[90,222,223],{"style":106}," setup",[90,225,226],{"style":106}," lang",[90,228,137],{"style":96},[90,230,140],{"style":96},[90,232,233],{"style":143},"ts",[90,235,140],{"style":96},[90,237,238],{"style":96},">",[90,240,241,245,248,251,254,257,260,263,265,268,271,274,277,280],{"class":92,"style":93},[90,242,244],{"style":243},"color:#39ADB5;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic","import",[90,246,247],{"style":96}," {",[90,249,250],{"style":112}," UPageHero",[90,252,253],{"style":243}," as",[90,255,256],{"style":112}," PageHero",[90,258,259],{"style":96},",",[90,261,262],{"style":112}," UButton",[90,264,253],{"style":243},[90,266,267],{"style":112}," Button",[90,269,270],{"style":96}," }",[90,272,273],{"style":243}," from",[90,275,276],{"style":96}," '",[90,278,279],{"style":143},"#components",[90,281,282],{"style":96},"'",[90,284],{"class":92,"style":93},[90,286,287,290,292,295,297,300,302,305,308,312,315,317,320,322,324,327,330,333,336,339,341,343,346,348],{"class":92,"style":93},[90,288,289],{"style":106},"const",[90,291,247],{"style":96},[90,293,294],{"style":99}," data",[90,296,180],{"style":96},[90,298,299],{"style":112}," page ",[90,301,161],{"style":96},[90,303,304],{"style":96}," =",[90,306,307],{"style":243}," await",[90,309,311],{"style":310},"color:#6182B8;--shiki-dark:#82AAFF"," useAsyncData",[90,313,314],{"style":112},"(",[90,316,282],{"style":96},[90,318,319],{"style":143},"post",[90,321,282],{"style":96},[90,323,259],{"style":96},[90,325,326],{"style":96}," ()",[90,328,329],{"style":106}," =>",[90,331,332],{"style":112}," clientContent",[90,334,335],{"style":96},".",[90,337,338],{"style":310},"get",[90,340,314],{"style":112},[90,342,282],{"style":96},[90,344,345],{"style":143},"\u002Flanding-markdown",[90,347,282],{"style":96},[90,349,350],{"style":112},"))",[90,352,353,355,358,360,362,364,366,369],{"class":92,"style":93},[90,354,289],{"style":106},[90,356,357],{"style":112}," components ",[90,359,137],{"style":96},[90,361,247],{"style":96},[90,363,256],{"style":112},[90,365,259],{"style":96},[90,367,368],{"style":112}," Button ",[90,370,161],{"style":96},[90,372,373,376,378],{"class":92,"style":93},[90,374,375],{"style":96},"\u003C\u002F",[90,377,220],{"style":99},[90,379,238],{"style":96},[90,381],{"class":92,"style":93},[90,383,384,386,389],{"class":92,"style":93},[90,385,217],{"style":96},[90,387,388],{"style":99},"template",[90,390,238],{"style":96},[90,392,393,396,398,401,403,405,408,410,413,415,417,420,422],{"class":92,"style":93},[90,394,395],{"style":96},"  \u003C",[90,397,44],{"style":99},[90,399,400],{"style":106}," :value",[90,402,137],{"style":96},[90,404,140],{"style":96},[90,406,407],{"style":143},"page",[90,409,140],{"style":96},[90,411,412],{"style":106}," :components",[90,414,137],{"style":96},[90,416,140],{"style":96},[90,418,419],{"style":143},"components",[90,421,140],{"style":96},[90,423,424],{"style":96}," \u002F>",[90,426,427,429,431],{"class":92,"style":93},[90,428,375],{"style":96},[90,430,388],{"style":99},[90,432,238],{"style":96},[24,434,435,436,185,438,440,441,443,444,448],{},"Any tag the content uses (",[34,437,100],{},[34,439,128],{},", …) resolves to the matching\nentry in ",[34,442,419],{},"; anything unmapped renders as a native HTML element. See\n",[28,445,447],{"href":446},"https:\u002F\u002Fcomark.dev\u002Frendering\u002Fnuxt","rendering in Nuxt"," for auto-import and Nuxt\nUI integration.",[450,451,452],"note",{},"Reach for Markdown when a human authors the content and you want prose and\ncomponents side by side in one readable file.",1785963366616]