@intlayer/docs 8.10.0-canary.0 → 8.10.0

package/docs/hi/dictionary/markdown.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-02-07
 updatedAt: 2026-05-19
-title: Markdown सामग्री
-description: Intlayer के साथ अपने बहुभाषी वेबसाइट में Markdown सामग्री को घोषित करने और उपयोग करने का तरीका जानें। अपने प्रोजेक्ट में Markdown को आसानी से एकीकृत करने के लिए इस ऑनलाइन दस्तावेज़ का पालन करें।
+title: Markdown
+description: Intlayer के साथ अपनी बहुभाषी वेबसाइट में Markdown सामग्री घोषित करने और उसका उपयोग करने का तरीका जानें। अपने प्रोजेक्ट में Markdown को समेकित रूप से एकीकृत करने के लिए इस ऑनलाइन दस्तावेज़ में दिए गए चरणों का पालन करें।
 keywords:
   - Markdown
   - अंतर्राष्ट्रीयकरण
@@ -19,51 +19,51 @@ slugs:
 history:
   - version: 8.10.0
     date: 2026-05-19
-    changes: "`.content.md` फ़ाइल समर्थन जोड़ें"
+    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(installIntlayerMarkdown)` के बजाय `app.use(intlayerMarkdown)` का उपयोग करें"
   - 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: "मार्कडाउन सामग्री का स्वचालित सजावट, MDX और SSR समर्थन"
+    changes: "मार्कडाउन सामग्री, MDX और SSR समर्थन की स्वचालित सजावट"
   - version: 5.5.10
     date: 2025-06-29
-    changes: "इतिहास प्रारंभ"
+    changes: "प्रारंभिक इतिहास"
 ---
 
-# मार्कडाउन / रिच टेक्स्ट सामग्री
+# Markdown / रिच टेक्स्ट सामग्री
 
-Intlayer मार्कडाउन सिंटैक्स का उपयोग करके परिभाषित रिच टेक्स्ट सामग्री का समर्थन करता है। यह आपको ब्लॉग, लेख और बहुत कुछ जैसे समृद्ध स्वरूपण के साथ सामग्री को आसानी से लिखने और बनाए रखने की अनुमति देता है।
+Intlayer Markdown सिंटैक्स का उपयोग करके परिभाषित रिच टेक्स्ट सामग्री का समर्थन करता है। यह आपको ब्लॉग, लेख आदि जैसी समृद्ध-स्वरूपित सामग्री को आसानी से लिखने और बनाए रखने की अनुमति देता है।
 
-## मार्कडाउन सामग्री घोषित करना
+## Markdown सामग्री घोषित करना
 
-आप `md` फ़ंक्शन का उपयोग करके या केवल एक स्ट्रिंग के रूप में मार्कडाउन सामग्री घोषित कर सकते हैं (यदि इसमें मार्कडाउन सिंटैक्स है)।
+आप `md` फ़ंक्शन का उपयोग करके या केवल एक स्ट्रिंग के रूप में (यदि इसमें Markdown सिंटैक्स है) Markdown सामग्री घोषित कर सकते हैं।
 
 <Tabs>
   <Tab label=".content.md" value=".content.md">
-    संस्करण `8.10.0` से, आप सीधे `.content.md` फ़ाइलों में मार्कडाउन सामग्री घोषित कर सकते हैं। Intlayer स्वचालित रूप से मार्कडाउन सामग्री का पता लगाएगा और उसका विश्लेषण (parse) करेगा।
+    संस्करण `8.10.0` से, आप सीधे `.content.md` फ़ाइलों में Markdown सामग्री घोषित कर सकते हैं। Intlayer स्वचालित रूप से Markdown सामग्री का पता लगाएगा और उसे पार्स करेगा।
 
-    ```md fileName="markdown-file.hi.content.md"
+    ```md fileName="markdown-file.en.content.md"
     ---
     key: my-markdown-content
     description: मेरी सामग्री
-    locale: hi
+    locale: en
     ---
 
     # मेरी सामग्री
 
-    यहाँ मार्कडाउन सामग्री का एक उदाहरण दिया गया है
+    यहाँ एक मार्कडाउन सामग्री उदाहरण है
     ```
 
-    `locale` फ्रंटमैटर फ़ील्ड वह फ़ील्ड है जो सामग्री के स्थान (locale) को परिभाषित करती है। यह वैकल्पिक है। यदि प्रदान नहीं किया जाता है, तो Intlayer डिफ़ॉल्ट स्थान का उपयोग करेगा, जिसका उपयोग बैकअप (fallback) स्थान के रूप में भी किया जाता है यदि किसी विशिष्ट स्थान के लिए कोई अनुवाद उपलब्ध नहीं है।
+    `locale` फ्रंट-मैटर फ़ील्ड वह फ़ील्ड है जो सामग्री स्थानीय (locale) को परिभाषित करता है। यह वैकल्पिक है। यदि प्रदान नहीं किया जाता है, तो Intlayer डिफ़ॉल्ट स्थानीय का उपयोग करेगा, जिसे विशिष्ट स्थानीय के लिए कोई अनुवाद उपलब्ध नहीं होने पर फ़ॉलबैक स्थानीय के रूप में भी उपयोग किया जाता है।
 
-    फ़ाइल संरचना का उदाहरण:
+    फ़ाइल संरचना उदाहरण:
 
     ```text
     content/
@@ -75,11 +75,11 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
         └── markdown-file.es.content.md
     ```
 
-    आप फ्रंट-मैटर में [डिक्शनरी परिभाषा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) में परिभाषित किसी भी गुण को जोड़ सकते हैं।
+    आप फ्रंट-मैटर में [डिक्शनरी परिभाषा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/content_file.md) में परिभाषित कोई भी गुण जोड़ सकते हैं
 
   </Tab>
   <Tab label="मैनुअल रैपिंग" value="manual-wrapping">
-    मार्कडाउन सामग्री को स्पष्ट रूप से घोषित करने के लिए `md` फ़ंक्शन का उपयोग करें। यह तब उपयोगी होता है जब आप सुनिश्चित करना चाहते हैं कि स्ट्रिंग को मार्कडाउन के रूप में माना जाए, भले ही इसमें स्पष्ट सिंटैक्स न हो।
+    Markdown सामग्री को स्पष्ट रूप से घोषित करने के लिए `md` फ़ंक्शन का उपयोग करें। यह तब उपयोगी होता है जब आप यह सुनिश्चित करना चाहते हैं कि किसी स्ट्रिंग को Markdown के रूप में माना जाए, भले ही उसमें स्पष्ट सिंटैक्स न हो।
 
     ```typescript fileName="markdownDictionary.content.ts"
     import { md, type Dictionary } from "intlayer";
@@ -95,33 +95,34 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     ```
 
   </Tab>
-  <Tab label="स्वचालित पहचान" value="automatic-detection">
-    यदि स्ट्रिंग में सामान्य मार्कडाउन संकेतक (जैसे हेडर, सूचियां, लिंक आदि) हैं, तो Intlayer इसे स्वतः ही रूपांतरित कर देगा।
+  <Tab label="बाहरी फ़ाइलें" value="external-files">
+    `file` फ़ंक्शन का उपयोग करके सीधे `.md` फ़ाइलें आयात करें।
 
     ```typescript fileName="markdownDictionary.content.ts"
+    import { md, file, t } from "intlayer";
+
     export default {
       key: "app",
-      contentAutoTransformation: true, // मार्कडाउन सामग्री की स्वचालित पहचान सक्षम करें - intlayer.config.ts में वैश्विक स्तर पर सेट किया जा सकता है
       content: {
-        myMarkdownContent: "## मेरा शीर्षक \n\nLorem Ipsum",
+        content: t({
+          en: md(file("./myMarkdown.en.md")),
+          hi: md(file("./myMarkdown.hi.md")),
+        }),
       },
     };
     ```
 
   </Tab>
-  <Tab label="बाहरी फ़ाइलें" value="external-files">
-    `file` फ़ंक्शन का उपयोग करके सीधे `.md` फ़ाइलें आयात करें।
 
-    ```typescript fileName="markdownDictionary.content.ts"
-    import { md, file, t } from "intlayer";
+  <Tab label="स्वचालित पहचान" value="automatic-detection">
+    यदि स्ट्रिंग में सामान्य Markdown संकेतक (जैसे हेडिंग, लिस्ट, लिंक आदि) हैं, तो Intlayer स्वचालित रूप से इसे बदल देगा।
 
+    ```typescript fileName="markdownDictionary.content.ts"
     export default {
       key: "app",
+      contentAutoTransformation: true, // Markdown सामग्री की स्वचालित पहचान सक्षम करें - intlayer.config.ts में विश्व स्तर पर सेट किया जा सकता है
       content: {
-        content: t({
-          en: md(file("./myMarkdown.en.md")),
-          fr: md(file("./myMarkdown.fr.md")),
-        }),
+        myMarkdownContent: "## मेरा शीर्षक \n\nLorem Ipsum",
       },
     };
     ```
@@ -131,38 +132,74 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
 
 ---
 
-## मार्कडाउन रेंडरिंग
+## Markdown रेंडरिंग
+
+Intlayer Markdown रेंडर करने के दो स्वतंत्र तरीके प्रदान करता है:
+
+1. **`useIntlayer` के माध्यम से**
+   — Intlayer स्वचालित रूप से `md` नोड को फ्रेमवर्क के मूल आउटपुट (JSX, VNode, HTML स्ट्रिंग) में बदल देता है।
+   - फ्रंटमैटर को पार्स किया जाता है और `.metadata` के रूप में उजागर किया जाता है। आप रेंडरिंग को दो स्तरों पर ओवरराइड कर सकते हैं — विश्व स्तर पर `MarkdownProvider` (या फ्रेमवर्क समतुल्य) के साथ और स्थानीय स्तर पर प्रति नोड `.use()` के साथ। दोनों को जोड़ा जा सकता है; `.use()`, `MarkdownProvider` पर पूर्वता लेता है, जो डिफ़ॉल्ट पर पूर्वता लेता है।
 
-रेंडरिंग को Intlayer के सामग्री सिस्टम द्वारा स्वचालित रूप से या विशेष टूल्स का उपयोग करके मैन्युअल रूप से संभाला जा सकता है।
+2. **हेल्पर यूटिलिटीज** — `<MarkdownRenderer />`, `useMarkdownRenderer()`, और `renderMarkdown()` स्टैंडअलोन टूल हैं जो **केवल कच्चे Markdown स्ट्रिंग्स** को स्वीकार करते हैं। वे `useIntlayer` से स्वतंत्र हैं और इसके द्वारा लौटाए गए सजाए गए नोड्स के साथ काम नहीं करते हैं।
 
-### 1. स्वचालित रेंडरिंग (`useIntlayer` का उपयोग करके)
+Markdown रेंडरिंग **MDX** का समर्थन करता है — अपने Markdown के अंदर सीधे नाम से किसी भी JSX/फ्रेमवर्क घटक का उपयोग करें।
 
-जब आप `useIntlayer` के माध्यम से सामग्री तक पहुँचते हैं, तो मार्कडाउन नोड्स रेंडरिंग के लिए पहले से ही तैयार होते हैं।
+### 1. स्वचालित रेंडरिंग (`useIntlayer` के माध्यम से)
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
-    मार्कडाउन नोड्स को सीधे 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 से 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()}
+    ```
+
+    और आप अपने मार्कडाउन मेटाडेटा तक इस प्रकार पहुँच सकते हैं:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
+    ```
+
   </Tab>
   <Tab label="Vue" value="vue">
-    Vue में, मार्कडाउन सामग्री को बिल्ट-इन `component` का उपयोग करके या सीधे नोड के रूप में रेंडर किया जा सकता है।
+    Vue में, Markdown सामग्री को अंतर्निहित `component` टैग का उपयोग करके या सीधे एक नोड के रूप में रेंडर किया जा सकता है।
 
     ```vue fileName="App.vue"
     <script setup>
@@ -175,48 +212,188 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     </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() }}
+    ```
+
+    और आप अपने मार्कडाउन मेटाडेटा तक इस प्रकार पहुँच सकते हैं:
+
+    ```vue
+    <component :is="myMarkdownContent.metadata" />
+    <component :is="myMarkdownContent.metadata.title" />
+    ```
+
   </Tab>
   <Tab label="Svelte" value="svelte">
-    Svelte डिफ़ॉल्ट रूप से मार्कडाउन को 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 डिफ़ॉल्ट कंपाइलर का उपयोग करके मार्कडाउन को रेंडर करेगा।
+
+    आप `.use()` विधि का उपयोग करके विशिष्ट नोड्स के लिए स्थानीय ओवरराइड भी प्रदान कर सकते हैं:
+
+    ```svelte
+    {@html $content.myMarkdownContent.use({ ... })}
+    ```
+
+    आप Markdown को एक स्ट्रिंग के रूप में प्राप्त कर सकते हैं:
+
+    ```svelte
+    {$content.myMarkdownContent.value}
+    {String($content.myMarkdownContent)}
+    {$content.myMarkdownContent.toString()}
+    ```
+
+    और आप अपने मार्कडाउन मेटाडेटा तक इस प्रकार पहुँच सकते हैं:
+
+    ```svelte
+    {$content.myMarkdownContent.metadata}
+    {$content.myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Preact" value="preact">
-    Preact JSX में सीधे मार्कडाउन नोड्स का समर्थन करता है।
+    Preact, JSX में सीधे Markdown नोड्स का समर्थन करता है।
 
     ```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 से JSX पार्सर का उपयोग करके मार्कडाउन को रेंडर करेगा।
+
+    आप `.use()` विधि का उपयोग करके विशिष्ट नोड्स के लिए स्थानीय ओवरराइड भी प्रदान कर सकते हैं:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
+    })}
+    ```
+
+    आप Markdown को एक स्ट्रिंग के रूप में प्राप्त कर सकते हैं:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    और आप अपने मार्कडाउन मेटाडेटा तक इस प्रकार पहुँच सकते हैं:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Solid" value="solid">
-    Solid JSX में सीधे मार्कडाउन नोड्स का समर्थन करता है।
+    Solid, JSX में सीधे Markdown नोड्स का समर्थन करता है।
 
     ```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 से JSX पार्सर का उपयोग करके मार्कडाउन को रेंडर करेगा।
+
+    आप `.use()` विधि का उपयोग करके विशिष्ट नोड्स के लिए स्थानीय ओवरराइड भी प्रदान कर सकते हैं:
+
+    ```tsx
+    {myMarkdownContent.use({
+      h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,
+    })}
+    ```
+
+    आप Markdown को एक स्ट्रिंग के रूप में प्राप्त कर सकते हैं:
+
+    ```tsx
+    {myMarkdownContent.value}
+    {String(myMarkdownContent)}
+    {myMarkdownContent.toString()}
+    ```
+
+    और आप अपने मार्कडाउन मेटाडेटा तक इस प्रकार पहुँच सकते हैं:
+
+    ```tsx
+    {myMarkdownContent.metadata}
+    {myMarkdownContent.metadata.title}
     ```
 
   </Tab>
   <Tab label="Angular" value="angular">
-    Angular मार्कडाउन सामग्री को रेंडर करने के लिए `[innerHTML]` डायरेक्टिव का उपयोग करता है।
+    Angular, Markdown सामग्री को रेंडर करने के लिए `[innerHTML]` निर्देश का उपयोग करता है।
 
     ```typescript fileName="app.component.ts"
     import { Component } from "@angular/core";
@@ -231,7 +408,9 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     }
     ```
 
-    आप `.use()` मेथड का उपयोग करके विशिष्ट नोड्स के लिए स्थानीय ओवरराइड भी प्रदान कर सकते हैं:
+    > यदि IntlayerMarkdown प्रदाता कॉन्फ़िगर नहीं किया गया है, तो Intlayer डिफ़ॉल्ट कंपाइलर का उपयोग करके रेंडर करेगा।
+
+    आप `.use()` विधि का उपयोग करके विशिष्ट नोड्स के लिए स्थानीय ओवरराइड भी प्रदान कर सकते हैं:
 
     ```typescript
     content().myMarkdownContent.use({
@@ -239,19 +418,34 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     })
     ```
 
+    आप Markdown को एक स्ट्रिंग के रूप में प्राप्त कर सकते हैं:
+
+    ```typescript
+    content().myMarkdownContent.value
+    String(content().myMarkdownContent)
+    content().myMarkdownContent.toString()
+    ```
+
+    और आप अपने मार्कडाउन मेटाडेटा तक इस प्रकार पहुँच सकते हैं:
+
+    ```typescript
+    content().myMarkdownContent.metadata
+    content().myMarkdownContent.metadata.title
+    ```
+
   </Tab>
 </Tabs>
 
-### 2. मैन्युअल रेंडरिंग और उन्नत टूल्स
+### 2. हेल्पर यूटिलिटीज (केवल Markdown स्ट्रिंग्स)
 
-यदि आपको कच्ची मार्कडाउन स्ट्रिंग्स रेंडर करने की आवश्यकता है या रेंडरिंग प्रक्रिया पर अधिक नियंत्रण चाहिए, तो निम्नलिखित टूल्स का उपयोग करें।
+ये यूटिलिटीज **केवल कच्चे Markdown स्ट्रिंग्स** को रेंडर करती हैं और `useIntlayer` से स्वतंत्र हैं। जब आपको अपने डिक्शनरी के अलावा अन्य स्रोतों से Markdown रेंडर करने की आवश्यकता हो, तो इनका उपयोग करें।
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
   
     #### `<MarkdownRenderer />` घटक
 
-    विशिष्ट विकल्पों के साथ मार्कडाउन स्ट्रिंग रेंडर करें।
+    विशिष्ट विकल्पों के साथ एक Markdown स्ट्रिंग रेंडर करता है।
 
     ```tsx
     import { MarkdownRenderer } from "react-intlayer/markdown";
@@ -263,7 +457,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
 
     #### `useMarkdownRenderer()` हुक
 
-    एक पूर्व-कॉन्फ़िगर रेंडरर फ़ंक्शन प्राप्त करें।
+    पूर्व-कॉन्फ़िगर रेंडरर फ़ंक्शन प्राप्त करें।
 
     ```tsx
     import { useMarkdownRenderer } from "react-intlayer/markdown";
@@ -276,8 +470,8 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     return renderMarkdown("# मेरा शीर्षक");
     ```
 
-    #### `renderMarkdown()` यूटिलिटी
-    घटकों के बाहर रेंडरिंग के लिए स्टैंडअलोन यूटिलिटी।
+    #### `renderMarkdown()` उपयोगिता
+    घटकों के बाहर रेंडरिंग के लिए स्टैंडअलोन उपयोगिता।
 
     ```tsx
     import { renderMarkdown } from "react-intlayer/markdown";
@@ -324,7 +518,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     {@html render("# मेरा शीर्षक")}
     ```
 
-    #### `renderMarkdown()` यूटिलिटी
+    #### `renderMarkdown()` उपयोगिता
 
     ```svelte
     <script lang="ts">
@@ -356,7 +550,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     return <div>{render("# मेरा शीर्षक")}</div>;
     ```
 
-    #### `renderMarkdown()` यूटिलिटी
+    #### `renderMarkdown()` उपयोगिता
 
     ```tsx
     import { renderMarkdown } from "preact-intlayer/markdown";
@@ -386,7 +580,7 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     return <div>{render("# मेरा शीर्षक")}</div>;
     ```
 
-    #### `renderMarkdown()` यूटिलिटी
+    #### `renderMarkdown()` उपयोगिता
 
     ```tsx
     import { renderMarkdown } from "solid-intlayer/markdown";
@@ -396,11 +590,11 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
 
   </Tab>
   <Tab label="Angular" value="angular">
-    #### `IntlayerMarkdownService` सर्विस
-    सेवा का उपयोग करके मार्कडाउन स्ट्रिंग रेंडर करें।
+    #### `IntlayerMarkdownService` सेवा
+    सेवा का उपयोग करके एक Markdown स्ट्रिंग रेंडर करता है।
 
     ```typescript
-    import { IntlayerMarkdownService } from "angular-intlayer";
+    import { IntlayerMarkdownService } from "angular-intlayer/markdown";
 
     export class MyComponent {
       constructor(private markdownService: IntlayerMarkdownService) {}
@@ -416,9 +610,9 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
 
 ---
 
-## `MarkdownProvider` के साथ वैश्विक कॉन्फ़िगरेशन
+## `MarkdownProvider` के साथ ग्लोबल कॉन्फ़िगरेशन
 
-आप अपने पूरे एप्लिकेशन के लिए मार्कडाउन रेंडरिंग को वैश्विक स्तर पर कॉन्फ़िगर कर सकते हैं। यह प्रत्येक रेंडरर को समान प्रॉप्स पास करने से बचाता है।
+`MarkdownProvider` (या इसके फ्रेमवर्क समतुल्य) आपके संपूर्ण एप्लिकेशन के लिए Markdown रेंडरिंग पाइपलाइन को कॉन्फ़िगर करता है। यह स्वचालित `useIntlayer` रेंडरिंग और हेल्पर यूटिलिटीज दोनों पर लागू होता है। यहाँ सेट किए गए विकल्प डिफ़ॉल्ट हैं — `.use()` उन्हें नोड स्तर पर ओवरराइड करता है।
 
 <Tabs group="framework">
   <Tab label="React / Next.js" value="react">
@@ -429,8 +623,29 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     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}
+      </MarkdownProvider>
+    );
+    ```
+
+    > MDX समर्थित है — आपके Markdown के अंदर उपयोग किए गए किसी भी घटक नाम (उदा. `<MyCustomJSXComponent />`) को `components` मानचित्र के विरुद्ध हल किया जाता है।
+
+    आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { MarkdownProvider } from "react-intlayer/markdown";
+
+    export const AppProvider = ({ children }) => (
+      <MarkdownProvider
+        renderMarkdown={async (md) => {
+          // Use dynamic import to reduce the bundle size of your application
+          const { renderMarkdown } = await import('react-intlayer/markdown');
+          return renderMarkdown(md);
         }}
       >
         {children}
@@ -438,6 +653,8 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     );
     ```
 
+    > अपने Markdown रेंडरर को गतिशील रूप से आयात करना आपके एप्लिकेशन के बंडल आकार को कम करने का एक शानदार तरीका है।
+
   </Tab>
   <Tab label="Vue" value="vue">
 
@@ -463,6 +680,29 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     app.mount("#app");
     ```
 
+    आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
+
+    ```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">
 
@@ -481,6 +721,25 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     </MarkdownProvider>
     ```
 
+    आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
+
+    ```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">
 
@@ -498,6 +757,25 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     );
     ```
 
+    आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
+
+    ```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">
 
@@ -515,38 +793,46 @@ Intlayer मार्कडाउन सिंटैक्स का उपय
     );
     ```
 
-  </Tab>
-  <Tab label="Angular" value="angular">
+    आप अपने स्वयं के मार्कडाउन रेंडरर का भी उपयोग कर सकते हैं:
 
-    ```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`   | खतरनाक HTML टैग्स को हटाकर सुरक्षा में सुधार के लिए GitHub टैग फ़िल्टर को सक्षम करता है।        |
-| `preserveFrontmatter` | `boolean`   | `false`  | यदि `true` है, तो मार्कडाउन स्ट्रिंग की शुरुआत में फ्रंटमैटर (frontmatter) को नहीं हटाया जाएगा। |
-| `components`          | `Overrides` | `{}`     | HTML टैग्स का कस्टम घटकों के साथ मैपिंग (जैसे, `{ h1: MyHeading }`)।                            |
-| `wrapper`             | `Component` | `null`   | रेंडर किए गए मार्कडाउन को लपेटने के लिए एक कस्टम घटक।                                           |
-| `renderMarkdown`      | `Function`  | `null`   | डिफ़ॉल्ट मार्कडाउन कंपाइलर को पूरी तरह से बदलने के लिए एक कस्टम रेंडरिंग फ़ंक्शन।               |
+  </Tab>
+</Tabs>