@intlayer/docs 8.9.8 → 8.10.0-canary.1

package/docs/ar/dictionary/markdown.md

@@ -1,11 +1,11 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-01-22
-title: محتوى Markdown
-description: تعلّم كيفية إعلان واستخدام محتوى Markdown في موقعك متعدد اللغات باستخدام Intlayer. اتبع الخطوات في هذه الوثائق لدمج Markdown بسلاسة في مشروعك.
+updatedAt: 2026-05-19
+title: Markdown
+description: تعرف على كيفية الإعلان عن واستخدام محتوى Markdown في موقعك متعدد اللغات باستخدام Intlayer. اتبع الخطوات في هذه الوثائق عبر الإنترنت لدمج Markdown بسلاسة في مشروعك.
 keywords:
   - Markdown
-  - الدولية
+  - تدويل
   - وثائق
   - Intlayer
   - Next.js
@@ -17,34 +17,69 @@ slugs:
   - content
   - markdown
 history:
+  - version: 8.10.0
+    date: 2026-05-19
+    changes: "تمت إضافة دعم لملفات `.content.md`"
   - version: 8.5.0
     date: 2026-03-24
-    changes: "Add `intlayerMarkdown` plugin object; use `app.use(intlayerMarkdown)` instead of `app.use(installIntlayerMarkdown)`"
+    changes: "تمت إضافة كائن إضافة `intlayerMarkdown` ؛ استخدم `app.use(intlayerMarkdown)` بدلاً من `app.use(installIntlayerMarkdown)`"
   - version: 8.5.0
     date: 2026-03-24
-    changes: "move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/markdown`"
+    changes: "تم نقل الاستيراد من `{{framework}}-intlayer` إلى `{{framework}}-intlayer/markdown`"
   - version: 8.0.0
     date: 2026-01-22
-    changes: "إضافة MarkdownRenderer / useMarkdownRenderer / renderMarkdown كأداة وخيار forceInline"
+    changes: "إضافة أدوات MarkdownRenderer / useMarkdownRenderer / renderMarkdown وخيار forceInline"
   - version: 8.0.0
     date: 2026-01-18
-    changes: "التزيين التلقائي لمحتوى markdown، ودعم MDX و SSR"
+    changes: "تزيين تلقائي لمحتوى markdown ، دعم MDX و SSR"
   - version: 5.5.10
     date: 2025-06-29
-    changes: "بدء السجل"
+    changes: "تم تهيئة السجل"
 ---
 
-# محتوى Markdown / النصوص الغنية
+# Markdown / محتوى نصي غني
 
-يدعم Intlayer محتوى النصوص الغنية المحدد باستخدام صيغة Markdown. يتيح لك ذلك كتابة وصيانة المحتوى بسهولة مع تنسيق غني، مثل المدونات والمقالات والمزيد.
+يدعم Intlayer المحتوى النصي الغني المعرف باستخدام بناء جملة Markdown. يتيح لك هذا كتابة المحتوى ذي التنسيق الغني والحفاظ عليه بسهولة مثل المدونات والمقالات والمزيد.
 
-## الجزء الأول: إعلان محتوى Markdown
+## الإعلان عن محتوى Markdown
 
-يمكنك تعريف محتوى Markdown باستخدام الدالة `md` أو ببساطة كسلسلة نصية (إذا كانت تحتوي على صيغة Markdown).
+يمكنك الإعلان عن محتوى Markdown باستخدام وظيفة `md` أو ببساطة كسلسلة نصية (إذا كانت تحتوي على بناء جملة Markdown).
 
 <Tabs>
+  <Tab label=".content.md" value=".content.md">
+    بدءًا من الإصدار `8.10.0` ، يمكنك الإعلان عن محتوى Markdown مباشرةً في ملفات `.content.md`. سيكتشف Intlayer محتوى Markdown ويحلله تلقائيًا.
+
+    ```md fileName="markdown-file.en.content.md"
+    ---
+    key: my-markdown-content
+    description: محتواي
+    locale: en
+    ---
+
+    # محتواي
+
+    فيما يلي مثال على محتوى markdown
+    ```
+
+    حقل front-matter `locale` هو الحقل الذي يحدد لغة المحتوى. إنه اختياري. في حالة عدم توفيره ، سيستخدم Intlayer اللغة الافتراضية ، والتي تُستخدم أيضًا كلغة احتياطية إذا لم تتوفر ترجمة للغة معينة.
+
+    مثال على بنية الملفات:
+
+    ```text
+    content/
+    ├── en/
+    │   └── markdown-file.en.content.md
+    ├── fr/
+    │   └── markdown-file.fr.content.md
+    └── es/
+        └── markdown-file.es.content.md
+    ```
+
+    يمكنك إضافة أي خصائص معرفة في [تعريف القاموس](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md) في front-matter
+
+  </Tab>
   <Tab label="التغليف اليدوي" value="manual-wrapping">
-    استخدم الدالة `md` لتعريف محتوى Markdown صراحة. هذا مفيد إذا كنت تريد ضمان معاملة السلسلة كـ Markdown حتى لو لم تكن تحتوي على صيغة واضحة.
+    استخدم الوظيفة `md` للإعلان بشكل صريح عن محتوى Markdown. يكون هذا مفيدًا إذا كنت تريد التأكد من التعامل مع سلسلة نصية على أنها Markdown حتى لو كانت لا تحتوي على بناء جملة واضح.
 
     ```typescript fileName="markdownDictionary.content.ts"
     import { md, type Dictionary } from "intlayer";
@@ -60,13 +95,13 @@ history:
     ```
 
   </Tab>
-  <Tab label="الكشف التلقائي" value="automatic-detection">
-    إذا كانت السلسلة تحتوي على مؤشرات Markdown شائعة (مثل العناوين، القوائم، الروابط، إلخ)، فسيقوم Intlayer بتحويلها تلقائيًا.
+  <Tab label="الاكتشاف التلقائي" value="automatic-detection">
+    إذا كانت السلسلة النصية تحتوي على مؤشرات Markdown شائعة (مثل العناوين والقوائم والروابط وما إلى ذلك) ، فسيقوم Intlayer بتحويلها تلقائيًا.
 
     ```typescript fileName="markdownDictionary.content.ts"
     export default {
       key: "app",
-      contentAutoTransformation: true, // تفعيل الكشف التلقائي لمحتوى Markdown - يمكن ضبطه عالميًا في intlayer.config.ts
+      contentAutoTransformation: true, // تمكين الاكتشاف التلقائي لمحتوى Markdown - يمكن تعيينه عالميًا في intlayer.config.ts
       content: {
         myMarkdownContent: "## عنواني \n\nLorem Ipsum",
       },
@@ -74,8 +109,9 @@ history:
     ```
 
   </Tab>
-  <Tab label="ملفات خارجية" value="external-files">
-    استورد ملفات `.md` مباشرة باستخدام الدالة `file`.
+
+  <Tab label="الملفات الخارجية" value="external-files">
+    قم باستيراد ملفات `.md` مباشرة باستخدام وظيفة `file`.
 
     ```typescript fileName="markdownDictionary.content.ts"
     import { md, file, t } from "intlayer";
@@ -85,7 +121,7 @@ history:
       content: {
         content: t({
           en: md(file("./myMarkdown.en.md")),
-          fr: md(file("./myMarkdown.fr.md")),
+          ar: md(file("./myMarkdown.ar.md")),
         }),
       },
     };
@@ -96,38 +132,74 @@ history:
 
 ---
 
-## الجزء الثاني: عرض Markdown
+## عرض Markdown
+
+يوفر Intlayer طريقتين مستقلتين لعرض Markdown:
+
+1. **عبر `useIntlayer`**
+   — يحول Intlayer تلقائيًا عقدة `md` إلى الإخراج الأصلي لإطار العمل (JSX ، VNode ، سلسلة HTML).
+   - يتم تحليل Frontmatter وكشفه كـ `.metadata`. يمكنك تجاوز التقديم على مستويين — عالميًا باستخدام `MarkdownProvider` (أو ما يعادله في إطار العمل) ومحليًا لكل عقدة باستخدام `.use()`. يمكن دمج كليهما ؛ `.use()` له الأسبقية على `MarkdownProvider` ، والذي له الأسبقية على الافتراضي.
 
-يمكن معالجة العرض تلقائيًا بواسطة نظام محتوى Intlayer أو يدويًا باستخدام أدوات متخصصة.
+2. **الأدوات المساعدة** — `<MarkdownRenderer />` ، `useMarkdownRenderer()` ، و `renderMarkdown()` هي أدوات مستقلة لا تقبل سوى **سلاسل Markdown الخام**. إنها مستقلة عن `useIntlayer` ولا تعمل مع العقد المزخرفة التي تعيدها.
 
-### 1. العرض التلقائي (باستخدام `useIntlayer`)
+يدعم عرض Markdown **MDX** — استخدم أي مكون JSX/framework بالاسم مباشرة داخل Markdown الخاص بك.
 
-عند الوصول إلى المحتوى عبر `useIntlayer`، تكون عقد Markdown جاهزة بالفعل للعرض.
+### 1. العرض التلقائي (عبر `useIntlayer`)
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
-    يمكن عرض عقد Markdown مباشرةً كـ JSX.
+    يمكن عرض عقد Markdown مباشرة كـ JSX.
 
     ```tsx fileName="App.tsx"
     import { useIntlayer } from "react-intlayer";
+    import { MarkdownProvider } from "react-intlayer/markdown";
 
     const AppContent = () => {
       const { myMarkdownContent } = useIntlayer("app");
+
       return <div>{myMarkdownContent}</div>;
     };
+
+    const App = () => (
+      <MarkdownProvider
+        components={{
+          h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+          MyButton: (props) => <button {...props} />, // مكون MDX
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
     ```
 
-    يمكنك أيضًا توفير تجاوزات محلية لعقد معينة باستخدام الأسلوب `.use()`:
+    > إذا لم يكن `MarkdownProvider` موجودًا ، فسيقوم Intlayer بعرض markdown باستخدام المحلل اللغوي الافتراضي من Markdown إلى JSX.
+
+    يمكنك أيضًا توفير تجاوزات محلية لعقد معينة باستخدام طريقة `.use()`:
 
     ```tsx
     {myMarkdownContent.use({
-      h1: ({ children }) => <h1 className="text-3xl font-bold">{children}</h1>,
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
     })}
     ```
 
+    يمكنك استرداد Markdown كسلسلة نصية:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    ويمكنك الوصول إلى بيانات markdown الوصفية الخاصة بك على النحو التالي:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
-    في Vue، يمكن عرض محتوى Markdown باستخدام العنصر المدمج `component` أو مباشرة كعقدة.
+    في Vue ، يمكن عرض محتوى Markdown باستخدام علامة `component` المضمنة أو مباشرة كعقدة.
 
     ```vue fileName="App.vue"
     <script setup>
@@ -140,48 +212,188 @@ history:
     </template>
     ```
 
+    التكوين العالمي عبر إضافة `intlayerMarkdown` (يدعم مكونات MDX المخصصة):
+
+    ```ts fileName="main.ts"
+    import { intlayerMarkdown } from "vue-intlayer/markdown";
+
+    app.use(intlayerMarkdown, {
+      components: {
+        h1: (props) => h('h1', { style: { color: 'green' } }, props.children),
+        MyButton: (props) => h('button', props), // مكون MDX
+      },
+    });
+    ```
+
+    > إذا لم يتم تثبيت إضافة `intlayerMarkdown` ، فسيقوم Intlayer بالعرض باستخدام المترجم الافتراضي.
+
+    يمكنك أيضًا توفير تجاوزات محلية لعقد معينة باستخدام طريقة `.use()`:
+
+    ```vue
+    <component :is="myMarkdownContent.use({
+      h1: (props) => h('h1', { style: { color: 'red' } }, props.children),
+    })" />
+    ```
+
+    يمكنك استرداد Markdown كسلسلة نصية:
+
+    ```vue
+    {{ myMarkdownContent.value }}
+    {{ String(myMarkdownContent) }}
+    {{ myMarkdownContent.toString() }}
+    ```
+
+    ويمكنك الوصول إلى بيانات markdown الوصفية الخاصة بك على النحو التالي:
+
+    ```vue
+    <component :is="myMarkdownContent.metadata" />
+    <component :is="myMarkdownContent.metadata.title" />
+    ```
+
   </Tab>
   <Tab label="Svelte" value="svelte">
-    يقوم Svelte بعرض Markdown كسلسلة HTML افتراضيًا. استخدم `{@html}` لعرضها.
+    يعرض Svelte Markdown كسلسلة HTML افتراضيًا. استخدم `{@html}` لعرضه.
 
-    ```svelte
+    ```svelte fileName="App.svelte"
     <script lang="ts">
     import { useIntlayer } from "svelte-intlayer";
+    import { MarkdownProvider } from "svelte-intlayer/markdown";
+    import MyHeading from "./MyHeading.svelte";
+
     const content = useIntlayer("app");
     </script>
 
-    {@html $content.myMarkdownContent}
+    <MarkdownProvider components={{ h1: MyHeading }}>
+      {@html $content.myMarkdownContent}
+    </MarkdownProvider>
+    ```
+
+    > إذا لم يكن `MarkdownProvider` موجودًا ، فسيقوم Intlayer بعرض markdown باستخدام المترجم الافتراضي.
+
+    يمكنك أيضًا توفير تجاوزات محلية لعقد معينة باستخدام طريقة `.use()`:
+
+    ```svelte
+    {@html $content.myMarkdownContent.use({ ... })}
+    ```
+
+    يمكنك استرداد Markdown كسلسلة نصية:
+
+    ```svelte
+    {$content.myMarkdownContent.value}
+    {String($content.myMarkdownContent)}
+    {$content.myMarkdownContent.toString()}
+    ```
+
+    ويمكنك الوصول إلى بيانات markdown الوصفية الخاصة بك على النحو التالي:
+
+    ```svelte
+    {$content.myMarkdownContent.metadata}
+    {$content.myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Preact" value="preact">
-    يدعم Preact عقد Markdown مباشرة داخل JSX.
+    يدعم Preact عقد Markdown مباشرة في JSX.
 
     ```tsx fileName="App.tsx"
     import { useIntlayer } from "preact-intlayer";
+    import { MarkdownProvider } from "preact-intlayer/markdown";
 
     const AppContent = () => {
       const { myMarkdownContent } = useIntlayer("app");
       return <div>{myMarkdownContent}</div>;
     };
+
+    const App = () => (
+      <MarkdownProvider
+        components={{
+          h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+          MyButton: (props) => <button {...props} />, // مكون MDX
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
+    ```
+
+    > إذا لم يكن `MarkdownProvider` موجودًا ، فسيقوم Intlayer بعرض markdown باستخدام المحلل اللغوي الافتراضي من Markdown إلى JSX.
+
+    يمكنك أيضًا توفير تجاوزات محلية لعقد معينة باستخدام طريقة `.use()`:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+    })}
+    ```
+
+    يمكنك استرداد Markdown كسلسلة نصية:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    ويمكنك الوصول إلى بيانات markdown الوصفية الخاصة بك على النحو التالي:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Solid" value="solid">
-    يدعم Solid عقد Markdown مباشرة داخل JSX.
+    يدعم Solid عقد Markdown مباشرة في JSX.
 
     ```tsx fileName="App.tsx"
     import { useIntlayer } from "solid-intlayer";
+    import { MarkdownProvider } from "solid-intlayer/markdown";
 
     const AppContent = () => {
       const { myMarkdownContent } = useIntlayer("app");
       return <div>{myMarkdownContent}</div>;
     };
+
+    const App = () => (
+      <MarkdownProvider
+        components={{
+          h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,
+          MyButton: (props) => <button {...props} />, // مكون MDX
+        }}
+      >
+        <AppContent />
+      </MarkdownProvider>
+    );
+    ```
+
+    > إذا لم يكن `MarkdownProvider` موجودًا ، فسيقوم Intlayer بعرض markdown باستخدام المحلل اللغوي الافتراضي من Markdown إلى JSX.
+
+    يمكنك أيضًا توفير تجاوزات محلية لعقد معينة باستخدام طريقة `.use()`:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,
+    })}
+    ```
+
+    يمكنك استرداد Markdown كسلسلة نصية:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    ويمكنك الوصول إلى بيانات markdown الوصفية الخاصة بك على النحو التالي:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Angular" value="angular">
-    يستخدم Angular توجيه `[innerHTML]` لعرض محتوى Markdown.
+    يستخدم Angular التوجيه `[innerHTML]` لعرض محتوى Markdown.
 
     ```typescript fileName="app.component.ts"
     import { Component } from "@angular/core";
@@ -196,7 +408,9 @@ history:
     }
     ```
 
-    يمكنك أيضًا توفير تجاوزات محلية لعقد معينة باستخدام الأسلوب `.use()`:
+    > إذا لم يتم تكوين مزود IntlayerMarkdown ، فسيقوم Intlayer بالعرض باستخدام المترجم الافتراضي.
+
+    يمكنك أيضًا توفير تجاوزات محلية لعقد معينة باستخدام طريقة `.use()`:
 
     ```typescript
     content().myMarkdownContent.use({
@@ -204,19 +418,34 @@ history:
     })
     ```
 
+    يمكنك استرداد Markdown كسلسلة نصية:
+
+    ```typescript
+    content().myMarkdownContent.value
+    String(content().myMarkdownContent)
+    content().myMarkdownContent.toString()
+    ```
+
+    ويمكنك الوصول إلى بيانات markdown الوصفية الخاصة بك على النحو التالي:
+
+    ```typescript
+    content().myMarkdownContent.metadata
+    content().myMarkdownContent.metadata.title
+    ```
+
   </Tab>
 </Tabs>
 
-### 2. التصيير اليدوي والأدوات المتقدمة
+### 2. الأدوات المساعدة (سلاسل Markdown فقط)
 
-إذا كنت بحاجة إلى عرض سلاسل Markdown خام أو التحكم بشكل أكبر في عملية العرض، فاستخدم الأدوات التالية.
+هذه الأدوات تعرض **فقط سلاسل Markdown الخام** وهي مستقلة عن `useIntlayer`. استخدمها عندما تحتاج إلى عرض Markdown من مصادر أخرى غير قواميسك.
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
   
-    #### المكوّن `<MarkdownRenderer />`
+    #### مكون `<MarkdownRenderer />`
 
-    عرض سلسلة Markdown مع خيارات محددة.
+    يعرض سلسلة Markdown مع خيارات محددة.
 
     ```tsx
     import { MarkdownRenderer } from "react-intlayer/markdown";
@@ -226,9 +455,9 @@ history:
     </MarkdownRenderer>
     ```
 
-    #### Hook `useMarkdownRenderer()`
+    #### خطاف `useMarkdownRenderer()`
 
-    احصل على دالة renderer مهيأة مسبقًا.
+    احصل على وظيفة عارض مكونة مسبقًا.
 
     ```tsx
     import { useMarkdownRenderer } from "react-intlayer/markdown";
@@ -242,7 +471,7 @@ history:
     ```
 
     #### أداة `renderMarkdown()`
-    أداة مستقلة للـ rendering خارج المكونات.
+    أداة مستقلة للعرض خارج المكونات.
 
     ```tsx
     import { renderMarkdown } from "react-intlayer/markdown";
@@ -253,7 +482,7 @@ history:
   </Tab>
   <Tab label="Vue" value="vue">
 
-    #### المكوّن `<MarkdownRenderer />`
+    #### مكون `<MarkdownRenderer />`
 
     ```vue
     <script setup>
@@ -268,7 +497,7 @@ history:
   </Tab>
   <Tab label="Svelte" value="svelte">
 
-    #### المكوّن `<MarkdownRenderer />`
+    #### مكون `<MarkdownRenderer />`
 
     ```svelte
     <script lang="ts">
@@ -278,7 +507,7 @@ history:
     <MarkdownRenderer forceBlock={true} value="# عنواني" />
     ```
 
-    #### Hook `useMarkdownRenderer()`
+    #### خطاف `useMarkdownRenderer()`
 
     ```svelte
     <script lang="ts">
@@ -301,7 +530,7 @@ history:
 
   </Tab>
   <Tab label="Preact" value="preact">
-    #### المكوّن `<MarkdownRenderer />`
+    #### مكون `<MarkdownRenderer />`
 
     ```tsx
     import { MarkdownRenderer } from "preact-intlayer/markdown";
@@ -311,7 +540,7 @@ history:
     </MarkdownRenderer>
     ```
 
-    #### Hook `useMarkdownRenderer()`
+    #### خطاف `useMarkdownRenderer()`
 
     ```tsx
     import { useMarkdownRenderer } from "preact-intlayer/markdown";
@@ -331,7 +560,7 @@ history:
 
   </Tab>
   <Tab label="Solid" value="solid">
-    #### المكوّن `<MarkdownRenderer />`
+    #### مكون `<MarkdownRenderer />`
 
     ```tsx
     import { MarkdownRenderer } from "solid-intlayer/markdown";
@@ -341,7 +570,7 @@ history:
     </MarkdownRenderer>
     ```
 
-    #### Hook `useMarkdownRenderer()`
+    #### خطاف `useMarkdownRenderer()`
 
     ```tsx
     import { useMarkdownRenderer } from "solid-intlayer/markdown";
@@ -362,10 +591,10 @@ history:
   </Tab>
   <Tab label="Angular" value="angular">
     #### خدمة `IntlayerMarkdownService`
-    عرض سلسلة Markdown باستخدام الخدمة.
+    تعرض سلسلة Markdown باستخدام الخدمة.
 
     ```typescript
-    import { IntlayerMarkdownService } from "angular-intlayer";
+    import { IntlayerMarkdownService } from "angular-intlayer/markdown";
 
     export class MyComponent {
       constructor(private markdownService: IntlayerMarkdownService) {}
@@ -381,9 +610,9 @@ history:
 
 ---
 
-## التكوين العام باستخدام `MarkdownProvider`
+## التكوين العالمي باستخدام `MarkdownProvider`
 
-يمكنك تكوين عرض Markdown على مستوى التطبيق بأكمله. هذا يغنيك عن تمرير نفس الخصائص لكل renderer.
+يقوم `MarkdownProvider` (أو ما يعادله في إطار العمل) بتكوين خط أنابيب عرض Markdown لتطبيقك بالكامل. ينطبق هذا على كل من العرض التلقائي `useIntlayer` والأدوات المساعدة. الخيارات المعينة هنا هي الإعدادات الافتراضية — يتجاوزها `.use()` على مستوى العقدة.
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
@@ -394,8 +623,9 @@ history:
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
         components={{
-          h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
-          a: ({ href, children }) => <Link to={href}>{children}</Link>,
+          h1: (props) => <h1 style={{color: 'green'}} {...props} />,
+          a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,
+          MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,
         }}
       >
         {children}
@@ -403,6 +633,27 @@ history:
     );
     ```
 
+    > MDX مدعوم — يتم حل أي اسم مكون يستخدم داخل Markdown الخاص بك (على سبيل المثال `<MyCustomJSXComponent />`) مقابل خريطة `components`.
+
+    يمكنك أيضًا استخدام عارض markdown الخاص بك:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "react-intlayer/markdown";
+
+    export const AppProvider = ({ children }) => (
+      <MarkdownProvider
+        renderMarkdown={async (md) => {
+          const { renderMarkdown } = await import('react-intlayer/markdown');
+          return renderMarkdown(md);
+        }}
+      >
+        {children}
+      </MarkdownProvider>
+    );
+    ```
+
+    > الاستيراد الديناميكي لعارض Markdown الخاص بك هو طريقة رائعة لتقليل حجم حزمة تطبيقك.
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -428,6 +679,29 @@ history:
     app.mount("#app");
     ```
 
+    يمكنك أيضًا استخدام عارض markdown الخاص بك:
+
+    ```typescript fileName="main.ts"
+    import { createApp } from "vue";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerMarkdown } from "vue-intlayer/markdown";
+    import App from "./App.vue";
+
+    const app = createApp(App);
+
+    app.use(intlayer);
+    app.use(intlayerMarkdown, {
+      renderMarkdown: async (md) => {
+        const { renderMarkdown } = await import('vue-intlayer/markdown');
+        return renderMarkdown(md);
+      },
+    });
+
+    app.mount("#app");
+    ```
+
+    > الاستيراد الديناميكي لعارض Markdown الخاص بك هو طريقة رائعة لتقليل حجم حزمة تطبيقك.
+
   </Tab>
   <Tab label="Svelte" value="svelte">
 
@@ -446,6 +720,25 @@ history:
     </MarkdownProvider>
     ```
 
+    يمكنك أيضًا استخدام عارض markdown الخاص بك:
+
+    ```svelte fileName="App.svelte"
+    <script lang="ts">
+      import { MarkdownProvider } from "svelte-intlayer/markdown";
+    </script>
+
+    <MarkdownProvider
+      renderMarkdown={async (md) => {
+        const { renderMarkdown } = await import('svelte-intlayer/markdown');
+        return renderMarkdown(md);
+      }}
+    >
+      <slot />
+    </MarkdownProvider>
+    ```
+
+    > الاستيراد الديناميكي لعارض Markdown الخاص بك هو طريقة رائعة لتقليل حجم حزمة تطبيقك.
+
   </Tab>
   <Tab label="Preact" value="preact">
 
@@ -463,6 +756,25 @@ history:
     );
     ```
 
+    يمكنك أيضًا استخدام عارض markdown الخاص بك:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "preact-intlayer/markdown";
+
+    export const AppProvider = ({ children }) => (
+      <MarkdownProvider
+        renderMarkdown={async (md) => {
+          const { renderMarkdown } = await import('preact-intlayer/markdown');
+          return renderMarkdown(md);
+        }}
+      >
+        {children}
+      </MarkdownProvider>
+    );
+    ```
+
+    > الاستيراد الديناميكي لعارض Markdown الخاص بك هو طريقة رائعة لتقليل حجم حزمة تطبيقك.
+
   </Tab>
   <Tab label="Solid" value="solid">
 
@@ -480,38 +792,46 @@ history:
     );
     ```
 
-  </Tab>
-  <Tab label="Angular" value="angular">
+    يمكنك أيضًا استخدام عارض markdown الخاص بك:
 
-    ```typescript fileName="app.config.ts"
-    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "solid-intlayer/markdown";
 
-    export const appConfig: ApplicationConfig = {
-      providers: [
-        createIntlayerMarkdownProvider({
-          components: {
-            h1: { class: "text-2xl font-bold" },
-          },
-        }),
-      ],
-    };
+    export const AppProvider = (props) => (
+      <MarkdownProvider
+        renderMarkdown={async (md) => {
+          const { renderMarkdown } = await import('solid-intlayer/markdown');
+          return renderMarkdown(md);
+        }}
+      >
+        {props.children}
+      </MarkdownProvider>
+    );
     ```
 
-  </Tab>
-</Tabs>
+    > الاستيراد الديناميكي لعارض Markdown الخاص بك هو طريقة رائعة لتقليل حجم حزمة تطبيقك.
 
----
+  </Tab>
+  <Tab label="Angular" value="angular">
 
-## مرجع الخيارات
+    ```typescript fileName="app.module.ts"
+    import { NgModule } from '@angular/core';
+    import { IntlayerMarkdownModule } from 'angular-intlayer/markdown';
+
+    @NgModule({
+      imports: [
+        IntlayerMarkdownModule.forRoot({
+          renderMarkdown: async (md) => {
+            const { renderMarkdown } = await import('angular-intlayer/markdown');
+            return renderMarkdown(md);
+          }
+        })
+      ]
+    })
+    export class AppModule {}
+    ```
 
-يمكن تمرير هذه الخيارات إلى `MarkdownProvider` و`MarkdownRenderer` و`useMarkdownRenderer` و`renderMarkdown`.
+    > الاستيراد الديناميكي لعارض Markdown الخاص بك هو طريقة رائعة لتقليل حجم حزمة تطبيقك.
 
-| الخيار                | النوع       | الافتراضي | الوصف                                                                   |
-| :-------------------- | :---------- | :-------- | :---------------------------------------------------------------------- |
-| `forceBlock`          | `boolean`   | `false`   | يجبر المخرجات على أن تكون مغلفة في عنصر على مستوى الكتلة (مثل `<div>`). |
-| `forceInline`         | `boolean`   | `false`   | يجبر المخرجات على أن تكون مغلفة في عنصر سطري (مثل `<span>`).            |
-| `tagfilter`           | `boolean`   | `true`    | يفعل مرشح وسوم GitHub لتحسين الأمان عن طريق إزالة وسوم HTML الخطرة.     |
-| `preserveFrontmatter` | `boolean`   | `false`   | إذا كان `true`، فلن يتم إزالة frontmatter في بداية سلسلة Markdown.      |
-| `components`          | `Overrides` | `{}`      | خريطة تربط وسوم HTML بمكونات مخصصة (مثل `{ h1: MyHeading }`).           |
-| `wrapper`             | `Component` | `null`    | مكون مخصص لتغليف Markdown المصير.                                       |
-| `renderMarkdown`      | `Function`  | `null`    | دالة تصيير مخصصة لاستبدال مترجم Markdown الافتراضي بالكامل.             |
+  </Tab>
+</Tabs>