feat: add support for yaml [props] props syntax

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,

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',
@@ -290,15 +297,18 @@ 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)
+      const blockAttributesClosingFence = blockYamlLines[line] || ''
+
+      if (!blockAttributesClosingFence)
         return false
 
       let lineEnd = startLine + 1
 
       let found = false
       while (lineEnd < endLine) {
         const line = state.src.slice(state.bMarks[lineEnd] + state.tShift[startLine], state.eMarks[lineEnd])
-        if (line === '---') {
+        if (line === blockAttributesClosingFence) {
           found = true
           break
         }

test/input/10.blocks-yaml.md

@@ -17,3 +17,51 @@ 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**
+::
+
+::landing-hero
+~~~yml [props]
+demoMarkdown: |-
+  ```ts [example.ts]
+  import { parse } from 'comark'
+
+  const tree = await parse('# Hello **World**')
+  ```
+~~~
+::

test/output/10.blocks-yaml.html

@@ -11,3 +11,34 @@ <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>
+<landing-hero
+  demoMarkdown="```ts [example.ts]
+import { parse } from 'comark'
+
+const tree = await parse('# Hello **World**')
+```"
+></landing-hero>