docs: add variables binding

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.