docs: costum components (#2433)

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

@@ -67,12 +67,28 @@ const { data } = await useAsyncData('page-data', () => queryContent('/hello').fi
 ::callout{type="info"}
 Note that when you use default slot and `<ContentRendererMarkdown>` in your template you need to pass `components` to `<ContentRendererMarkdown>`.
 
+```html [components/CustomParagraph.vue]
+<template>
+  <div>
+    <ContentSlot :use="$slots.default" unwrap="p" />
+  </div>
+</template>
+```
+
+```md [content/index.md]
+::custom-p
+this is my custom paragraph
+::
+```
+
 ```html [pages/[...slug\\].vue]
 <script setup lang="ts">
+import { CustomParagraph } from '#components';
+
 const { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())
 
 const components = {
-  p: 'CustomParagraph'
+  'custom-p': CustomParagraph
 }
 </script>