From cf8a256a31572eeaab5d9ca3537a4b77ef8f8ac9 Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Tue, 14 Apr 2026 15:20:54 +0200
Subject: [PATCH 1/3] feat: add support for `yaml [props]` props syntax

---
 README.md                       |  6 +++---
 src/syntax/block.ts             |  5 +++--
 test/input/10.blocks-yaml.md    | 37 +++++++++++++++++++++++++++++++++
 test/output/10.blocks-yaml.html | 24 +++++++++++++++++++++
 4 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 4058f2a..8173dd6 100644
--- a/README.md
+++ b/README.md
@@ -36,9 +36,9 @@ This plugin implements all the syntaxes documented in [Comark Syntax](https://co
 
 - [x] [Block Component](https://comark.dev/syntax/markdown#block-components)
   - [x] [Nesting](https://comark.dev/syntax/markdown#nested-components)
-  - [x] [YAML Props](https://comark.dev/syntax/markdown#yaml-props)
-  - [x] [Slots](https://comark.dev/syntax/markdown#component-slots)
-- [x] [Inline Components](https://comark.dev/syntax/markdown#inline-components)
+  - [x] [YAML Props](https://comark.dev/syntax/components#yaml-props-use-cases)
+  - [x] [Slots](https://comark.dev/syntax/components#component-slots)
+- [x] [Inline Components](https://comark.dev/syntax/components#inline-components)
 - [x] [Inline Props](https://comark.dev/syntax/markdown#attributes)
 - [x] [Span](https://comark.dev/syntax/markdown#span-text)
 - ~~Frontmatter~~. Frontmatter is not built-in in this plugin, we recommend using [`@mdit-vue/plugin-frontmatter`](https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-frontmatter) if you want to use this plugin outside of Comark package,
diff --git a/src/syntax/block.ts b/src/syntax/block.ts
index e6d83da..2d3ff6a 100644
--- a/src/syntax/block.ts
+++ b/src/syntax/block.ts
@@ -290,7 +290,8 @@ export const MarkdownItMdcBlock: MarkdownIt.PluginSimple = (md) => {
       const start = state.bMarks[startLine] + state.tShift[startLine]
       const end = state.eMarks[startLine]
 
-      if (state.src.slice(start, end) !== '---')
+      const line = state.src.slice(start, end)
+      if (line !== '---' && line !== '```yaml [props]')
         return false
 
       let lineEnd = startLine + 1
@@ -298,7 +299,7 @@ export const MarkdownItMdcBlock: MarkdownIt.PluginSimple = (md) => {
       let found = false
       while (lineEnd < endLine) {
         const line = state.src.slice(state.bMarks[lineEnd] + state.tShift[startLine], state.eMarks[lineEnd])
-        if (line === '---') {
+        if (line === '---' || line === '```') {
           found = true
           break
         }
diff --git a/test/input/10.blocks-yaml.md b/test/input/10.blocks-yaml.md
index cfa63ea..0b10016 100644
--- a/test/input/10.blocks-yaml.md
+++ b/test/input/10.blocks-yaml.md
@@ -17,3 +17,40 @@ Foo
 
 Hello **World**
 ::
+
+::icon-card
+```yaml [props]
+icon: IconNuxt
+description: Harness the full power of Nuxt and the Nuxt ecosystem.
+title: Nuxt Architecture.
+:items: "[1, 2, []]"
+:data:
+  foo: bar
+  baz: qux
+```
+
+Foo
+
+#slot
+
+Hello **World**
+::
+
+::icon-card
+
+```yaml [props]
+icon: IconNuxt
+description: Harness the full power of Nuxt and the Nuxt ecosystem.
+title: Nuxt Architecture.
+:items: "[1, 2, []]"
+:data:
+  foo: bar
+  baz: qux
+```
+
+Foo
+
+#slot
+
+Hello **World**
+::
diff --git a/test/output/10.blocks-yaml.html b/test/output/10.blocks-yaml.html
index b31a4ee..4e67b69 100644
--- a/test/output/10.blocks-yaml.html
+++ b/test/output/10.blocks-yaml.html
@@ -11,3 +11,27 @@ <h1>Hello World</h1>
     <p>Hello <strong>World</strong></p>
   </template>
 </icon-card>
+<icon-card
+  icon="IconNuxt"
+  description="Harness the full power of Nuxt and the Nuxt ecosystem."
+  title="Nuxt Architecture."
+  :items="[1, 2, []]"
+  :data='{"foo":"bar","baz":"qux"}'
+>
+  <p>Foo</p>
+  <template #slot="">
+    <p>Hello <strong>World</strong></p>
+  </template>
+</icon-card>
+<icon-card
+  icon="IconNuxt"
+  description="Harness the full power of Nuxt and the Nuxt ecosystem."
+  title="Nuxt Architecture."
+  :items="[1, 2, []]"
+  :data='{"foo":"bar","baz":"qux"}'
+>
+  <p>Foo</p>
+  <template #slot="">
+    <p>Hello <strong>World</strong></p>
+  </template>
+</icon-card>

From 2a27e540ced613619b01b7ebd17aed9198e4d36b Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Tue, 14 Apr 2026 15:28:09 +0200
Subject: [PATCH 2/3] lint: fix

---
 test/input/10.blocks-yaml.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/input/10.blocks-yaml.md b/test/input/10.blocks-yaml.md
index 0b10016..ba3337d 100644
--- a/test/input/10.blocks-yaml.md
+++ b/test/input/10.blocks-yaml.md
@@ -23,7 +23,7 @@ Hello **World**
 icon: IconNuxt
 description: Harness the full power of Nuxt and the Nuxt ecosystem.
 title: Nuxt Architecture.
-:items: "[1, 2, []]"
+:items: '[1, 2, []]'
 :data:
   foo: bar
   baz: qux
@@ -42,7 +42,7 @@ Hello **World**
 icon: IconNuxt
 description: Harness the full power of Nuxt and the Nuxt ecosystem.
 title: Nuxt Architecture.
-:items: "[1, 2, []]"
+:items: '[1, 2, []]'
 :data:
   foo: bar
   baz: qux

From 400b5da4235d8aa778e2ab5de7e4b1d4ea92366a Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Tue, 14 Apr 2026 17:10:10 +0200
Subject: [PATCH 3/3] support `~~~` fence and `yml` language

---
 src/syntax/block.ts             | 13 +++++++++++--
 test/input/10.blocks-yaml.md    | 11 +++++++++++
 test/output/10.blocks-yaml.html |  7 +++++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/syntax/block.ts b/src/syntax/block.ts
index 2d3ff6a..40f388a 100644
--- a/src/syntax/block.ts
+++ b/src/syntax/block.ts
@@ -7,6 +7,13 @@ export const MarkdownItMdcBlock: MarkdownIt.PluginSimple = (md) => {
   const min_markers = 2
   const marker_str = ':'
   const marker_char = marker_str.charCodeAt(0)
+  const blockYamlLines: Record<string, string> = {
+    '---': '---',
+    '```yaml [props]': '```',
+    '~~~yaml [props]': '~~~',
+    '```yml [props]': '```',
+    '~~~yml [props]': '~~~',
+  }
 
   md.block.ruler.before(
     'fence',
@@ -291,7 +298,9 @@ export const MarkdownItMdcBlock: MarkdownIt.PluginSimple = (md) => {
       const end = state.eMarks[startLine]
 
       const line = state.src.slice(start, end)
-      if (line !== '---' && line !== '```yaml [props]')
+      const blockAttributesClosingFence = blockYamlLines[line] || ''
+
+      if (!blockAttributesClosingFence)
         return false
 
       let lineEnd = startLine + 1
@@ -299,7 +308,7 @@ export const MarkdownItMdcBlock: MarkdownIt.PluginSimple = (md) => {
       let found = false
       while (lineEnd < endLine) {
         const line = state.src.slice(state.bMarks[lineEnd] + state.tShift[startLine], state.eMarks[lineEnd])
-        if (line === '---' || line === '```') {
+        if (line === blockAttributesClosingFence) {
           found = true
           break
         }
diff --git a/test/input/10.blocks-yaml.md b/test/input/10.blocks-yaml.md
index ba3337d..554cc60 100644
--- a/test/input/10.blocks-yaml.md
+++ b/test/input/10.blocks-yaml.md
@@ -54,3 +54,14 @@ Foo
 
 Hello **World**
 ::
+
+::landing-hero
+~~~yml [props]
+demoMarkdown: |-
+  ```ts [example.ts]
+  import { parse } from 'comark'
+
+  const tree = await parse('# Hello **World**')
+  ```
+~~~
+::
diff --git a/test/output/10.blocks-yaml.html b/test/output/10.blocks-yaml.html
index 4e67b69..6165ccb 100644
--- a/test/output/10.blocks-yaml.html
+++ b/test/output/10.blocks-yaml.html
@@ -35,3 +35,10 @@ <h1>Hello World</h1>
     <p>Hello <strong>World</strong></p>
   </template>
 </icon-card>
+<landing-hero
+  demoMarkdown="```ts [example.ts]
+import { parse } from 'comark'
+
+const tree = await parse('# Hello **World**')
+```"
+></landing-hero>