docs: add data pops in ContentRendererMarkdown and varaibles binding (#…

…2360)

docs/content/2.usage/2.markdown.md

@@ -458,6 +458,45 @@ In addition to mdc components and `span`, attribute syntax will work on images,
   ::
 ::
 
+## Binding Data in Markdown
+
+You can bind data within your Markdown document using the `{{ $doc.variable }}` syntax. These values can be defined in the YAML front matter at the top of the document, within each MDC component, or injected using the `data` prop of the `<ContentRendererMarkdown>` component.
+
+### Example 1: Define in YAML
+
+```md
+---
+title: 'Title of the page'
+description: 'meta description of the page'
+customVariable: 'Custom Value'
+---
+
+# The Title is {{ $doc.title }} and customVariable is {{ $doc.customVariable }}
+
+```
+
+### Example 2: Define in external with `<ContentRendererMarkdown>` 
+
+```html
+<template>
+  <div>
+    <ContentRendererMarkdown :value="data" :data="mdcVars"/>
+    <button type="button" v-on:click="mdcVars.name = 'Hugo'">Change name</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { data } = await useAsyncData(() => queryContent('test').findOne());
+const mdcVars = ref({ name: 'Maxime'});
+</script>
+```
+
+```md
+
+# Hello {{ $doc.name }}
+
+```
+
 ## Prose Components
 
 In Nuxt Content, the prose represents HTML tags generated by the Markdown syntax, such as title levels and links.

docs/content/4.components/2.content-renderer.md

@@ -23,6 +23,9 @@ Other types will currently be passed to default slot via `v-slot="{ data }"` or
 - `components`: The map of custom components to use for rendering. This prop will pass to markdown renderer and will not affect other file types.
   - Type: `object`
   - Default: `{}`
+- `data`: A map of variables to inject into the markdown content for later use in binding variables.
+  - Type: `object`
+  - Default: `{}`
 
 ## Slots