diff --git a/src/runtime/markdown-parser/remark-mdc/frontmatter.ts b/src/runtime/markdown-parser/remark-mdc/frontmatter.ts
index 59d63b91f..3e1b6bd25 100644
--- a/src/runtime/markdown-parser/remark-mdc/frontmatter.ts
+++ b/src/runtime/markdown-parser/remark-mdc/frontmatter.ts
@@ -12,9 +12,13 @@ export function stringifyFrontMatter (data: any, content: string = '') {
     safe: true
   })
 
+  if (!Object.keys(data).length) {
+    return ''
+  }
+
   return [
     FRONTMATTER_DELIMITER,
-    yaml.dump(data, { lineWidth: -1 }),
+    yaml.dump(data, { lineWidth: -1 }).trim(),
     FRONTMATTER_DELIMITER,
     content
   ].join('\n')
diff --git a/src/runtime/markdown-parser/remark-mdc/index.ts b/src/runtime/markdown-parser/remark-mdc/index.ts
index e8b45f014..4dfc494bb 100644
--- a/src/runtime/markdown-parser/remark-mdc/index.ts
+++ b/src/runtime/markdown-parser/remark-mdc/index.ts
@@ -48,7 +48,7 @@ export default <Plugin<Array<RemarkMDCOptions>, Root, Root>> function ({ compone
     return async (tree: ComponentNode, { data }: { data: Record<string, any> }) => {
       const jobs: Promise<unknown>[] = []
       visit<ComponentNode, string[]>(tree, ['textComponent', 'leafComponent', 'containerComponent'], (node) => {
-        bindNode(node, data)
+        bindNode(node)
         const { instance: handler, options } = components.find(c => c.name === node.name) || {}
         if (handler) {
           jobs.push(handler(options)(node, data))
diff --git a/src/runtime/markdown-parser/remark-mdc/to-markdown.ts b/src/runtime/markdown-parser/remark-mdc/to-markdown.ts
index 7e5e4d259..253c53545 100644
--- a/src/runtime/markdown-parser/remark-mdc/to-markdown.ts
+++ b/src/runtime/markdown-parser/remark-mdc/to-markdown.ts
@@ -46,10 +46,18 @@ function componentContainerSection (node: NodeComponentContainerSection, _: any,
 
 type NodeTextComponent = Parent & { name: string; rawData: string }
 function textComponent (node: NodeTextComponent, _: any, context: any) {
+  let value
   context.indexStack = context.stack
+
   const exit = context.enter(node.type)
-  let value = ':' + (node.name || '') + label(node, context) + attributes(node, context)
-  value += '\n' + content(node, context)
+
+  if (node.name === 'span') {
+    // Handle span suger syntax
+    value = `[${content(node, context)}]${attributes(node, context)}`
+  } else {
+    value = ':' + (node.name || '') + label(node, context) + attributes(node, context)
+  }
+
   exit()
   return value
 }