[{"data":1,"prerenderedAt":329},["ShallowReactive",2],{"content:\u002F2026\u002Fmdc-syntax":3,"surround:\u002F2026\u002Fmdc-syntax":319},{"id":4,"title":5,"body":6,"categories":293,"date":295,"description":296,"draft":297,"extension":183,"image":298,"meta":299,"navigation":301,"path":302,"permalink":303,"published":303,"readingTime":304,"recommend":303,"references":303,"seo":309,"series":310,"sitemap":311,"stem":312,"tags":313,"type":317,"updated":295,"__hash__":318},"content\u002Fposts\u002F2026\u002Fmdc-syntax.md","MDC 语法速览",{"type":7,"value":8,"toc":281},"minimark",[9,14,23,39,42,45,52,55,66,69,72,81,87,90,93,99,105,108,115,143,146,153,178,186,189,203,257],[10,11,13],"h2",{"id":12},"为什么需要-mdc","为什么需要 MDC",[15,16,17,18,22],"p",{},"Nuxt Content 使用 ",[19,20,21],"strong",{},"MDC（Markdown Components）"," 语法，在标准 Markdown 之上允许直接书写 Vue 组件。它是本站绝大多数「富文本」能力的语法基础：提示框、标签、折叠、对话、选项卡等，都是普通组件，只是换了一种写法。",[24,25,28],"alert",{"type":26,"title":27},"info","官方文档",[15,29,30,31,38],{},"完整规范见 ",[32,33,37],"a",{"href":34,"rel":35},"https:\u002F\u002Fcontent.nuxt.com\u002Fdocs\u002Ffiles\u002Fmarkdown#mdc-syntax",[36],"nofollow","Nuxt Content MDC Syntax","。本文只挑最常用的部分。",[10,40,41],{"id":41},"块级组件",[15,43,44],{},"块级组件用双冒号包裹，内部是内容与插槽：",[46,47,49],"quote",{"icon":48},"tabler:quote",[15,50,51],{},"块级组件适合包裹一段内容，例如引用、提示或分栏。",[15,53,54],{},"写法如下：",[56,57,63],"pre",{"className":58,"code":60,"language":61,"meta":62},[59],"language-mdc","::quote{icon=\"tabler:quote\"}\n块级组件适合包裹一段内容，例如引用、提示或分栏。\n::\n","mdc","",[64,65,60],"code",{"__ignoreMap":62},[10,67,68],{"id":68},"行内组件",[15,70,71],{},"行内组件用单冒号，写在句子中间：",[15,73,74,75,80],{},"行内组件 ",[76,77,79],"badge",{"link":78},"\u002F2026\u002Fcontent-components","像这样"," 可以嵌入段落，也可以带属性和插槽内容。",[56,82,85],{"className":83,"code":84,"language":61,"meta":62},[59],"行内组件 :badge[像这样]{link=\"\u002F2026\u002Fcontent-components\"} 可以嵌入段落。\n",[64,86,84],{"__ignoreMap":62},[10,88,89],{"id":89},"属性",[15,91,92],{},"属性写在花括号里，值用引号包裹；布尔属性直接写名字：",[94,95],"link-card",{"description":96,"icon":97,"link":34,"title":98},"属性既可以是字符串，也可以是布尔值或表达式。","https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fmdclink\u002F100","属性演示",[56,100,103],{"className":101,"code":102,"language":61,"meta":62},[59],"::link-card\n---\nicon: https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fmdclink\u002F100\ntitle: 属性演示\ndescription: 字符串属性也可以写成一行 YAML。\nlink: https:\u002F\u002Fcontent.nuxt.com\u002Fdocs\u002Ffiles\u002Fmarkdown#mdc-syntax\n---\n::\n",[64,104,102],{"__ignoreMap":62},[10,106,107],{"id":107},"具名插槽",[15,109,110,111,114],{},"用 ",[64,112,113],{"code":113},"#slotName"," 声明具名插槽，嵌套组件时需要正确的缩进：",[24,116,119,125,136],{"type":117,":card":118},"warning","true",[120,121,122],"template",{"v-slot:title":62},[15,123,124],{},"卡片风格 + 具名插槽",[15,126,127,128,131,132,135],{},"通过 ",[64,129,130],{"code":130},"#title"," 与 ",[64,133,134],{"code":134},"#default"," 分别填充标题和正文。",[137,138,140],"folding",{":open":118,"title":139},"插槽里还能再嵌套组件",[15,141,142],{},"折叠组件本身也是通过插槽传值的。",[10,144,145],{"id":145},"样式类与行内样式",[15,147,148,149,152],{},"MDC 支持用 ",[64,150,151],{"code":151},"{.class}"," 给元素加类名，也支持行内 style：",[154,155,156,165,172],"ul",{},[157,158,159],"li",{},[160,161,164],"span",{"className":162},[163],"text-repeat","阴影回声",[157,166,167],{},[160,168,171],{"className":169},[170],"text-story","故事感只在 story 版式生效",[157,173,174],{},[160,175,177],{"style":176},"color: #00bb66","像这样直接指定颜色——",[56,179,184],{"className":180,"code":182,"language":183,"meta":62},[181],"language-md","- [阴影回声]{.text-repeat}\n- [像这样直接指定颜色——]{style=\"color: #00bb66\"}\n","md",[64,185,182],{"__ignoreMap":62},[10,187,188],{"id":188},"富文本增强",[15,190,191,192,202],{},"Markdown 的其余能力由 remark \u002F rehype 插件提供：脚注",[193,194,195],"sup",{},[32,196,201],{"href":197,"ariaDescribedBy":198,"dataFootnoteRef":62,"id":200},"#user-content-fn-remark",[199],"footnote-label","user-content-fnref-remark","1","、表格、任务列表、数学公式与代码高亮等。",[204,205,206,219],"table",{},[207,208,209],"thead",{},[210,211,212,216],"tr",{},[213,214,215],"th",{},"能力",[213,217,218],{},"插件",[220,221,222,237,247],"tbody",{},[210,223,224,228],{},[225,226,227],"td",{},"数学公式",[225,229,230,233,234],{},[64,231,232],{"code":232},"remark-math"," + ",[64,235,236],{"code":236},"rehype-katex",[210,238,239,242],{},[225,240,241],{},"阅读时长",[225,243,244],{},[64,245,246],{"code":246},"remark-reading-time",[210,248,249,252],{},[225,250,251],{},"元数据插槽",[225,253,254],{},[64,255,256],{"code":256},"rehype-meta-slots",[258,259,262,267],"section",{"className":260,"dataFootnotes":62},[261],"footnotes",[10,263,266],{"className":264,"id":199},[265],"sr-only","Footnotes",[268,269,270],"ol",{},[157,271,273,274],{"id":272},"user-content-fn-remark","脚注由 remark-gfm 系列插件驱动，会自动生成编号与返回锚点。 ",[32,275,280],{"href":276,"ariaLabel":277,"className":278,"dataFootnoteBackref":62},"#user-content-fnref-remark","Back to reference 1",[279],"data-footnote-backref","↩",{"title":62,"searchDepth":282,"depth":282,"links":283},4,[284,286,287,288,289,290,291,292],{"id":12,"depth":285,"text":13},2,{"id":41,"depth":285,"text":41},{"id":68,"depth":285,"text":68},{"id":89,"depth":285,"text":89},{"id":107,"depth":285,"text":107},{"id":145,"depth":285,"text":145},{"id":188,"depth":285,"text":188},{"id":199,"depth":285,"text":266},[294],"功能演示","2026-10-03 09:10:00","MDC 让 Markdown 可以直接使用 Vue 组件。本文介绍块级与行内组件、属性、插槽和样式类，是所有内容能力的基础。",false,"\u002Fcovers\u002Fmdc-syntax.jpg",{"slots":300},{},true,"\u002F2026\u002Fmdc-syntax",null,{"text":305,"minutes":306,"time":307,"words":308},"3 min read",2.355,141300,471,{"title":5,"description":296},"Clarity 功能地图",{"loc":302},"posts\u002F2026\u002Fmdc-syntax",[314,315,316],"MDC","语法","组件","tech","LB4vRjdvCHj-DGUX-aWCZj16sifSjeIkJRrwgWN04I0",[320,325],{"title":321,"path":322,"stem":323,"date":324,"type":317,"children":-1},"你好，CreamClarityDEMO","\u002F2026\u002Fhello-creamclarity","posts\u002F2026\u002Fhello-creamclarity","2026-10-03 09:00:00",{"title":326,"path":78,"stem":327,"date":328,"type":317,"children":-1},"内容组件图鉴","posts\u002F2026\u002Fcontent-components","2026-10-03 09:20:00",1791033610901]