Slidev 的 Comark 语法指南用组件与样式语法增强你的 Markdown 幻灯片【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev导读本文围绕 Slidev 的可选Comark Syntax即原 MDC / Markdown Components 的继任者展开介绍如何在 Markdown 幻灯片中启用它并通过行内样式、行内组件、图片属性与块级组件含插槽布局四类语法实现无需写 HTML/Vue 模板也能获得组件化表达能力的写作体验。读完本文你将掌握 Comark 语法在 Slidev 中的开关方式、每类语法的最小可用写法、与 Vue 组件体系如 组件指南、布局指南的配合方式以及它在源码与测试中的实现依据可直接在自己的slides.md中落地使用。什么是 Comark SyntaxComark Syntax 是 Markdown 的一套增强语法其前身即广为人知的MDCMarkdown Components目标是让 Markdown 能表达组件与样式而无需引入繁琐的原始 HTML。Slidev 从 v0.43.0 起支持该语法底层通过comark/markdown-it中的注册逻辑。在 Slidev 中它默认处于关闭状态需要在 Markdown 文件的 frontmatter 中显式开启开启后你在 Markdown 文本中写下的行内组件会渲染为真正的 Vue 组件这也意味着它天然叠加在 Slidev 的组件模型之上——内置组件 目录里的Arrow、VDrag等组件、位于你工程components/目录的本地组件都可以用这套语法直接引用。启用 Comark在 Markdown 文件通常是根slides.md也可以是任意被导入的 Markdown 文件的 YAML frontmatter 中添加一行即可--- comark: true --- This is a [red text]{stylecolor:red} :inline-component{propvalue} {width500px lazy} ::block-component{propvalue} The **default** slot ::配置项在类型定义中的完整语义如下见 frontmatter.ts配置项类型默认值说明comarkbooleanfalse启用 Comark 语法支持mdcbooleanfalse已废弃。MDC 已演进为 Comark请改用comark选项两个默认值false同样体现在 Slidev 的默认配置工厂中见 config.ts 的mdc: false, comark: false。从 MDC 迁移mdc别名如果你是从旧版本 Slidev 升级过来的用户工程里仍可能写着mdc: true。为了平滑过渡Slidev 的插件注册条件同时兼容新旧两键// packages/slidev/node/syntax/index.ts if (config.comark || config.mdc) md.use(MarkdownItComark)即在config.comark或config.mdc任一为真时都会加载 Comark 插件。官方建议新工程直接使用comark: true旧配置中的mdc会被类型层面标记为 deprecated但它仍能正常工作。另外在 cli.ts 中mdc仍被列在CONFIG_RESTART_FIELDS中含义是修改该配置会触发开发服务器重启——因此当你切换 Comark 开关后请留意 dev server 是否自动重启必要时手动重启以获得干净的解析结果。生效层级与使用前提Comark 是按Markdown 文件而非全局/单页启用的。它读取的是该 Markdown 文件解析后的配置对象config因此你可以只对需要组件语法的文件开启也可以在多入口组合的工程里对其中某个导入文件单独开启。该配置属于语法层开关在渲染管线中控制的是 markdown-it 插件是否挂载详见下文源码实现路径一节与页面内容的逐项呈现无关改完即整体生效。行内/块级组件引用的是 Slidev 渲染环境内已注册的 Vue 组件请确保组件存在内置组件、主题组件或本地components/目录否则运行时会告警或渲染为空。Inline Styles行内样式Comark 提供最轻量的样式注入语法——在方括号文本后紧跟花括号即可为文本添加属性This is a [red text]{stylecolor:red}渲染结果相当于span stylecolor:redred text/span让你在不写原始 HTML 标签的前提下完成局部样式控制。项目自身的 Markdown 中也有真实用例例如首页标题着色# Comark{stylecolor:red}这是测试夹具 mdc.md 中的示例该文件同时被解析器测试用于断言 Comark 解析结果快照见 parser.test.ts.snap。实际使用中可以把花括号里的内容理解为对该段文本对应 DOM 节点的属性透传stylecolor:red; font-size:1.2em直接内联 CSS也可附带classmy-class等类属性与 UnoCSS 工具类或 全局样式 中定义的样式配合。Inline Components行内组件在普通文本行中用:组件名{属性}的形式插入组件:inline-component{propvalue}冒号即内联组件前缀花括号内是传给组件的 propspropvalue。例如引用 Slidev 内置的计数或修饰类组件当前点击步进:VClick{after2}与 Markdown 原生行内元素不同行内组件可以携带结构化 props且渲染后仍是组件实例因此它能与v-click指令、useClicks等交互能力衔接。当多个组件出现在同一行时按顺序渲染若需要包裹大段内容则请使用下方的块级组件语法。Image Attributes图片属性Comark 还允许直接给 Markdown 图片追加属性而无需退回到img标签{width500px lazy}花括号中的width500px映射为图片宽度lazy则是布尔型标记相当于开启懒加载。你可以把任意合法属性放进去例如控制尺寸、对齐或加载策略。这一语法对需要精确控制版式的幻灯片封面图、示意图尤其顺手配合图片布局样式即可快速完成尺寸约束。Block Components块级组件与插槽对于需要承载大段内容、构成复合布局的场景使用双冒号包裹的块级组件::block-component{propvalue} The **default** slot ::其语义是开启一个名为block-component的组件花括号属性作为 props两个::之间的 Markdown 内容进入组件的default 插槽。Markdown 内容在插槽内会先经过 Markdown 渲染因此你可以写加粗、列表甚至嵌套图片::v-click 这一整块内容会在点击后才出现 ::与命名插槽slot 语法的配合Comark 的块级组件承载 default 插槽而当组件需要多个具名插槽时可以进一步配合 Slidev 自带的 slot sugar 语法::插槽名::标记。两者分工不同、可以嵌套组合:component{...}/::component{...}...::—— 负责引入组件、传 props、填 default 内容顶格书写的::slot-name::标记行 —— 由 slot-sugar.ts 中的MarkdownItSlotSugar插件处理会被编译成template v-slot:插槽名slotProps包裹层。也就是说你可以用块级组件搭外层结构再在内部用 slot 标记为同一组件提供多个具名插槽从而完成两栏、页眉/页脚等复杂布局而不写任何模板代码。相关能力可进一步参考 slot sugar 文档 与 布局系统文档。典型使用场景无需 HTML 的行内样式局部高亮、关键词上色直接写在正文里行内嵌入 Vue 组件把交互组件点击步进、箭头、绘制组件等当作行内元素使用为图片补充属性宽高、懒加载等替代裸img构建复杂组件布局块级组件 插槽组合实现组件化排版。Slidev 的代码组Code Groups等功能在文档中也被归入 Comark 组件化思路的实践——即通过块级组件承载多段代码并提供标签化 UI参见 code-groups.md。源码实现路径为便于你排查问题或深入扩展这里给出该功能的落地链路均以本仓库实际代码为准默认关闭getDefaultConfig()将comark、mdc均初始化为false见 config.ts。类型与文档注释comark的字段定义与默认值说明见 frontmatter.tsmdc的废弃提示紧随其后L212-L216。插件挂载在 markdown-it 插件编排函数useMarkdownItPlugins中通过if (config.comark || config.mdc) md.use(MarkdownItComark)决定是否注册comark/markdown-it见 syntax/index.ts。该函数同时还注册了 slot sugar、代码块、KaTeX、shiki 等其它语法插件说明 Comark 与它们是并存且按序执行的关系。变更触发重启mdc位于CONFIG_RESTART_FIELDS见 cli.ts改动该配置项会重启 dev server。解析期测试覆盖仓库测试夹具 mdc.md 开启了comark: true并包含行内样式标题与:arrow{...}行内组件用例其解析输出沉淀在 parser.test.ts.snap 中可作为你验证自身写法的对照样例。注意事项与小贴士若发现组件语法不生效优先确认该 Markdown 文件 frontmatter 已写comark: true并检查 dev server 是否因配置变更完成重启。属性值尽量使用双引号包裹如{width500px}以规避 YAML/解析歧义布尔标记如lazy不加引号。被引用的组件需在当前渲染作用域可解析跨文件共享组件时参考 目录结构说明 将组件放入公共的components/目录。若你仍在使用旧版mdc: true建议迁移为comark: true两者当前行为一致但前者已标记废弃。小结Comark Syntax 为 Slidev 提供了一条从纯 Markdown平滑过渡到组件化幻灯片的语法通道用一个 frontmatter 开关、四类核心语法即可完成行内样式、组件嵌入、图片属性控制与块级插槽布局。从源码看它由comark/markdown-it在条件满足时注入渲染管线与 slot sugar、内置组件共同构成 Slidev 表达力的重要一环。掌握了本文的语法与启用方式你就能在保持 Markdown 简洁性的同时复用整个 Vue 组件生态来构造富有表现力的演示文稿。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Slidev 的 Comark 语法指南：用组件与样式语法增强你的 Markdown 幻灯片
Slidev 的 Comark 语法指南用组件与样式语法增强你的 Markdown 幻灯片【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev导读本文围绕 Slidev 的可选Comark Syntax即原 MDC / Markdown Components 的继任者展开介绍如何在 Markdown 幻灯片中启用它并通过行内样式、行内组件、图片属性与块级组件含插槽布局四类语法实现无需写 HTML/Vue 模板也能获得组件化表达能力的写作体验。读完本文你将掌握 Comark 语法在 Slidev 中的开关方式、每类语法的最小可用写法、与 Vue 组件体系如 组件指南、布局指南的配合方式以及它在源码与测试中的实现依据可直接在自己的slides.md中落地使用。什么是 Comark SyntaxComark Syntax 是 Markdown 的一套增强语法其前身即广为人知的MDCMarkdown Components目标是让 Markdown 能表达组件与样式而无需引入繁琐的原始 HTML。Slidev 从 v0.43.0 起支持该语法底层通过comark/markdown-it中的注册逻辑。在 Slidev 中它默认处于关闭状态需要在 Markdown 文件的 frontmatter 中显式开启开启后你在 Markdown 文本中写下的行内组件会渲染为真正的 Vue 组件这也意味着它天然叠加在 Slidev 的组件模型之上——内置组件 目录里的Arrow、VDrag等组件、位于你工程components/目录的本地组件都可以用这套语法直接引用。启用 Comark在 Markdown 文件通常是根slides.md也可以是任意被导入的 Markdown 文件的 YAML frontmatter 中添加一行即可--- comark: true --- This is a [red text]{stylecolor:red} :inline-component{propvalue} {width500px lazy} ::block-component{propvalue} The **default** slot ::配置项在类型定义中的完整语义如下见 frontmatter.ts配置项类型默认值说明comarkbooleanfalse启用 Comark 语法支持mdcbooleanfalse已废弃。MDC 已演进为 Comark请改用comark选项两个默认值false同样体现在 Slidev 的默认配置工厂中见 config.ts 的mdc: false, comark: false。从 MDC 迁移mdc别名如果你是从旧版本 Slidev 升级过来的用户工程里仍可能写着mdc: true。为了平滑过渡Slidev 的插件注册条件同时兼容新旧两键// packages/slidev/node/syntax/index.ts if (config.comark || config.mdc) md.use(MarkdownItComark)即在config.comark或config.mdc任一为真时都会加载 Comark 插件。官方建议新工程直接使用comark: true旧配置中的mdc会被类型层面标记为 deprecated但它仍能正常工作。另外在 cli.ts 中mdc仍被列在CONFIG_RESTART_FIELDS中含义是修改该配置会触发开发服务器重启——因此当你切换 Comark 开关后请留意 dev server 是否自动重启必要时手动重启以获得干净的解析结果。生效层级与使用前提Comark 是按Markdown 文件而非全局/单页启用的。它读取的是该 Markdown 文件解析后的配置对象config因此你可以只对需要组件语法的文件开启也可以在多入口组合的工程里对其中某个导入文件单独开启。该配置属于语法层开关在渲染管线中控制的是 markdown-it 插件是否挂载详见下文源码实现路径一节与页面内容的逐项呈现无关改完即整体生效。行内/块级组件引用的是 Slidev 渲染环境内已注册的 Vue 组件请确保组件存在内置组件、主题组件或本地components/目录否则运行时会告警或渲染为空。Inline Styles行内样式Comark 提供最轻量的样式注入语法——在方括号文本后紧跟花括号即可为文本添加属性This is a [red text]{stylecolor:red}渲染结果相当于span stylecolor:redred text/span让你在不写原始 HTML 标签的前提下完成局部样式控制。项目自身的 Markdown 中也有真实用例例如首页标题着色# Comark{stylecolor:red}这是测试夹具 mdc.md 中的示例该文件同时被解析器测试用于断言 Comark 解析结果快照见 parser.test.ts.snap。实际使用中可以把花括号里的内容理解为对该段文本对应 DOM 节点的属性透传stylecolor:red; font-size:1.2em直接内联 CSS也可附带classmy-class等类属性与 UnoCSS 工具类或 全局样式 中定义的样式配合。Inline Components行内组件在普通文本行中用:组件名{属性}的形式插入组件:inline-component{propvalue}冒号即内联组件前缀花括号内是传给组件的 propspropvalue。例如引用 Slidev 内置的计数或修饰类组件当前点击步进:VClick{after2}与 Markdown 原生行内元素不同行内组件可以携带结构化 props且渲染后仍是组件实例因此它能与v-click指令、useClicks等交互能力衔接。当多个组件出现在同一行时按顺序渲染若需要包裹大段内容则请使用下方的块级组件语法。Image Attributes图片属性Comark 还允许直接给 Markdown 图片追加属性而无需退回到img标签{width500px lazy}花括号中的width500px映射为图片宽度lazy则是布尔型标记相当于开启懒加载。你可以把任意合法属性放进去例如控制尺寸、对齐或加载策略。这一语法对需要精确控制版式的幻灯片封面图、示意图尤其顺手配合图片布局样式即可快速完成尺寸约束。Block Components块级组件与插槽对于需要承载大段内容、构成复合布局的场景使用双冒号包裹的块级组件::block-component{propvalue} The **default** slot ::其语义是开启一个名为block-component的组件花括号属性作为 props两个::之间的 Markdown 内容进入组件的default 插槽。Markdown 内容在插槽内会先经过 Markdown 渲染因此你可以写加粗、列表甚至嵌套图片::v-click 这一整块内容会在点击后才出现 ::与命名插槽slot 语法的配合Comark 的块级组件承载 default 插槽而当组件需要多个具名插槽时可以进一步配合 Slidev 自带的 slot sugar 语法::插槽名::标记。两者分工不同、可以嵌套组合:component{...}/::component{...}...::—— 负责引入组件、传 props、填 default 内容顶格书写的::slot-name::标记行 —— 由 slot-sugar.ts 中的MarkdownItSlotSugar插件处理会被编译成template v-slot:插槽名slotProps包裹层。也就是说你可以用块级组件搭外层结构再在内部用 slot 标记为同一组件提供多个具名插槽从而完成两栏、页眉/页脚等复杂布局而不写任何模板代码。相关能力可进一步参考 slot sugar 文档 与 布局系统文档。典型使用场景无需 HTML 的行内样式局部高亮、关键词上色直接写在正文里行内嵌入 Vue 组件把交互组件点击步进、箭头、绘制组件等当作行内元素使用为图片补充属性宽高、懒加载等替代裸img构建复杂组件布局块级组件 插槽组合实现组件化排版。Slidev 的代码组Code Groups等功能在文档中也被归入 Comark 组件化思路的实践——即通过块级组件承载多段代码并提供标签化 UI参见 code-groups.md。源码实现路径为便于你排查问题或深入扩展这里给出该功能的落地链路均以本仓库实际代码为准默认关闭getDefaultConfig()将comark、mdc均初始化为false见 config.ts。类型与文档注释comark的字段定义与默认值说明见 frontmatter.tsmdc的废弃提示紧随其后L212-L216。插件挂载在 markdown-it 插件编排函数useMarkdownItPlugins中通过if (config.comark || config.mdc) md.use(MarkdownItComark)决定是否注册comark/markdown-it见 syntax/index.ts。该函数同时还注册了 slot sugar、代码块、KaTeX、shiki 等其它语法插件说明 Comark 与它们是并存且按序执行的关系。变更触发重启mdc位于CONFIG_RESTART_FIELDS见 cli.ts改动该配置项会重启 dev server。解析期测试覆盖仓库测试夹具 mdc.md 开启了comark: true并包含行内样式标题与:arrow{...}行内组件用例其解析输出沉淀在 parser.test.ts.snap 中可作为你验证自身写法的对照样例。注意事项与小贴士若发现组件语法不生效优先确认该 Markdown 文件 frontmatter 已写comark: true并检查 dev server 是否因配置变更完成重启。属性值尽量使用双引号包裹如{width500px}以规避 YAML/解析歧义布尔标记如lazy不加引号。被引用的组件需在当前渲染作用域可解析跨文件共享组件时参考 目录结构说明 将组件放入公共的components/目录。若你仍在使用旧版mdc: true建议迁移为comark: true两者当前行为一致但前者已标记废弃。小结Comark Syntax 为 Slidev 提供了一条从纯 Markdown平滑过渡到组件化幻灯片的语法通道用一个 frontmatter 开关、四类核心语法即可完成行内样式、组件嵌入、图片属性控制与块级插槽布局。从源码看它由comark/markdown-it在条件满足时注入渲染管线与 slot sugar、内置组件共同构成 Slidev 表达力的重要一环。掌握了本文的语法与启用方式你就能在保持 Markdown 简洁性的同时复用整个 Vue 组件生态来构造富有表现力的演示文稿。【免费下载链接】slidevPresentation Slides for Developers项目地址: https://gitcode.com/GitHub_Trending/sl/slidev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考