feat(markdown): keep meta from fenced code block (#1800)

Co-authored-by: nobkd <44443899+nobkd@users.noreply.github.com>

docs/content/4.api/1.components/7.prose.md

@@ -45,7 +45,7 @@ To overwrite a prose component, create a component with the same name in your pr
 ::code-group
 
   ```markdown [Code]
-    ```javascript
+    ```javascript[file.js]{4-6,7} meta-info=val
     export default () => {
       console.log('Code block')
     }
@@ -54,7 +54,7 @@ To overwrite a prose component, create a component with the same name in your pr
 
   ::code-block{label="Preview"}
 
-  ```javascript
+  ```javascript[file.js]{4-6,7}
   export default () => {
     console.log('Code block')
   }
@@ -64,6 +64,17 @@ To overwrite a prose component, create a component with the same name in your pr
 
 ::
 
+Component properties will be:
+```json
+{
+  code: "export default () => {\n    console.log('Code block')\n}"
+  language: "javascript"
+  filename: "file.js"
+  highlights: [4, 5, 6, 7]
+  meta: "meta-info=val"
+}
+```
+
 Check out the [highlight options](/api/configuration#highlight) for more about the syntax highlighting.
 
 ## `ProseCodeInline`

src/runtime/components/Prose/ProseCode.vue

@@ -18,6 +18,10 @@ export default defineComponent({
     highlights: {
       type: Array as () => number[],
       default: () => []
+    },
+    meta: {
+      type: String,
+      default: null
     }
   }
 })

src/runtime/markdown-parser/handler/code.ts

@@ -15,6 +15,7 @@ export default (h: H, node: any) => {
       language,
       filename,
       highlights,
+      meta: node.meta,
       code
     },
     [h(node, 'pre', {}, [h(node, 'code', { __ignoreMap: '' }, [u('text', code)])])]

test/features/parser-markdown.ts

@@ -39,6 +39,31 @@ export const testMarkdownParser = () => {
       expect(parsed.body).toHaveProperty('children[0].children[0].tag', 'code-inline')
     })
 
+    test('Keep meta from fenced code block', async () => {
+      const parsed = await $fetch('/api/parse', {
+        method: 'POST',
+        body: {
+          id: 'content:index.md',
+          content: [
+            '```ts [file.ts]{4-6,7} other code block info',
+            'let code = undefined;',
+            'return code;',
+            '```'
+          ].join('\n')
+        }
+      })
+
+      expect(parsed).toHaveProperty('body')
+      expect(parsed.body).toHaveProperty('children[0].tag', 'code')
+      expect(parsed.body).toHaveProperty('children[0].props')
+      const props = parsed.body.children[0].props
+      expect(props).toHaveProperty('meta')
+      expect(props.meta).toBe('[file.ts]{4-6,7} other code block info')
+      expect(props.language).toBe('ts')
+      expect(props.filename).toBe('file.ts')
+      expect(props.highlights).toEqual([4, 5, 6, 7])
+    })
+
     test('comment', async () => {
       const parsed = await $fetch('/api/parse', {
         method: 'POST',