diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 39c8977..5bc7d65 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -3,8 +3,8 @@
     <label for="autoUnwrap">
       <input id="autoUnwrap" v-model="mdcOptions.experimental.autoUnwrap" type="checkbox"> auto unwrap
     </label>
-    <label for="componentCodeBlockProps">
-      <input id="componentCodeBlockProps" v-model="mdcOptions.experimental.componentCodeBlockProps" type="checkbox">
+    <label for="componentCodeBlockYamlProps">
+      <input id="componentCodeBlockYamlProps" v-model="mdcOptions.experimental.componentCodeBlockYamlProps" type="checkbox">
       Component props code block style
     </label>
     <div class="flex">
@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-const mdcOptions = ref({ experimental: { autoUnwrap: true, componentCodeBlockProps: false } })
+const mdcOptions = ref({ experimental: { autoUnwrap: true, componentCodeBlockYamlProps: false } })
 const markdown = ref(`# Hello World
 
 {{ $doc.name || 'Nuxt' }}
diff --git a/src/frontmatter.ts b/src/frontmatter.ts
index 7269be1..9325ae2 100644
--- a/src/frontmatter.ts
+++ b/src/frontmatter.ts
@@ -2,7 +2,7 @@ import yaml from 'js-yaml'
 import * as flat from 'flat'
 
 const FRONTMATTER_DELIMITER_DEFAULT = '---'
-const FRONTMATTER_DELIMITER_CODEBLOCK_STYLE = '```yaml'
+const FRONTMATTER_DELIMITER_CODEBLOCK_STYLE = '```yaml [props]'
 
 export function stringifyFrontMatter (data: any, content = '') {
   if (!Object.keys(data).length) {
diff --git a/src/index.ts b/src/index.ts
index 0e4e5b2..6efbca6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -28,7 +28,7 @@ interface ComponentNode extends Node {
   attributes?: Record<string, any>
   fmAttributes?: Record<string, any>
   rawData?: string
-  children?: ChildrenNode[];
+  children?: ChildrenNode[]
 }
 
 export default <Plugin<Array<RemarkMDCOptions>>> function (opts: RemarkMDCOptions = {}) {
@@ -96,7 +96,7 @@ function getNodeData (node: ComponentNode) {
     node.children?.length &&
     node.children[0].type === 'code' &&
     node.children[0].lang === 'yaml' &&
-    node.children[0].meta === null
+    node.children[0].meta === '[props]'
   ) {
     const yaml = node.children[0].value as string
     const { data } = parseFrontMatter(toFrontMatter(yaml))
diff --git a/src/to-markdown.ts b/src/to-markdown.ts
index 74c88e0..679bf4b 100644
--- a/src/to-markdown.ts
+++ b/src/to-markdown.ts
@@ -7,7 +7,7 @@ import { stringifyEntitiesLight } from 'stringify-entities'
 import type { Parents, RootContent } from 'mdast'
 import { type State, type Info, type Unsafe, defaultHandlers } from 'mdast-util-to-markdown'
 import { containerFlow, containerPhrasing, checkQuote, inlineContainerFlow } from './mdast-util-to-markdown'
-import { stringifyFrontMatter } from './frontmatter'
+import { stringifyFrontMatter, stringifyCodeBlockProps } from './frontmatter'
 import type { RemarkMDCOptions } from './types'
 import { NON_UNWRAPPABLE_TYPES } from './utils'
 import { type Container } from './micromark-extension/types'
@@ -18,7 +18,7 @@ const shortcut = /^[^\t\n\r "#'.<=>`}]+$/
 const baseFence = 2
 
 // import { defaultHandlers } from 'mdast-util-to-markdown/lib/util/compile-pattern'
-function compilePattern(pattern: Unsafe) {
+function compilePattern (pattern: Unsafe) {
   if (!pattern._compiled) {
     const before =
       (pattern.atBreak ? '[\\r\\n][\\t ]*' : '') +
@@ -53,7 +53,7 @@ export default (opts: RemarkMDCOptions = {}) => {
     }
   }
 
-  function componentContainerSection(node: NodeComponentContainerSection, _: any, context: any) {
+  function componentContainerSection (node: NodeComponentContainerSection, _: any, context: any) {
     context.indexStack = context.stack
 
     experimentalAutoUnwrap(node as any)
@@ -62,7 +62,7 @@ export default (opts: RemarkMDCOptions = {}) => {
   }
 
   type NodeTextComponent = Parents & { name: string; rawData: string; attributes: any }
-  function textComponent(node: NodeTextComponent, _: any, context: any) {
+  function textComponent (node: NodeTextComponent, _: any, context: any) {
     let value
     context.indexStack = context.stack
 
@@ -87,7 +87,7 @@ export default (opts: RemarkMDCOptions = {}) => {
 
   type NodeContainerComponent = Parents & { name: string; fmAttributes?: Record<string, any> }
   let nest = 0
-  function containerComponent(node: NodeContainerComponent, _: any, context: any) {
+  function containerComponent (node: NodeContainerComponent, _: any, context: any) {
     context.indexStack = context.stack
     const prefix = ':'.repeat(baseFence + nest)
     nest += 1
@@ -120,7 +120,7 @@ export default (opts: RemarkMDCOptions = {}) => {
           acc[key] = value2
           return acc
         }, {} as Record<string, any>)
-      const fm = opts?.experimental?.componentCodeBlockProps ? stringifyCodeBlockProps(node.fmAttributes) : stringifyFrontMatter(attrs)
+      const fm = opts?.experimental?.componentCodeBlockYamlProps ? stringifyCodeBlockProps(attrs) : stringifyFrontMatter(attrs)
       value += '\n' + fm.trim()
     }
 
@@ -152,11 +152,11 @@ export default (opts: RemarkMDCOptions = {}) => {
     return value
   }
 
-  containerComponent.peek = function peekComponent() {
+  containerComponent.peek = function peekComponent () {
     return ':'
   }
 
-  function label(node: Parents, context: State) {
+  function label (node: Parents, context: State) {
     let label: any = node
 
     if ((node.type as string) === 'containerComponent') {
@@ -172,7 +172,7 @@ export default (opts: RemarkMDCOptions = {}) => {
     return value ? '[' + value + ']' : ''
   }
 
-  function attributes(node: any, context: State) {
+  function attributes (node: any, context: State) {
     const quote = checkQuote(context)
     const subset = (node.type as string) === 'textComponent' ? [quote] : [quote, '\n', '\r']
     const attrs = Object.fromEntries(
@@ -228,17 +228,17 @@ export default (opts: RemarkMDCOptions = {}) => {
 
     return values.length ? '{' + values.join(' ') + '}' : ''
 
-    function quoted(key: string, value: string) {
+    function quoted (key: string, value: string) {
       return key + '=' + quote + stringifyEntitiesLight(value, { subset }) + quote
     }
   }
 
-  function content(node: any, context: State) {
+  function content (node: any, context: State) {
     const content = inlineComponentLabel(node) ? Object.assign({}, node, { children: node.children.slice(1) }) : node
     return node.type === 'textComponent' ? inlineContainerFlow(content, context) : containerFlow(content, context)
   }
 
-  function inlineComponentLabel(node: any) {
+  function inlineComponentLabel (node: any) {
     return node.children && node.children[0] && node.children[0].data && node.children[0].data.componentLabel
   }
 
diff --git a/src/types.d.ts b/src/types.d.ts
index 7437936..444d6fd 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -8,6 +8,6 @@ export interface RemarkMDCOptions {
   components?: ComponentHandler[]
   experimental?: {
     autoUnwrap?: boolean
-    componentCodeBlockProps?: boolean
+    componentCodeBlockYamlProps?: boolean
   }
 }
diff --git a/test/__snapshots__/block-component.test.ts.snap b/test/__snapshots__/block-component.test.ts.snap
index 050a67e..c4bf81b 100644
--- a/test/__snapshots__/block-component.test.ts.snap
+++ b/test/__snapshots__/block-component.test.ts.snap
@@ -466,194 +466,6 @@ array:
 }
 `;
 
-exports[`block-component > frontmatterYaml 1`] = `
-{
-  "children": [
-    {
-      "attributes": {},
-      "children": [],
-      "data": {
-        "hName": "with-frontmatter-yaml",
-        "hProperties": {
-          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
-          "key": "value",
-        },
-      },
-      "fmAttributes": {
-        "array": [
-          "item",
-          {
-            "itemKey": "value",
-          },
-        ],
-        "key": "value",
-      },
-      "name": "with-frontmatter-yaml",
-      "position": {
-        "end": {
-          "column": 3,
-          "line": 8,
-          "offset": 84,
-        },
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "rawData": "key: value
-array:
-  - item
-  - itemKey: value
----",
-      "type": "containerComponent",
-    },
-  ],
-  "position": {
-    "end": {
-      "column": 3,
-      "line": 8,
-      "offset": 84,
-    },
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "type": "root",
-}
-`;
-
-exports[`block-component > frontmatterYaml1 1`] = `
-{
-  "children": [
-    {
-      "attributes": {},
-      "children": [],
-      "data": {
-        "hName": "with-frontmatter-yaml1",
-        "hProperties": {
-          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
-          ":key2": "{\\"subkey\\":\\"value\\",\\"subkey2\\":\\"value\\"}",
-          "key": "value",
-        },
-      },
-      "fmAttributes": {
-        "array": [
-          "item",
-          {
-            "itemKey": "value",
-          },
-        ],
-        "key": "value",
-        "key2": {
-          "subkey": "value",
-          "subkey2": "value",
-        },
-      },
-      "name": "with-frontmatter-yaml1",
-      "position": {
-        "end": {
-          "column": 3,
-          "line": 11,
-          "offset": 124,
-        },
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "rawData": "key: value
-key2:
-  subkey: value
-  subkey2: value
-array:
-  - item
-  - itemKey: value
----",
-      "type": "containerComponent",
-    },
-  ],
-  "position": {
-    "end": {
-      "column": 3,
-      "line": 11,
-      "offset": 124,
-    },
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "type": "root",
-}
-`;
-
-exports[`block-component > frontmatterYamlOnly 1`] = `
-{
-  "children": [
-    {
-      "attributes": {},
-      "children": [
-        {
-          "lang": "yaml",
-          "meta": "[yaml]",
-          "position": {
-            "end": {
-              "column": 4,
-              "line": 4,
-              "offset": 52,
-            },
-            "start": {
-              "column": 1,
-              "line": 2,
-              "offset": 24,
-            },
-          },
-          "type": "code",
-          "value": "yaml code",
-        },
-      ],
-      "data": {
-        "hName": "with-frontmatter-only",
-        "hProperties": {},
-      },
-      "fmAttributes": {},
-      "name": "with-frontmatter-only",
-      "position": {
-        "end": {
-          "column": 3,
-          "line": 5,
-          "offset": 55,
-        },
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "type": "containerComponent",
-    },
-  ],
-  "position": {
-    "end": {
-      "column": 3,
-      "line": 5,
-      "offset": 55,
-    },
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "type": "root",
-}
-`;
-
 exports[`block-component > ignore-code-fence 1`] = `
 {
   "children": [
@@ -997,186 +809,6 @@ array:
 }
 `;
 
-exports[`block-component > nested-component-yaml 1`] = `
-{
-  "children": [
-    {
-      "attributes": {},
-      "children": [
-        {
-          "children": [
-            {
-              "position": {
-                "end": {
-                  "column": 13,
-                  "line": 8,
-                  "offset": 115,
-                },
-                "start": {
-                  "column": 1,
-                  "line": 8,
-                  "offset": 103,
-                },
-              },
-              "type": "text",
-              "value": "Default slot",
-            },
-          ],
-          "position": {
-            "end": {
-              "column": 13,
-              "line": 8,
-              "offset": 115,
-            },
-            "start": {
-              "column": 1,
-              "line": 8,
-              "offset": 103,
-            },
-          },
-          "type": "paragraph",
-        },
-        {
-          "attributes": {},
-          "children": [
-            {
-              "children": [
-                {
-                  "position": {
-                    "end": {
-                      "column": 21,
-                      "line": 11,
-                      "offset": 153,
-                    },
-                    "start": {
-                      "column": 1,
-                      "line": 11,
-                      "offset": 133,
-                    },
-                  },
-                  "type": "text",
-                  "value": "Secondary slot value",
-                },
-              ],
-              "position": {
-                "end": {
-                  "column": 21,
-                  "line": 11,
-                  "offset": 153,
-                },
-                "start": {
-                  "column": 1,
-                  "line": 11,
-                  "offset": 133,
-                },
-              },
-              "type": "paragraph",
-            },
-            {
-              "attributes": {},
-              "children": [],
-              "data": {
-                "hName": "hello",
-                "hProperties": {
-                  "key": "value",
-                },
-              },
-              "fmAttributes": {
-                "key": "value",
-              },
-              "name": "hello",
-              "position": {
-                "end": {
-                  "column": 6,
-                  "line": 17,
-                  "offset": 200,
-                },
-                "start": {
-                  "column": 3,
-                  "line": 13,
-                  "offset": 157,
-                },
-              },
-              "rawData": "key: value
----",
-              "type": "containerComponent",
-            },
-          ],
-          "data": {
-            "hName": "component-slot",
-            "hProperties": {
-              "v-slot:secondary-slot": "",
-            },
-          },
-          "name": "secondary-slot",
-          "position": {
-            "end": {
-              "column": 3,
-              "line": 18,
-              "offset": 203,
-            },
-            "start": {
-              "column": 2,
-              "line": 10,
-              "offset": 118,
-            },
-          },
-          "type": "componentContainerSection",
-        },
-      ],
-      "data": {
-        "hName": "with-frontmatter-and-nested-component-yaml",
-        "hProperties": {
-          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
-          "key": "value",
-        },
-      },
-      "fmAttributes": {
-        "array": [
-          "item",
-          {
-            "itemKey": "value",
-          },
-        ],
-        "key": "value",
-      },
-      "name": "with-frontmatter-and-nested-component-yaml",
-      "position": {
-        "end": {
-          "column": 3,
-          "line": 18,
-          "offset": 203,
-        },
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "rawData": "key: value
-array:
-  - item
-  - itemKey: value
----",
-      "type": "containerComponent",
-    },
-  ],
-  "position": {
-    "end": {
-      "column": 3,
-      "line": 18,
-      "offset": 203,
-    },
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "type": "root",
-}
-`;
-
 exports[`block-component > section-order 1`] = `
 {
   "children": [
diff --git a/test/__snapshots__/codeblock-props.test.ts.snap b/test/__snapshots__/codeblock-props.test.ts.snap
new file mode 100644
index 0000000..c00c3c0
--- /dev/null
+++ b/test/__snapshots__/codeblock-props.test.ts.snap
@@ -0,0 +1,562 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic > YamlProps 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [],
+      "data": {
+        "hName": "with-frontmatter-yaml",
+        "hProperties": {
+          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
+          "key": "value",
+        },
+      },
+      "fmAttributes": {
+        "array": [
+          "item",
+          {
+            "itemKey": "value",
+          },
+        ],
+        "key": "value",
+      },
+      "name": "with-frontmatter-yaml",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 8,
+          "offset": 92,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "rawData": "array:
+  - item
+  - itemKey: value
+key: value
+---",
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 8,
+      "offset": 92,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`basic > nested-component-yamlProps 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [
+        {
+          "children": [
+            {
+              "position": {
+                "end": {
+                  "column": 13,
+                  "line": 8,
+                  "offset": 123,
+                },
+                "start": {
+                  "column": 1,
+                  "line": 8,
+                  "offset": 111,
+                },
+              },
+              "type": "text",
+              "value": "Default slot",
+            },
+          ],
+          "position": {
+            "end": {
+              "column": 13,
+              "line": 8,
+              "offset": 123,
+            },
+            "start": {
+              "column": 1,
+              "line": 8,
+              "offset": 111,
+            },
+          },
+          "type": "paragraph",
+        },
+        {
+          "attributes": {},
+          "children": [
+            {
+              "children": [
+                {
+                  "position": {
+                    "end": {
+                      "column": 21,
+                      "line": 11,
+                      "offset": 161,
+                    },
+                    "start": {
+                      "column": 1,
+                      "line": 11,
+                      "offset": 141,
+                    },
+                  },
+                  "type": "text",
+                  "value": "Secondary slot value",
+                },
+              ],
+              "position": {
+                "end": {
+                  "column": 21,
+                  "line": 11,
+                  "offset": 161,
+                },
+                "start": {
+                  "column": 1,
+                  "line": 11,
+                  "offset": 141,
+                },
+              },
+              "type": "paragraph",
+            },
+            {
+              "attributes": {},
+              "children": [],
+              "data": {
+                "hName": "hello",
+                "hProperties": {
+                  "key": "value",
+                },
+              },
+              "fmAttributes": {
+                "key": "value",
+              },
+              "name": "hello",
+              "position": {
+                "end": {
+                  "column": 6,
+                  "line": 17,
+                  "offset": 216,
+                },
+                "start": {
+                  "column": 3,
+                  "line": 13,
+                  "offset": 165,
+                },
+              },
+              "rawData": "key: value
+---",
+              "type": "containerComponent",
+            },
+          ],
+          "data": {
+            "hName": "component-slot",
+            "hProperties": {
+              "v-slot:secondary-slot": "",
+            },
+          },
+          "name": "secondary-slot",
+          "position": {
+            "end": {
+              "column": 3,
+              "line": 18,
+              "offset": 219,
+            },
+            "start": {
+              "column": 2,
+              "line": 10,
+              "offset": 126,
+            },
+          },
+          "type": "componentContainerSection",
+        },
+      ],
+      "data": {
+        "hName": "with-frontmatter-and-nested-component-yaml",
+        "hProperties": {
+          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
+          "key": "value",
+        },
+      },
+      "fmAttributes": {
+        "array": [
+          "item",
+          {
+            "itemKey": "value",
+          },
+        ],
+        "key": "value",
+      },
+      "name": "with-frontmatter-and-nested-component-yaml",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 18,
+          "offset": 219,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "rawData": "array:
+  - item
+  - itemKey: value
+key: value
+---",
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 18,
+      "offset": 219,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`basic > notYamlProps 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [
+        {
+          "lang": "yaml",
+          "meta": null,
+          "position": {
+            "end": {
+              "column": 4,
+              "line": 7,
+              "offset": 81,
+            },
+            "start": {
+              "column": 1,
+              "line": 2,
+              "offset": 24,
+            },
+          },
+          "type": "code",
+          "value": "key: value
+array:
+  - item
+  - itemKey: value",
+        },
+      ],
+      "data": {
+        "hName": "with-frontmatter-yaml",
+        "hProperties": {},
+      },
+      "fmAttributes": {},
+      "name": "with-frontmatter-yaml",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 8,
+          "offset": 84,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 8,
+      "offset": 84,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`basic > notYamlProps2 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [
+        {
+          "lang": "yaml[props]",
+          "meta": null,
+          "position": {
+            "end": {
+              "column": 4,
+              "line": 7,
+              "offset": 88,
+            },
+            "start": {
+              "column": 1,
+              "line": 2,
+              "offset": 24,
+            },
+          },
+          "type": "code",
+          "value": "key: value
+array:
+  - item
+  - itemKey: value",
+        },
+      ],
+      "data": {
+        "hName": "with-frontmatter-yaml",
+        "hProperties": {},
+      },
+      "fmAttributes": {},
+      "name": "with-frontmatter-yaml",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 8,
+          "offset": 91,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 8,
+      "offset": 91,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`basic > notYamlProps3 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [
+        {
+          "lang": "yaml",
+          "meta": "[yaml]",
+          "position": {
+            "end": {
+              "column": 4,
+              "line": 7,
+              "offset": 88,
+            },
+            "start": {
+              "column": 1,
+              "line": 2,
+              "offset": 24,
+            },
+          },
+          "type": "code",
+          "value": "key: value
+array:
+  - item
+  - itemKey: value",
+        },
+      ],
+      "data": {
+        "hName": "with-frontmatter-yaml",
+        "hProperties": {},
+      },
+      "fmAttributes": {},
+      "name": "with-frontmatter-yaml",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 8,
+          "offset": 91,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 8,
+      "offset": 91,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`basic > shouldConvertYamlProps 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [],
+      "data": {
+        "hName": "with-frontmatter-yaml",
+        "hProperties": {
+          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
+          "key": "value",
+        },
+      },
+      "fmAttributes": {
+        "array": [
+          "item",
+          {
+            "itemKey": "value",
+          },
+        ],
+        "key": "value",
+      },
+      "name": "with-frontmatter-yaml",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 8,
+          "offset": 80,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "rawData": "
+array:
+  - item
+  - itemKey: value
+key: value
+---",
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 8,
+      "offset": 80,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
+exports[`basic > yamlProps1 1`] = `
+{
+  "children": [
+    {
+      "attributes": {},
+      "children": [],
+      "data": {
+        "hName": "with-frontmatter-yaml1",
+        "hProperties": {
+          ":array": "[\\"item\\",{\\"itemKey\\":\\"value\\"}]",
+          ":key2": "{\\"subkey\\":\\"value\\",\\"subkey2\\":\\"value\\"}",
+          "key": "value",
+        },
+      },
+      "fmAttributes": {
+        "array": [
+          "item",
+          {
+            "itemKey": "value",
+          },
+        ],
+        "key": "value",
+        "key2": {
+          "subkey": "value",
+          "subkey2": "value",
+        },
+      },
+      "name": "with-frontmatter-yaml1",
+      "position": {
+        "end": {
+          "column": 3,
+          "line": 11,
+          "offset": 132,
+        },
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "rawData": "key: value
+key2:
+  subkey: value
+  subkey2: value
+array:
+  - item
+  - itemKey: value
+---",
+      "type": "containerComponent",
+    },
+  ],
+  "position": {
+    "end": {
+      "column": 3,
+      "line": 11,
+      "offset": 132,
+    },
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
diff --git a/test/block-component.test.ts b/test/block-component.test.ts
index 192b46c..6442c09 100644
--- a/test/block-component.test.ts
+++ b/test/block-component.test.ts
@@ -47,81 +47,6 @@ describe('block-component', () => {
         '::'
       ].join('\n')
     },
-    frontmatterYaml: {
-      markdown: '::with-frontmatter-yaml\n```yaml\nkey: value\narray:\n  - item\n  - itemKey: value\n```\n::',
-      mdcOptions: {
-        experimental: {
-          componentCodeBlockProps: true
-        }
-      }
-    },
-    frontmatterYaml1: {
-      markdown: [
-        '::with-frontmatter-yaml1',
-        '```yaml',
-        'key: value',
-        'key2:',
-        '  subkey: value',
-        '  subkey2: value',
-        'array:',
-        '  - item',
-        '  - itemKey: value',
-        '```',
-        '::'
-      ].join('\n'),
-      expected: [
-        '::with-frontmatter-yaml1',
-        '```yaml',
-        'key: value',
-        'key2.subkey: value',
-        'key2.subkey2: value',
-        'array:',
-        '  - item',
-        '  - itemKey: value',
-        '```',
-        '::'
-      ].join('\n'),
-      mdcOptions: {
-        experimental: {
-          componentCodeBlockProps: true
-        }
-      }
-    },
-    'nested-component-yaml': {
-      markdown: [
-        '::with-frontmatter-and-nested-component-yaml',
-        '```yaml',
-        'key: value',
-        'array:',
-        '  - item',
-        '  - itemKey: value',
-        '```',
-        'Default slot',
-        '',
-        '#secondary-slot',
-        'Secondary slot value',
-        '',
-        '  :::hello',
-        '  ```yaml',
-        '  key: value',
-        '  ```',
-        '  :::',
-        '::'
-      ].join('\n'),
-      mdcOptions: {
-        experimental: {
-          componentCodeBlockProps: true
-        }
-      }
-    },
-    frontmatterYamlOnly: {
-      markdown: '::with-frontmatter-only\n```yaml [yaml]\nyaml code\n```\n::',
-      mdcOptions: {
-        experimental: {
-          componentCodeBlockProps: true
-        }
-      }
-    },
     'nested-component': {
       markdown: [
         '::with-frontmatter-and-nested-component',
diff --git a/test/codeblock-props.test.ts b/test/codeblock-props.test.ts
new file mode 100644
index 0000000..c89f1fc
--- /dev/null
+++ b/test/codeblock-props.test.ts
@@ -0,0 +1,120 @@
+import { expect, describe } from 'vitest'
+import { runMarkdownTests } from './utils'
+
+describe('basic', () => {
+  runMarkdownTests({
+    YamlProps: {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      markdown: '::with-frontmatter-yaml\n```yaml [props]\narray:\n  - item\n  - itemKey: value\nkey: value\n```\n::',
+      extra (_markdown, ast, _expected) {
+        expect(ast.children[0].type).toEqual('containerComponent')
+        expect(ast.children[0].fmAttributes).toEqual({ array: ['item', { itemKey: 'value' }], key: 'value' })
+      }
+    },
+    notYamlProps: {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      markdown: '::with-frontmatter-yaml\n```yaml\nkey: value\narray:\n  - item\n  - itemKey: value\n```\n::',
+      extra (_markdown, ast, _expected) {
+        expect(ast.children[0].type).toEqual('containerComponent')
+        expect(ast.children[0].fmAttributes).toEqual({})
+      }
+    },
+    notYamlProps2: {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      markdown: '::with-frontmatter-yaml\n```yaml[props]\nkey: value\narray:\n  - item\n  - itemKey: value\n```\n::'
+    },
+    notYamlProps3: {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      markdown: '::with-frontmatter-yaml\n```yaml [yaml]\nkey: value\narray:\n  - item\n  - itemKey: value\n```\n::'
+    },
+    shouldConvertYamlProps: {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      markdown: '::with-frontmatter-yaml\n---\narray:\n  - item\n  - itemKey: value\nkey: value\n---\n::',
+      expected: '::with-frontmatter-yaml\n```yaml [props]\narray:\n  - item\n  - itemKey: value\nkey: value\n```\n::'
+    },
+    yamlProps1: {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      markdown: [
+        '::with-frontmatter-yaml1',
+        '```yaml [props]',
+        'key: value',
+        'key2:',
+        '  subkey: value',
+        '  subkey2: value',
+        'array:',
+        '  - item',
+        '  - itemKey: value',
+        '```',
+        '::'
+      ].join('\n'),
+      expected: [
+        '::with-frontmatter-yaml1',
+        '```yaml [props]',
+        'array:',
+        '  - item',
+        '  - itemKey: value',
+        'key: value',
+        'key2.subkey: value',
+        'key2.subkey2: value',
+        '```',
+        '::'
+      ].join('\n')
+    },
+    'nested-component-yamlProps': {
+      mdcOptions: {
+        experimental: {
+          componentCodeBlockYamlProps: true
+        }
+      },
+      markdown: [
+        '::with-frontmatter-and-nested-component-yaml',
+        '```yaml [props]',
+        'array:',
+        '  - item',
+        '  - itemKey: value',
+        'key: value',
+        '```',
+        'Default slot',
+        '',
+        '#secondary-slot',
+        'Secondary slot value',
+        '',
+        '  :::hello',
+        '  ```yaml [props]',
+        '  key: value',
+        '  ```',
+        '  :::',
+        '::'
+      ].join('\n'),
+      extra (_markdown, ast, _expected) {
+        expect(ast.children[0].type).toEqual('containerComponent')
+        expect(ast.children[0].fmAttributes).toEqual({ array: ['item', { itemKey: 'value' }], key: 'value' })
+        expect(ast.children[0].children[1].children[1].fmAttributes).toEqual({ key: 'value' })
+      }
+    }
+  })
+})