docs(markdown): refine tree

Author: larbish

docs/content/docs/3.files/1.markdown.md

@@ -141,7 +141,7 @@ to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
 Install the **MDC VS Code extension** to get proper syntax highlighting for the MDC syntax.
 ::
 
-## Vue Components
+### Vue Components
 
 You can use any Vue component in your Markdown files.
 
@@ -157,7 +157,7 @@ Default slot content
 Components that are used in Markdown has to be marked as `global` in your Nuxt app if you don't use the `components/content/` directory, visit [Nuxt 3 docs](https://nuxt.com/docs/guide/directory-structure/components) to learn more about it.
 ::
 
-### Block Components
+#### Block Components
 
 Block components are components that accept Markdown content or another component as a slot.
 
@@ -188,7 +188,7 @@ The content of the card
   :::
 ::
 
-### Slots
+#### Slots
 
 A component's slots can accept content or another components.
 
@@ -219,7 +219,7 @@ This will be rendered inside the `description` slot.
   :::preview-card{icon="i-lucide-eye" label="Preview"}
     ::::example-hero
     My Page Title
-
+    
     #description
     This will be rendered inside the `description` slot.
     ::::
@@ -239,15 +239,15 @@ You can use Markdown inside your components slots:
   A [rich text](/) will be **rendered** by the component.
   ::
   ```
-
+  
   ```html [MyTitle.vue]
   <template>
     <h1 class="text-4xl">
       <slot mdc-unwrap="p" />
     </h1>
   </template>
   ```
-
+  
     ::::preview-card{icon="i-lucide-eye" label="Preview"}
       :::::example-title
       A [rich text](/) will be **rendered** by the component.
@@ -256,11 +256,11 @@ You can use Markdown inside your components slots:
   :::
 ::
 
-### Props
+#### Props
 
 There are two ways to pass props to components using MDC.
 
-#### Inline method
+##### **Inline method**
 
 The `{}` identifier passes props to components in a terse way by using a `key=value` syntax.
 
@@ -329,7 +329,7 @@ If you want to pass arrays or objects as props to components you can pass them a
 ```
 ::
 
-#### YAML method
+##### **YAML method**
 
 The YAML method uses the `---` identifier to declare one prop per line, that can be useful for readability.
 
@@ -400,7 +400,7 @@ Hello [World]{style="color: green;" .custom-class #custom-id}!
   :::
 ::
 
-In addition to mdc components and `span`, attribute syntax will work on images, links, inline `code`, **bold*&#x2A; and &#x5F;italic_ text.
+In addition to mdc components and `span`, attribute syntax will work on images, links, inline `code`, \**bold*\* and \_italic\_ text.
 
 ::code-group
 ```md [index.md]
@@ -412,17 +412,17 @@ Attributes work on:
 
   :::preview-card{prose label="Preview"}
   Attributes work on:
-
+  
   - [link](#attributes){style="background-color: pink;"}, `code`,
   - *italic* and **bold** texts.
   :::
 ::
 
-## Binding Data in Markdown
+### Binding Data
 
 You can bind data within your Markdown document using the `{{ $doc.variable || 'defaultValue' }}` syntax. These values can be defined in the YAML frontmatter at the top of the document, within each MDC component, or injected using the `data` prop of the `<ContentRenderer>` component.
 
-### Example 1: Define in YAML
+#### Define in YAML
 
 ```mdc
 ---
@@ -435,7 +435,7 @@ customVariable: 'Custom Value'
 
 ```
 
-### Example 2: Define in external with `<ContentRenderer>`
+#### Define in external with `<ContentRenderer>`
 
 ```html [test.vue]
 <template>
@@ -526,6 +526,7 @@ If there is no `<!--more-->` divider in the text then excerpt is undefined.
 
 ::tip
 You should define the `excerpt` field in the collection schema if you want to use the excerpt feature.
+
 ```ts [content.config.ts]
 const content = defineCollection({
   type: 'page',
@@ -538,6 +539,7 @@ const content = defineCollection({
   }),
 })
 ```
+
 Read more about the [collection schema](/docs/collections/define#collection-schema).
 ::