Name: Intlayer
Author: Intlayer

\n\n \n ```\n\n استخدم `.use()` للتجاوز:\n ```vue\n \n ```\n\n \n \n يقوم Svelte بعرض عناصر HTML كسلاسل نصية. استخدم `{@html}` لعرضها.\n\n ```svelte\n \n\n {@html $content.myHtmlContent}\n ```\n\n \n \n يدعم Preact عناصر HTML مباشرةً داخل JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return

{myHtmlContent}

;\n };\n ```\n\n \n \n يدعم Solid عناصر HTML مباشرةً داخل JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return

{myHtmlContent}

;\n };\n ```\n\n \n \n يستخدم Angular توجيه `[innerHTML]` لعرض محتوى HTML.\n\n ```typescript fileName=\"app.component.ts\"\n import { Component } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-root\",\n template: `

`,\n })\n export class AppComponent {\n content = useIntlayer(\"app\");\n }\n ```\n\n استخدم الأسلوب `.use()` لتوفير مكونات مخصصة أو لتجاوز الوسوم:\n\n ```typescript\n content().myHtmlContent.use({\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n })\n ```\n\n \n\n\n## التكوين العام باستخدام `HTMLProvider`\n\nيمكنك تكوين عرض HTML على مستوى التطبيق بأكمله. هذا مناسب لتعريف مكونات مخصصة يجب أن تكون متاحة في جميع محتويات HTML.\n\n\n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n

,\n CustomLink: ({ children }) => {children},\n }}\n >\n {children}\n \n );\n ```\n\n \n \n \n ```typescript fileName=\"main.ts\"\n import { createApp, h } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerHTML } from \"vue-intlayer/html\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerHTML, {\n components: {\n p: (props, { slots }) => h(\"p\", { class: \"prose\", ...props }, slots.default?.()),\n CustomLink: (props, { slots }) => h(\"a\", { href: \"/details\", ...props }, slots.default?.()),\n },\n });\n\n app.mount(\"#app\");\n ```\n\n \n \n \n ```svelte fileName=\"App.svelte\"\n \n\n \n \n \n ```\n\n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n

,\n }}\n >\n {children}\n \n );\n ```\n\n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n

,\n }}\n >\n {props.children}\n \n );\n ```\n\n \n \n\n ```typescript fileName=\"app.config.ts\"\n import { createIntlayerHTMLProvider } from \"angular-intlayer/html\";\n\n export const appConfig: ApplicationConfig = {\n providers: [\n createIntlayerHTMLProvider({\n components: {\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n },\n }),\n ],\n };\n ```\n\n \n\n\n---\n\n### التصيير اليدوي والأدوات المتقدمة\n\nإذا كنت بحاجة إلى عرض سلاسل HTML خام أو التحكم بشكل أكبر في تعيين المكونات، فاستخدم الأدوات التالية.\n\n\n \n #### المكوّن ``\n عرض سلسلة HTML باستخدام مكونات محددة.\n\n ```tsx\n import { HTMLRenderer } from \"react-intlayer/html\";\n\n \n {\"

Hello World

\"}\n \n ```\n\n #### Hook `useHTMLRenderer()`\n\n احصل على دالة renderer مهيأة مسبقًا.\n\n ```tsx\n import { useHTMLRenderer } from \"react-intlayer/html\";\n\n const renderHTML = useHTMLRenderer({\n components: { strong: (props) => }\n });\n\n return renderHTML(\"
مرحبًا العالم
\");\n ```\n\n #### أداة `renderHTML()`\n\n أداة مستقلة للـ rendering خارج المكونات.\n\n ```tsx\n import { renderHTML } from \"react-intlayer/html\";\n\n const jsx = renderHTML(\"
مرحبًا
\", { components: { p: 'div' } });\n ```\n\n \n \n \n #### مكوّن ``\n \n ```vue\n \n\n \n ```\n\n \n \n \n #### المكوّن ``\n \n ```svelte\n \n\n مرحبًا بالعالم
\" />\n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```svelte\n \n\n {@html render(\"
مرحبًا بالعالم
\")}\n ```\n\n #### أداة `renderHTML()`\n\n ```svelte\n \n\n {@html renderHTML(\"
مرحبًا بالعالم
\")}\n ```\n\n \n \n \n #### مكوّن ``\n \n ```tsx\n import { HTMLRenderer } from \"preact-intlayer/html\";\n\n \n {\"
مرحبًا بالعالم
\"}\n \n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"preact-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return
{render(\"
مرحبًا بالعالم
\")}
;\n ```\n\n #### أداة `renderHTML()`\n\n ```tsx\n import { renderHTML } from \"preact-intlayer/html\";\n\n return
{renderHTML(\"
مرحبًا بالعالم
\")}
;\n ```\n\n \n \n \n #### مكوّن ``\n \n ```tsx\n import { HTMLRenderer } from \"solid-intlayer/html\";\n\n \n {\"
مرحبًا بالعالم
\"}\n \n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"solid-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return
{render(\"
مرحبًا بالعالم
\")}
;\n ```\n\n #### أداة `renderHTML()`\n\n ```tsx\n import { renderHTML } from \"solid-intlayer/html\";\n\n return
{renderHTML(\"
مرحبًا بالعالم
\")}
;\n ```\n\n \n \n #### خدمة `IntlayerHTMLService`\n عرض سلسلة HTML باستخدام الخدمة.\n\n ```typescript\n import { IntlayerHTMLService } from \"angular-intlayer/html\";\n\n export class MyComponent {\n constructor(private markdownService: IntlayerHTMLService) {}\n\n renderHTML(html: string) {\n return this.markdownService.renderMarkdown(html);\n }\n }\n ```\n\n \n\n\n---\n\n## مرجع الخيارات\n\nيمكن تمرير هذه الخيارات إلى `HTMLProvider` و`HTMLRenderer` و`useHTMLRenderer` و`renderHTML`.\n\n| الخيار | النوع | الافتراضي | الوصف |\n| :----------- | :-------------------- | :-------- | :---------------------------------------------------------------------------- |\n| `components` | `Record` | `{}` | خريطة تربط علامات HTML أو أسماء المكونات المخصصة بالمكونات. |\n| `renderHTML` | `Function` | `null` | دالة عرض مخصصة لاستبدال محلل HTML الافتراضي بالكامل (لمزودات Vue/Svelte فقط). |\n\n> ملاحظة: بالنسبة لـ React و Preact، يتم توفير علامات HTML القياسية تلقائيًا. تحتاج فقط إلى تمرير الخاصية `components` إذا أردت تجاوزها أو إضافة مكونات مخصصة.\n","about":"تعلّم كيفية إعلان واستخدام محتوى HTML مع مكونات مخصصة في Intlayer. اتبع هذه الوثائق لتضمين محتوى غني يشبه HTML مع استبدال المكونات ديناميكيًا في مشروعك متعدد اللغات.","url":"https://intlayer.org/ar/doc/concept/content/html","datePublished":"20-01-2026","dateModified":"22-01-2026","keywords":"HTML, مكونات مخصصة, محتوى غني, Intlayer, Next.js, JavaScript, React, Vue, Svelte","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"المطورون ومديرو المحتوى"}}
إنشاء:2026-01-20آخر تحديث:2026-01-22
استخدم هذه الصفحة والموفر AI الذي تريده
ChatGPT
Claude
DeepSeek
Google AI mode Gemini
Perplexity Mistral
Grok
استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده
هذه الوثيقة غير محدثة، تم تحديث النسخة الأساسية في 24 مارس 2026.
الانتقال إلى الوثيقة الإنجليزية
تاريخ الإصدارات
"Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
v8.5.024‏/3‏/2026
"move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/html`"
v8.5.024‏/3‏/2026
"إضافة HTMLRenderer / useHTMLRenderer / renderHTML كأداة"
v8.0.022‏/1‏/2026
"إضافة دعم تحليل HTML"
v8.0.020‏/1‏/2026
تمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.
اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزية
تعديل هذه الوثيقة
إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للتوثيق
نسخ
نسخ الـ Markdown من المستند إلى الحافظة
محتوى HTML / HTML في Intlayer
يدعم Intlayer محتوى HTML، مما يتيح لك تضمين محتوى غني ومنظم داخل القواميس (dictionaries) الخاصة بك. يمكن عرض هذا المحتوى باستخدام وسوم HTML القياسية أو استبداله بمكونات مخصصة أثناء وقت التشغيل.

إعلان محتوى HTML
يمكنك تعريف محتوى HTML باستخدام الدالة html أو ببساطة كسلسلة نصية.

استخدم الدالة html لتعريف محتوى HTML صراحة. هذا يضمن مطابقة الوسوم القياسية بشكل صحيح حتى إذا تم تعطيل الكشف التلقائي.

htmlDictionary.content.ts
نسخ الكود
نسخ الكود إلى الحافظة
import { html, type Dictionary } from "intlayer";const htmlDictionary = { key: "app", contentAutoTransformation: true, // يمكن تعيينه في ملف التكوين content: { myHtmlContent: html("<p>مرحبًا <strong>بالعالم</strong></p>"), },} satisfies Dictionary;export default htmlDictionary;
import { html, type Dictionary } from "intlayer";const htmlDictionary = { key: "app", contentAutoTransformation: true, // يمكن تعيينه في ملف التكوين content: { myHtmlContent: html("<p>مرحبًا <strong>بالعالم</strong></p>"), },} satisfies Dictionary;export default htmlDictionary;

إذا كانت السلسلة تحتوي على علامات HTML الشائعة (مثل <p>, <div>, <strong>، إلخ)، فسيقوم Intlayer بتحويلها تلقائيًا.

htmlDictionary.content.ts
نسخ الكود
نسخ الكود إلى الحافظة
export default { key: "app", contentAutoTransformation: true, // يمكن تعيينه في ملف التكوين content: { myHtmlContent: "<p>مرحبًا <strong>بالعالم</strong></p>", },};
export default { key: "app", contentAutoTransformation: true, // يمكن تعيينه في ملف التكوين content: { myHtmlContent: "<p>مرحبًا <strong>بالعالم</strong></p>", },};

استورد محتوى HTML من ملفات. لاحظ أن دالة file() حاليًا تُعيد سلسلة نصية، وسيتم اكتشافها تلقائيًا كمحتوى HTML إذا كانت تحتوي على علامات.

htmlDictionary.content.ts
نسخ الكود
نسخ الكود إلى الحافظة
import { html, file, t } from "intlayer";export default { key: "app", content: { content: t({ ar: html(file("./content.ar.html")), en: html(file("./content.en.html")), fr: html(file("./content.fr.html")), }), },};
import { html, file, t } from "intlayer";export default { key: "app", content: { content: t({ ar: html(file("./content.ar.html")), en: html(file("./content.en.html")), fr: html(file("./content.fr.html")), }), },};

عقدة html()
دالة html() هي ميزة جديدة في Intlayer v8 تتيح لك تحديد محتوى HTML بشكل صريح في قواميسك. بينما يمكن لـ Intlayer غالبًا اكتشاف محتوى HTML تلقائيًا، فإن استخدام دالة html() يوفر عدة مزايا:

سلامة النوع (Type Safety): تتيح لك دالة html() تحديد الخصائص (props) المتوقعة للمكونات المخصصة، مما يوفر إكمالاً تلقائيًا وفحصًا أفضل للنوع في المحرر الخاص بك.
الإعلان الصريح: يضمن معاملة السلسلة دائمًا على أنها HTML، حتى لو لم تكن تحتوي على علامات HTML قياسية من شأنها تشغيل الاكتشاف التلقائي.
تعريف المكونات المخصصة: يمكنك تمرير وسيط ثانٍ إلى html() لتعريف المكونات المخصصة وأنواع الخصائص المتوقعة لها.
typescript
نسخ الكود
نسخ الكود إلى الحافظة
import { html } from "intlayer";const myContent = html( "<MyCustomComponent title='مرحباً'>العالم</MyCustomComponent>", { MyCustomComponent: { title: "string", children: "node", }, });
import { html } from "intlayer";const myContent = html( "<MyCustomComponent title='مرحباً'>العالم</MyCustomComponent>", { MyCustomComponent: { title: "string", children: "node", }, });

عند استخدام طريقة .use() على عقدة HTML، سيتم التحقق من المكونات التي تقدمها مقابل التعريف المقدم في دالة html() (إذا كان متاحًا).

عرض HTML
يمكن معالجة العرض تلقائيًا بواسطة نظام محتوى Intlayer أو يدويًا باستخدام أدوات متخصصة.

العرض التلقائي (باستخدام useIntlayer)
عند الوصول إلى المحتوى عبر useIntlayer، تكون عقد HTML جاهزة بالفعل للعرض.

يمكن عرض عقد HTML مباشرةً كـ JSX. تعمل الوسوم القياسية تلقائيًا.

App.tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { useIntlayer } from "react-intlayer";const AppContent = () => { const { myHtmlContent } = useIntlayer("app"); return <div>{myHtmlContent}</div>;};
import { useIntlayer } from "react-intlayer";const AppContent = () => { const { myHtmlContent } = useIntlayer("app"); return <div>{myHtmlContent}</div>;};

استخدم الأسلوب .use() لتوفير مكونات مخصصة أو لتجاوز الوسوم:

tsx
نسخ الكود
نسخ الكود إلى الحافظة
{myHtmlContent.use({ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>,})}
{myHtmlContent.use({ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>,})}

في Vue، يمكن عرض محتوى HTML باستخدام العنصر المدمج component.

App.vue
نسخ الكود
نسخ الكود إلى الحافظة
<script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template> <component :is="myHtmlContent" /></template>
<script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template> <component :is="myHtmlContent" /></template>

استخدم .use() للتجاوز:
vue
نسخ الكود
نسخ الكود إلى الحافظة
<component :is="myHtmlContent.use({ h1: 'h2' })" />
<component :is="myHtmlContent.use({ h1: 'h2' })" />

يقوم Svelte بعرض عناصر HTML كسلاسل نصية. استخدم {@html} لعرضها.

svelte
نسخ الكود
نسخ الكود إلى الحافظة
<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("app");</script>{@html $content.myHtmlContent}
<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("app");</script>{@html $content.myHtmlContent}

يدعم Preact عناصر HTML مباشرةً داخل JSX.

App.tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { useIntlayer } from "preact-intlayer";const AppContent = () => { const { myHtmlContent } = useIntlayer("app"); return <div>{myHtmlContent}</div>;};
import { useIntlayer } from "preact-intlayer";const AppContent = () => { const { myHtmlContent } = useIntlayer("app"); return <div>{myHtmlContent}</div>;};

يدعم Solid عناصر HTML مباشرةً داخل JSX.

App.tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { useIntlayer } from "solid-intlayer";const AppContent = () => { const { myHtmlContent } = useIntlayer("app"); return <div>{myHtmlContent}</div>;};
import { useIntlayer } from "solid-intlayer";const AppContent = () => { const { myHtmlContent } = useIntlayer("app"); return <div>{myHtmlContent}</div>;};

يستخدم Angular توجيه [innerHTML] لعرض محتوى HTML.

app.component.ts
نسخ الكود
نسخ الكود إلى الحافظة
import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({ selector: "app-root", template: `<div [innerHTML]="content().myHtmlContent"></div>`,})export class AppComponent { content = useIntlayer("app");}
import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({ selector: "app-root", template: `<div [innerHTML]="content().myHtmlContent"></div>`,})export class AppComponent { content = useIntlayer("app");}

استخدم الأسلوب .use() لتوفير مكونات مخصصة أو لتجاوز الوسوم:

typescript
نسخ الكود
نسخ الكود إلى الحافظة
content().myHtmlContent.use({ p: { class: "prose" }, CustomLink: { href: "/details" },})
content().myHtmlContent.use({ p: { class: "prose" }, CustomLink: { href: "/details" },})

التكوين العام باستخدام HTMLProvider
يمكنك تكوين عرض HTML على مستوى التطبيق بأكمله. هذا مناسب لتعريف مكونات مخصصة يجب أن تكون متاحة في جميع محتويات HTML.

AppProvider.tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => ( <HTMLProvider components={{ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>, }} > {children} </HTMLProvider>);
import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => ( <HTMLProvider components={{ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>, }} > {children} </HTMLProvider>);

main.ts
نسخ الكود
نسخ الكود إلى الحافظة
import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, { components: { p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()), CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()), },});app.mount("#app");
import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, { components: { p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()), CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()), },});app.mount("#app");

App.svelte
نسخ الكود
نسخ الكود إلى الحافظة
<script lang="ts"> import { HTMLProvider } from "svelte-intlayer/html"; import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider components={{ p: MyCustomP, }} > <slot /> </HTMLProvider>
<script lang="ts"> import { HTMLProvider } from "svelte-intlayer/html"; import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider components={{ p: MyCustomP, }} > <slot /> </HTMLProvider>

AppProvider.tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => ( <HTMLProvider components={{ p: (props) => <p className="prose" {...props} />, }} > {children} </HTMLProvider> );
import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => ( <HTMLProvider components={{ p: (props) => <p className="prose" {...props} />, }} > {children} </HTMLProvider> );

AppProvider.tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => ( <HTMLProvider components={{ p: (props) => <p className="prose" {...props} />, }} > {props.children} </HTMLProvider> );
import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => ( <HTMLProvider components={{ p: (props) => <p className="prose" {...props} />, }} > {props.children} </HTMLProvider> );

app.config.ts
نسخ الكود
نسخ الكود إلى الحافظة
import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = { providers: [ createIntlayerHTMLProvider({ components: { p: { class: "prose" }, CustomLink: { href: "/details" }, }, }), ],};
import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = { providers: [ createIntlayerHTMLProvider({ components: { p: { class: "prose" }, CustomLink: { href: "/details" }, }, }), ],};

التصيير اليدوي والأدوات المتقدمة
إذا كنت بحاجة إلى عرض سلاسل HTML خام أو التحكم بشكل أكبر في تعيين المكونات، فاستخدم الأدوات التالية.

المكوّن <HTMLRenderer />
عرض سلسلة HTML باستخدام مكونات محددة.

tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}> {"<p>Hello World</p>"}</HTMLRenderer>
import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}> {"<p>Hello World</p>"}</HTMLRenderer>

Hook useHTMLRenderer()
احصل على دالة renderer مهيأة مسبقًا.

tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({ components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>مرحبًا <strong>العالم</strong></p>");
import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({ components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>مرحبًا <strong>العالم</strong></p>");

أداة renderHTML()
أداة مستقلة للـ rendering خارج المكونات.

tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>مرحبًا</p>", { components: { p: 'div' } });
import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>مرحبًا</p>", { components: { p: 'div' } });

#### مكوّن
<HTMLRenderer />

vue
نسخ الكود
نسخ الكود إلى الحافظة
<script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template> <HTMLRenderer content="<p>مرحبًا بالعالم</p>" /> </template>
<script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template> <HTMLRenderer content="<p>مرحبًا بالعالم</p>" /> </template>

المكوّن <HTMLRenderer />
svelte
نسخ الكود
نسخ الكود إلى الحافظة
<script lang="ts">import { HTMLRenderer } from "svelte-intlayer/html";</script><HTMLRenderer value="<p>مرحبًا بالعالم</p>" />
<script lang="ts">import { HTMLRenderer } from "svelte-intlayer/html";</script><HTMLRenderer value="<p>مرحبًا بالعالم</p>" />

Hook useHTMLRenderer()
svelte
نسخ الكود
نسخ الكود إلى الحافظة
<script lang="ts">import { useHTMLRenderer } from "svelte-intlayer/html";const render = useHTMLRenderer();</script>{@html render("<p>مرحبًا بالعالم</p>")}
<script lang="ts">import { useHTMLRenderer } from "svelte-intlayer/html";const render = useHTMLRenderer();</script>{@html render("<p>مرحبًا بالعالم</p>")}

أداة renderHTML()
svelte
نسخ الكود
نسخ الكود إلى الحافظة
<script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>مرحبًا بالعالم</p>")}
<script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>مرحبًا بالعالم</p>")}

#### مكوّن
<HTMLRenderer />

tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer> {"<p>مرحبًا بالعالم</p>"} </HTMLRenderer>
import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer> {"<p>مرحبًا بالعالم</p>"} </HTMLRenderer>
#### Hook
useHTMLRenderer()

tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>مرحبًا بالعالم</p>")}</div>;
import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>مرحبًا بالعالم</p>")}</div>;
#### أداة
renderHTML()

tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>مرحبًا بالعالم</p>")}</div>;
import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>مرحبًا بالعالم</p>")}</div>;

#### مكوّن
<HTMLRenderer />

tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer> {"<p>مرحبًا بالعالم</p>"} </HTMLRenderer>
import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer> {"<p>مرحبًا بالعالم</p>"} </HTMLRenderer>
#### Hook
useHTMLRenderer()

tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>مرحبًا بالعالم</p>")}</div>;
import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>مرحبًا بالعالم</p>")}</div>;
#### أداة
renderHTML()

tsx
نسخ الكود
نسخ الكود إلى الحافظة
import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>مرحبًا بالعالم</p>")}</div>;
import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>مرحبًا بالعالم</p>")}</div>;

خدمة IntlayerHTMLService
عرض سلسلة HTML باستخدام الخدمة.

typescript
نسخ الكود
نسخ الكود إلى الحافظة
import { IntlayerHTMLService } from "angular-intlayer/html";export class MyComponent { constructor(private markdownService: IntlayerHTMLService) {} renderHTML(html: string) { return this.markdownService.renderMarkdown(html); }}
import { IntlayerHTMLService } from "angular-intlayer/html";export class MyComponent { constructor(private markdownService: IntlayerHTMLService) {} renderHTML(html: string) { return this.markdownService.renderMarkdown(html); }}

مرجع الخيارات
يمكن تمرير هذه الخيارات إلى HTMLProvider وHTMLRenderer وuseHTMLRenderer وrenderHTML.

اظهار جميع محتويات الجدول
افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح
الخيار النوع الافتراضي الوصف
components Record<string, any> {} خريطة تربط علامات HTML أو أسماء المكونات المخصصة بالمكونات.
renderHTML Function null دالة عرض مخصصة لاستبدال محلل HTML الافتراضي بالكامل (لمزودات Vue/Svelte فقط).
ملاحظة: بالنسبة لـ React و Preact، يتم توفير علامات HTML القياسية تلقائيًا. تحتاج فقط إلى تمرير الخاصية components إذا أردت تجاوزها أو إضافة مكونات مخصصة.
Markdown
جلب الوظيفة

تاريخ الإصدارات

محتوى HTML / HTML في Intlayer

إعلان محتوى HTML

عقدة `html()`

عرض HTML

العرض التلقائي (باستخدام `useIntlayer`)

التكوين العام باستخدام `HTMLProvider`

التصيير اليدوي والأدوات المتقدمة

المكوّن `<HTMLRenderer />`

Hook `useHTMLRenderer()`

أداة `renderHTML()`

المكوّن `<HTMLRenderer />`

Hook `useHTMLRenderer()`

أداة `renderHTML()`

خدمة `IntlayerHTMLService`

مرجع الخيارات

الخيار	النوع	الافتراضي	الوصف
`components`	`Record<string, any>`	`{}`	خريطة تربط علامات HTML أو أسماء المكونات المخصصة بالمكونات.
`renderHTML`	`Function`	`null`	دالة عرض مخصصة لاستبدال محلل HTML الافتراضي بالكامل (لمزودات Vue/Svelte فقط).

تاريخ الإصدارات

محتوى HTML / HTML في Intlayer

إعلان محتوى HTML

عقدة html()

عرض HTML

العرض التلقائي (باستخدام useIntlayer)

التكوين العام باستخدام HTMLProvider

التصيير اليدوي والأدوات المتقدمة

المكوّن <HTMLRenderer />

Hook useHTMLRenderer()

أداة renderHTML()

مرجع الخيارات

عقدة `html()`

العرض التلقائي (باستخدام `useIntlayer`)

التكوين العام باستخدام `HTMLProvider`

المكوّن `<HTMLRenderer />`

Hook `useHTMLRenderer()`

أداة `renderHTML()`