Yazar:

Oluşturma:2026-01-20Son güncelleme:2026-03-24

Bu dokümanı favori AI asistanınıza referans verinChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Sorunuzu sorun ve bu sayfaya ve seçtiğiniz AI sağlayıcısına referans vererek belgenin bir özetini alın

Sürüm Geçmişi

"Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
v8.5.024.03.2026
"İçeri aktarmalar {{framework}}-intlayer'dan {{framework}}-intlayer/html'e taşındı"
v8.5.024.03.2026
"HTMLRenderer / useHTMLRenderer / renderHTML yardımcı araçları eklendi"
v8.0.022.01.2026
"HTML ayrıştırma desteği eklendi"
v8.0.020.01.2026

Bu sayfanın içeriği bir yapay zeka kullanılarak çevrildi.

Orijinal içeriğin İngilizce son sürümünü görüntüleyin

Bu dokümanı düzenle

Bu dokümantasyonu geliştirmek için bir fikriniz varsa, lütfen GitHub'da bir çekme isteği göndererek katkıda bulunmaktan çekinmeyin.

Dokümantasyon için GitHub bağlantısı

Kopyala

Belge Markdown'ını panoya kopyala

HTML İçeriği / Intlayer içinde HTML

Name: Intlayer
Author: Intlayer

Intlayer, sözlükleriniz içinde zengin, yapılandırılmış içerik gömmenize olanak tanıyan HTML içeriğini destekler. Bu içerik, standart HTML etiketleriyle render edilebilir veya çalışma zamanında özel bileşenlerle değiştirilebilir.

HTML İçeriğini Tanımlama

HTML içeriğini html fonksiyonunu kullanarak veya basitçe bir string olarak tanımlayabilirsiniz.

HTML içeriğini açıkça bildirmek için html fonksiyonunu kullanın. Bu, otomatik algılama devre dışı olsa bile standart etiketlerin doğru şekilde eşlenmesini sağlar.

htmlDictionary.content.ts

Kodu kopyala

Kodu panoya kopyala

import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // yapılandırma dosyasında ayarlanabilir  content: {    myHtmlContent:  html("<p>Merhaba <strong>Dünya</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;

Dize yaygın HTML etiketleri içeriyorsa (ör. <p>, <div>, <strong> vb.), Intlayer bunu otomatik olarak dönüştürür.

htmlDictionary.content.ts

Kodu kopyala

Kodu panoya kopyala

export default {  key: "app",  contentAutoTransformation: true, // yapılandırma dosyasında ayarlanabilir  content: {    myHtmlContent:  "<p>Merhaba <strong>Dünya</strong></p>",  },};

HTML içeriğini dosyalardan içe aktarın. file() fonksiyonunun şu anda bir string döndürdüğünü ve eğer etiketler içeriyorsa bunun HTML olarak otomatik algılanacağını unutmayın.

htmlDictionary.content.ts

Kodu kopyala

Kodu panoya kopyala

import { html, file, t } from "intlayer";export default {  key: "app",  content: {    content: t({      en: html(file("./content.en.html")),      fr: html(file("./content.fr.html")),      tr: html(file("./content.tr.html")),    }),  },};

`html()` Düğümü

html() fonksiyonu, Intlayer v8'de sözlüklerinizde HTML içeriğini açıkça tanımlamanıza olanak tanıyan yeni bir özelliktir. Intlayer genellikle HTML içeriğini otomatik olarak algılayabilse de, html() fonksiyonunu kullanmak birkaç avantaj sağlar:

Tür Güvenliği: html() fonksiyonu, özel bileşenler için beklenen propları tanımlamanıza olanak tanıyarak editörünüzde daha iyi otomatik tamamlama ve tür denetimi sağlar.
Açık Bildirim: Otomatik algılamayı tetikleyecek standart HTML etiketleri içermese bile bir dizenin her zaman HTML olarak değerlendirilmesini sağlar.
Özel Bileşen Tanımlama: Özel bileşenleri ve beklenen prop türlerini tanımlamak için html() fonksiyonuna ikinci bir argüman geçirebilirsiniz.

typescript

Kodu kopyala

Kodu panoya kopyala

import { html } from "intlayer";const myContent = html(  "<MyCustomComponent title='Merhaba'>Dünya</MyCustomComponent>",  {    MyCustomComponent: {      title: "string",      children: "node",    },  });

Bir HTML düğümü üzerinde .use() yöntemini kullanırken, sağladığınız bileşenler html() fonksiyonunda sağlanan tanıma (varsa) göre kontrol edilecektir.

HTML'i Render Etme

Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya özel araçlar kullanılarak manuel olarak yapılabilir.

Otomatik Renderleme ( `useIntlayer` kullanarak)

useIntlayer aracılığıyla içeriğe eriştiğinizde, HTML düğümleri render için zaten hazırlanmıştır.

HTML düğümleri doğrudan JSX olarak render edilebilir. Standart etiketler otomatik olarak çalışır.

App.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

Özelleştirilmiş bileşen sağlamak veya etiketleri geçersiz kılmak için .use() metodunu kullanın:

tsx

Kodu kopyala

Kodu panoya kopyala

{myHtmlContent.use({  p: (props) => <p className="prose" {...props} />,  CustomLink: ({ children }) => <a href="/details">{children}</a>,})}

Vue'de, HTML içeriği component yerleşik bileşeni kullanılarak render edilebilir.

App.vue

Kodu kopyala

Kodu panoya kopyala

<script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template>  <component :is="myHtmlContent" /></template>

Override'lar için .use() kullanın:

vue

Kodu kopyala

Kodu panoya kopyala

<component :is="myHtmlContent.use({ h1: 'h2' })" />

Svelte, HTML düğümlerini string olarak render eder. Bunu render etmek için {@html} kullanın.

svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("app");</script>{@html $content.myHtmlContent}

Preact, HTML düğümlerini JSX içinde doğrudan destekler.

App.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "preact-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

Solid, HTML düğümlerini JSX içinde doğrudan destekler.

App.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "solid-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

Angular, HTML içeriğini oluşturmak için [innerHTML] direktifini kullanır.

app.component.ts

Kodu kopyala

Kodu panoya kopyala

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");}

Özelleştirilmiş bileşen sağlamak veya etiketleri geçersiz kılmak için .use() metodunu kullanın:

typescript

Kodu kopyala

Kodu panoya kopyala

content().myHtmlContent.use({  p: { class: "prose" },  CustomLink: { href: "/details" },})

`HTMLProvider` ile Genel Yapılandırma

HTML render'lamasını tüm uygulamanız için global olarak yapılandırabilirsiniz. Bu, tüm HTML içeriğinde kullanılabilir olması gereken özel bileşenleri tanımlamak için idealdir.

AppProvider.tsx

Kodu kopyala

Kodu panoya kopyala

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>);

Kendi HTML oluşturucunuzu da kullanabilirsiniz:

AppProvider.tsx

Kodu kopyala

Kodu panoya kopyala

import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    renderHTML={async (html) => {      const { renderHTML } = await import('react-intlayer/html');      return renderHTML(html);    }}  >    {children}  </HTMLProvider>);

HTML oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın iyi bir yoludur.

main.ts

Kodu kopyala

Kodu panoya kopyala

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");

Kendi HTML oluşturucunuzu da kullanabilirsiniz:

main.ts

Kodu kopyala

Kodu panoya kopyala

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, {  renderHTML: async (html) => {    const { renderHTML } = await import('vue-intlayer/html');    return renderHTML(html);  },});app.mount("#app");

HTML oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın iyi bir yoludur.

App.svelte

Kodu kopyala

Kodu panoya kopyala

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider>

AppProvider.tsx

Kodu kopyala

Kodu panoya kopyala

 import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {children}   </HTMLProvider> );

Kendi HTML oluşturucunuzu da kullanabilirsiniz:

AppProvider.tsx

Kodu kopyala

Kodu panoya kopyala

 import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('preact-intlayer/html');       return renderHTML(html);     }}   >     {children}   </HTMLProvider> );

> HTML oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın iyi bir yoludur.

AppProvider.tsx

Kodu kopyala

Kodu panoya kopyala

 import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {props.children}   </HTMLProvider> );

Kendi HTML oluşturucunuzu da kullanabilirsiniz:

AppProvider.tsx

Kodu kopyala

Kodu panoya kopyala

 import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('solid-intlayer/html');       return renderHTML(html);     }}   >     {props.children}   </HTMLProvider> );

> HTML oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın iyi bir yoludur.

app.config.ts

Kodu kopyala

Kodu panoya kopyala

import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      components: {        p: { class: "prose" },        CustomLink: { href: "/details" },      },    }),  ],};

Kendi HTML oluşturucunuzu da kullanabilirsiniz:

app.config.ts

Kodu kopyala

Kodu panoya kopyala

import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      renderHTML: async (html) => {        const { renderHTML } = await import('angular-intlayer/html');        return renderHTML(html);      },    }),  ],};

HTML oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın iyi bir yoludur.

Manuel Renderlama ve Gelişmiş Araçlar

Ham HTML string'lerini render etmeniz gerekiyorsa veya bileşen eşlemesinde daha fazla kontrole ihtiyacınız varsa, aşağıdaki araçları kullanın.

`<HTMLRenderer />` Bileşeni

tsx

Kodu kopyala

Kodu panoya kopyala

import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}>  {"<p>Merhaba Dünya</p>"}</HTMLRenderer>

`useHTMLRenderer()` Hook

Ön yapılandırılmış bir renderer fonksiyonu alın.

tsx

Kodu kopyala

Kodu panoya kopyala

import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({  components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>Merhaba <strong>Dünya</strong></p>");

`renderHTML()` Yardımcı Aracı

Bileşenlerin dışında render yapmak için bağımsız yardımcı araç.

tsx

Kodu kopyala

Kodu panoya kopyala

import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Merhaba</p>", { components: { p: 'div' } });

####

<HTMLRenderer /> Bileşeni

vue

Kodu kopyala

Kodu panoya kopyala

 <script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template>   <HTMLRenderer content="<p>Merhaba Dünya</p>" /> </template>

`<HTMLRenderer />` Bileşeni

svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">import { HTMLRenderer } from "svelte-intlayer/html";</script><HTMLRenderer value="<p>Merhaba Dünya</p>" />

`useHTMLRenderer()` Hook

svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">import { useHTMLRenderer } from "svelte-intlayer/html";const render = useHTMLRenderer();</script>{@html render("<p>Merhaba Dünya</p>")}

`renderHTML()` Yardımcı Aracı

svelte

Kodu kopyala

Kodu panoya kopyala

<script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Merhaba Dünya</p>")}

####

<HTMLRenderer /> Bileşeni

tsx

Kodu kopyala

Kodu panoya kopyala

 import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer>   {"<p>Merhaba Dünya</p>"} </HTMLRenderer>

####

useHTMLRenderer() Hook

tsx

Kodu kopyala

Kodu panoya kopyala

 import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Merhaba Dünya</p>")}</div>;

####

renderHTML() Yardımcı Aracı

tsx

Kodu kopyala

Kodu panoya kopyala

 import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>Merhaba Dünya</p>")}</div>;

####

<HTMLRenderer /> Bileşeni

tsx

Kodu kopyala

Kodu panoya kopyala

 import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer>   {"<p>Merhaba Dünya</p>"} </HTMLRenderer>

####

useHTMLRenderer() Hook

tsx

Kodu kopyala

Kodu panoya kopyala

 import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Merhaba Dünya</p>")}</div>;

####

renderHTML() Yardımcı Aracı

tsx

Kodu kopyala

Kodu panoya kopyala

 import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>Merhaba Dünya</p>")}</div>;

`IntlayerHTMLService` Servisi

Servisi kullanarak bir HTML dizesini oluşturun.

typescript

Kodu kopyala

Kodu panoya kopyala

import { IntlayerHTMLService } from "angular-intlayer/html";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderHTML(html);  }}

Seçenekler Referansı

Bu seçenekler HTMLProvider, HTMLRenderer, useHTMLRenderer ve renderHTML'e iletilebilir.

Tüm tablo içeriğini göster

Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın

Seçenek	Tür	Varsayılan	Açıklama
`components`	`Record<string, any>`	`{}`	HTML etiketlerini veya özel bileşen isimlerini bileşenlere eşleyen bir harita.
`renderHTML`	`Function`	`null`	Varsayılan HTML ayrıştırıcısını tamamen değiştirmek için özel bir render fonksiyonu (Sadece Vue/Svelte sağlayıcıları için).

Not: React ve Preact için standart HTML etiketleri otomatik olarak sağlanır. Bunları geçersiz kılmak veya özel bileşenler eklemek istiyorsanız yalnızca components prop'unu geçirmeniz yeterlidir.

Markdown Fonksiyon Getirme

Sürüm Geçmişi

HTML İçeriği / Intlayer içinde HTML

HTML İçeriğini Tanımlama

html() Düğümü

HTML'i Render Etme

Otomatik Renderleme ( useIntlayer kullanarak)

HTMLProvider ile Genel Yapılandırma

Manuel Renderlama ve Gelişmiş Araçlar

<HTMLRenderer /> Bileşeni

useHTMLRenderer() Hook

renderHTML() Yardımcı Aracı

Seçenekler Referansı

`html()` Düğümü

Otomatik Renderleme ( `useIntlayer` kullanarak)

`HTMLProvider` ile Genel Yapılandırma

`<HTMLRenderer />` Bileşeni

`useHTMLRenderer()` Hook

`renderHTML()` Yardımcı Aracı