Yazar:
    Aymeric PINEAU
    Oluşturma:2025-02-07Son güncelleme:2026-05-19

    Markdown / Zengin Metin İçeriği

    Intlayer, Markdown sözdizimi kullanılarak tanımlanan zengin metin içeriğini destekler. Bu, bloglar, makaleler ve daha fazlası gibi zengin biçimlendirilmiş içerikleri kolayca yazmanıza ve sürdürmenize olanak tanır.

    Markdown İçeriğini Bildirme

    Markdown içeriğini md işlevini kullanarak veya basitçe bir dize olarak (Markdown sözdizimi içeriyorsa) bildirebilirsiniz.

    Sürüm 8.10.0'dan itibaren Markdown içeriğini doğrudan .content.md dosyalarında bildirebilirsiniz. Intlayer, Markdown içeriğini otomatik olarak algılar ve ayrıştırır.

    markdown-file.en.content.md
    ---
key: my-markdown-content
description: İçeriğim
locale: en
---

# İçeriğim

İşte bir markdown içerik örneği

    locale ön madde alanı, içeriğin yerel ayarını tanımlayan alandır. İsteğe bağlıdır. Sağlanmazsa, Intlayer varsayılan yerel ayarı kullanacaktır; bu, belirli bir yerel ayar için çeviri mevcut değilse aynı zamanda geri dönüş yerel ayarı olarak da kullanılır.

    Dosya yapısı örneği:

    text
    content
├── markdown-file.en.content.md
├── markdown-file.fr.content.md
└── markdown-file.es.content.md

    Ön maddeye Sözlük Tanımı bölümünde tanımlanan özellikleri ekleyebilirsiniz.

    Markdown içeriğini açıkça bildirmek için md işlevini kullanın. Bu, belirgin bir sözdizimi içermese bile bir dizenin Markdown olarak ele alınmasını sağlamak istiyorsanız kullanışlıdır.

    markdownDictionary.content.ts
    import { md, type Dictionary } from "intlayer";

const markdownDictionary = {
key: "app",
content: {
  myMarkdownContent: md("## Başlığım \n\nLorem Ipsum"),
},
} satisfies Dictionary;

export default markdownDictionary;

    .md dosyalarını doğrudan file işlevini kullanarak içe aktarın.

    markdownDictionary.content.ts
    import { md, file, t } from "intlayer";

export default {
key: "app",
content: {
  content: t({
    en: md(file("./myMarkdown.en.md")),
    tr: md(file("./myMarkdown.tr.md")),
  }),
},
};

    Dize ortak Markdown göstergeleri (başlıklar, listeler, bağlantılar vb.) içeriyorsa, Intlayer bunu otomatik olarak dönüştürecektir.

    markdownDictionary.content.ts
    export default {
key: "app",
contentAutoTransformation: true, // Markdown içeriğinin otomatik algılanmasını etkinleştir - intlayer.config.ts dosyasında global olarak ayarlanabilir
content: {
  myMarkdownContent: "## Başlığım \n\nLorem Ipsum",
},
};

    Markdown'u İşleme (Rendering)

    Intlayer, Markdown'ı işlemek için iki bağımsız yol sağlar:

    1. useIntlayer aracılığıyla — Intlayer, md düğümünü çerçevenin yerel çıktısına (JSX, VNode, HTML dizesi) otomatik olarak dönüştürür.

      • Frontmatter ayrıştırılır ve .metadata olarak sunulur. İşlemeyi iki düzeyde geçersiz kılabilirsiniz — MarkdownProvider (veya çerçeve eşdeğeri) ile global olarak ve .use() ile düğüm başına yerel olarak. Her ikisi de birleştirilebilir; .use(), MarkdownProvider'dan önceliklidir ve o da varsayılandan önceliklidir.

    2. Yardımcı araçlar — <MarkdownRenderer />, useMarkdownRenderer() ve renderMarkdown(), yalnızca ham Markdown dizelerini kabul eden bağımsız araçlardır. useIntlayer'dan bağımsızdırlar ve döndürdüğü süslenmiş düğümlerle çalışmazlar.

    Markdown oluşturma MDX'i destekler — Markdown'ınızın içinde doğrudan adıyla herhangi bir JSX/çerçeve bileşenini kullanın.

    1. Otomatik İşleme (useIntlayer aracılığıyla)

    Markdown düğümleri doğrudan JSX olarak işlenebilir.

    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 Bileşeni
  }}
>
  <AppContent />
</MarkdownProvider>
);
    MarkdownProvider mevcut değilse, Intlayer varsayılan Markdown - JSX ayrıştırıcısını kullanarak markdown'ı oluşturacaktır.

    Ayrıca .use() yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:

    tsx
    {myMarkdownContent.use({
h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
})}

    Markdown'ı bir dize olarak alabilirsiniz:

    tsx
    {myMarkdownContent.value}
{String(myMarkdownContent)}
{myMarkdownContent.toString()}

    Ve markdown meta verilerinize şu şekilde erişebilirsiniz:

    tsx
    {myMarkdownContent.metadata}
{myMarkdownContent.metadata.title}

    Markdown düğümleri doğrudan JSX olarak işlenebilir.

    App.tsx
    import { useIntlayer } from "next-intlayer";
import { MarkdownProvider } from "next-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 Bileşeni
  }}
>
  <AppContent />
</MarkdownProvider>
);
    MarkdownProvider mevcut değilse, Intlayer varsayılan Markdown - JSX ayrıştırıcısını kullanarak markdown'ı oluşturacaktır.

    Ayrıca .use() yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:

    tsx
    {myMarkdownContent.use({
h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
})}

    Markdown'ı bir dize olarak alabilirsiniz:

    tsx
    {myMarkdownContent.value}
{String(myMarkdownContent)}
{myMarkdownContent.toString()}

    Ve markdown meta verilerinize şu şekilde erişebilirsiniz:

    tsx
    {myMarkdownContent.metadata}
{myMarkdownContent.metadata.title}

    Vue'da, Markdown içeriği yerleşik component etiketi kullanılarak veya doğrudan bir düğüm olarak oluşturulabilir.

    App.vue
    <script setup>
import { useIntlayer } from "vue-intlayer";
const { myMarkdownContent } = useIntlayer("app");
</script>

<template>
<component :is="myMarkdownContent" />
</template>

    intlayerMarkdown eklentisi aracılığıyla global olarak yapılandırın (MDX özel bileşenlerini destekler):

    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 Bileşeni
},
});
    intlayerMarkdown eklentisi yüklü değilse, Intlayer varsayılan derleyiciyi kullanarak oluşturacaktır.

    Ayrıca .use() yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:

    vue
    <component :is="myMarkdownContent.use({
h1: (props) => h('h1', { style: { color: 'red' } }, props.children),
})" />

    Markdown'ı bir dize olarak alabilirsiniz:

    vue
    {{ myMarkdownContent.value }}
{{ String(myMarkdownContent) }}
{{ myMarkdownContent.toString() }}

    Ve markdown meta verilerinize şu şekilde erişebilirsiniz:

    vue
    <component :is="myMarkdownContent.metadata" />
<component :is="myMarkdownContent.metadata.title" />

    Svelte, Markdown'ı varsayılan olarak bir HTML dizesi olarak oluşturur. Oluşturmak için {@html} kullanın.

    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>

<MarkdownProvider components={{ h1: MyHeading }}>
{@html $content.myMarkdownContent}
</MarkdownProvider>
    MarkdownProvider mevcut değilse, Intlayer varsayılan derleyiciyi kullanarak markdown'ı oluşturacaktır.

    Ayrıca .use() yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:

    svelte
    {@html $content.myMarkdownContent.use({ ... })}

    Markdown'ı bir dize olarak alabilirsiniz:

    svelte
    {$content.myMarkdownContent.value}
{String($content.myMarkdownContent)}
{$content.myMarkdownContent.toString()}

    Ve markdown meta verilerinize şu şekilde erişebilirsiniz:

    svelte
    {$content.myMarkdownContent.metadata}
{$content.myMarkdownContent.metadata.title}

    Preact, JSX'teki Markdown düğümlerini doğrudan destekler.

    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 Bileşeni
  }}
>
  <AppContent />
</MarkdownProvider>
);
    MarkdownProvider mevcut değilse, Intlayer varsayılan Markdown - JSX ayrıştırıcısını kullanarak markdown'ı oluşturacaktır.

    Ayrıca .use() yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:

    tsx
    {myMarkdownContent.use({
h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
})}

    Markdown'ı bir dize olarak alabilirsiniz:

    tsx
    {myMarkdownContent.value}
{String(myMarkdownContent)}
{myMarkdownContent.toString()}

    Ve markdown meta verilerinize şu şekilde erişebilirsiniz:

    tsx
    {myMarkdownContent.metadata}
{myMarkdownContent.metadata.title}

    Solid, JSX'teki Markdown düğümlerini doğrudan destekler.

    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 Bileşeni
  }}
>
  <AppContent />
</MarkdownProvider>
);
    MarkdownProvider mevcut değilse, Intlayer varsayılan Markdown - JSX ayrıştırıcısını kullanarak markdown'ı oluşturacaktır.

    Ayrıca .use() yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:

    tsx
    {myMarkdownContent.use({
h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,
})}

    Markdown'ı bir dize olarak alabilirsiniz:

    tsx
    {myMarkdownContent.value}
{String(myMarkdownContent)}
{myMarkdownContent.toString()}

    Ve markdown meta verilerinize şu şekilde erişebilirsiniz:

    tsx
    {myMarkdownContent.metadata}
{myMarkdownContent.metadata.title}

    Angular, Markdown içeriğini oluşturmak için [innerHTML] yönergesini kullanır.

    app.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
selector: "app-root",
template: `<div [innerHTML]="content().myMarkdownContent"></div>`,
})
export class AppComponent {
content = useIntlayer("app");
}
    IntlayerMarkdown sağlayıcısı yapılandırılmamışsa, Intlayer varsayılan derleyiciyi kullanarak oluşturacaktır.

    Ayrıca .use() yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:

    typescript
    content().myMarkdownContent.use({
h1: { class: "text-3xl font-bold" },
})

    Markdown'ı bir dize olarak alabilirsiniz:

    typescript
    content().myMarkdownContent.value
String(content().myMarkdownContent)
content().myMarkdownContent.toString()

    Ve markdown meta verilerinize şu şekilde erişebilirsiniz:

    typescript
    content().myMarkdownContent.metadata
content().myMarkdownContent.metadata.title

    2. Yardımcı Araçlar (Yalnızca Markdown Dizeleri)

    Bu yardımcı programlar yalnızca ham Markdown dizelerini oluşturur ve useIntlayer'dan bağımsızdır. Markdown'ı sözlükleriniz dışındaki kaynaklardan oluşturmanız gerektiğinde bunları kullanın.

    <MarkdownRenderer /> Bileşeni

    Belirli seçeneklerle bir Markdown dizesini oluşturur.

    tsx
    import { MarkdownRenderer } from "react-intlayer/markdown";

<MarkdownRenderer forceBlock={true} tagfilter={true}>
{"# Başlığım"}
</MarkdownRenderer>

    useMarkdownRenderer() Kancası

    Önceden yapılandırılmış bir oluşturucu işlevi alın.

    tsx
    import { useMarkdownRenderer } from "react-intlayer/markdown";

const renderMarkdown = useMarkdownRenderer({
forceBlock: true,
components: { h1: (props) => <h1 {...props} className="custom" /> }
});

return renderMarkdown("# Başlığım");

    renderMarkdown() Yardımcı Programı

    Bileşenler dışında oluşturmak için bağımsız yardımcı program.

    tsx
    import { renderMarkdown } from "react-intlayer/markdown";

const jsx = renderMarkdown("# Başlığım", { forceBlock: true });

    <MarkdownRenderer /> Bileşeni

    Belirli seçeneklerle bir Markdown dizesini oluşturur.

    tsx
    import { MarkdownRenderer } from "next-intlayer/markdown";

<MarkdownRenderer forceBlock={true} tagfilter={true}>
{"# Başlığım"}
</MarkdownRenderer>

    useMarkdownRenderer() Kancası

    Önceden yapılandırılmış bir oluşturucu işlevi alın.

    tsx
    import { useMarkdownRenderer } from "next-intlayer/markdown";

const renderMarkdown = useMarkdownRenderer({
forceBlock: true,
components: { h1: (props) => <h1 {...props} className="custom" /> }
});

return renderMarkdown("# Başlığım");

    renderMarkdown() Yardımcı Programı

    Bileşenler dışında oluşturmak için bağımsız yardımcı program.

    tsx
    import { renderMarkdown } from "next-intlayer/markdown";

const jsx = renderMarkdown("# Başlığım", { forceBlock: true });

    <MarkdownRenderer /> Bileşeni

    vue
    <script setup>
import { MarkdownRenderer } from "vue-intlayer/markdown";
</script>

<template>
<MarkdownRenderer :forceBlock="true" content="# Başlığım" />
</template>

    <MarkdownRenderer /> Bileşeni

    svelte
    <script lang="ts">
import { MarkdownRenderer } from "svelte-intlayer/markdown";
</script>

<MarkdownRenderer forceBlock={true} value="# Başlığım" />

    useMarkdownRenderer() Kancası

    svelte
    <script lang="ts">
import { useMarkdownRenderer } from "svelte-intlayer/markdown";
const render = useMarkdownRenderer();
</script>

{@html render("# Başlığım")}

    renderMarkdown() Yardımcı Programı

    svelte
    <script lang="ts">
import { renderMarkdown } from "svelte-intlayer/markdown";
</script>

{@html renderMarkdown("# Başlığım")}

    <MarkdownRenderer /> Bileşeni

    tsx
    import { MarkdownRenderer } from "preact-intlayer/markdown";

<MarkdownRenderer forceBlock={true}>
{"# Başlığım"}
</MarkdownRenderer>

    useMarkdownRenderer() Kancası

    tsx
    import { useMarkdownRenderer } from "preact-intlayer/markdown";

const render = useMarkdownRenderer();

return <div>{render("# Başlığım")}</div>;

    renderMarkdown() Yardımcı Programı

    tsx
    import { renderMarkdown } from "preact-intlayer/markdown";

return <div>{renderMarkdown("# Başlığım")}</div>;

    <MarkdownRenderer /> Bileşeni

    tsx
    import { MarkdownRenderer } from "solid-intlayer/markdown";

<MarkdownRenderer forceBlock={true}>
{"# Başlığım"}
</MarkdownRenderer>

    useMarkdownRenderer() Kancası

    tsx
    import { useMarkdownRenderer } from "solid-intlayer/markdown";

const render = useMarkdownRenderer();

return <div>{render("# Başlığım")}</div>;

    renderMarkdown() Yardımcı Programı

    tsx
    import { renderMarkdown } from "solid-intlayer/markdown";

return <div>{renderMarkdown("# Başlığım")}</div>;

    IntlayerMarkdownService Hizmeti

    Hizmeti kullanarak bir Markdown dizesini oluşturur.

    typescript
    import { IntlayerMarkdownService } from "angular-intlayer/markdown";

export class MyComponent {
constructor(private markdownService: IntlayerMarkdownService) {}

renderMarkdown(markdown: string) {
  return this.markdownService.renderMarkdown(markdown);
}
}

    MarkdownProvider ile Global Yapılandırma

    MarkdownProvider (veya çerçeve eşdeğeri), tüm uygulamanız için Markdown oluşturma işlem hattını yapılandırır. Bu hem otomatik useIntlayer oluşturma işlemleri hem de yardımcı araçlar için geçerlidir. Burada ayarlanan seçenekler varsayılanlardır — .use() bunları düğüm düzeyinde geçersiz kılar.

    AppProvider.tsx
    import { MarkdownProvider } from "react-intlayer/markdown";

export const AppProvider = ({ children }) => (
<MarkdownProvider
  components={{
    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 desteklenir — Markdown'ınızın içinde kullanılan herhangi bir bileşen adı (örn. <MyCustomJSXComponent />) components haritasına göre çözümlenir.

    Kendi markdown oluşturucunuzu da kullanabilirsiniz:

    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}
</MarkdownProvider>
);
    Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın harika bir yoludur.
    AppProvider.tsx
    import { MarkdownProvider } from "next-intlayer/markdown";

export const AppProvider = ({ children }) => (
<MarkdownProvider
  components={{
    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 desteklenir — Markdown'ınızın içinde kullanılan herhangi bir bileşen adı (örn. <MyCustomJSXComponent />) components haritasına göre çözümlenir.

    Kendi markdown oluşturucunuzu da kullanabilirsiniz:

    AppProvider.tsx
    import { MarkdownProvider } from "next-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('next-intlayer/markdown');
    return renderMarkdown(md);
  }}
>
  {children}
</MarkdownProvider>
);
    Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın harika bir yoludur.
    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, {
components: {
  h1: (props) =>
  h('h1', { style: { color: 'orange' }, ...props }, props.children),
  ComponentDemo: () => h('div', { style: { background: 'grey' } }, 'DEMO'),
  bold: (props) => h('strong', props),
  code: (props) => h('code', props),
},
});

app.mount("#app");
    MDX desteklenir — Markdown'ınızın içinde kullanılan herhangi bir bileşen adı (örn. <MyCustomJSXComponent />) components haritasına göre çözümlenir.

    Kendi markdown oluşturucunuzu da kullanabilirsiniz:

    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 oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın harika bir yoludur.
    App.svelte
    <script lang="ts">
import { MarkdownProvider } from "svelte-intlayer/markdown";
import MyHeading from "./MyHeading.svelte";
</script>

<MarkdownProvider
components={{
  h1: MyHeading,
}}
>
<slot />
</MarkdownProvider>
    MDX desteklenir — Markdown'ınızın içinde kullanılan herhangi bir bileşen adı (örn. <MyCustomJSXComponent />) components haritasına göre çözümlenir.

    Kendi markdown oluşturucunuzu da kullanabilirsiniz:

    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 oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın harika bir yoludur.
    AppProvider.tsx
    import { MarkdownProvider } from "preact-intlayer/markdown";

export const AppProvider = ({ children }) => (
<MarkdownProvider
  components={{
    h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
  }}
>
  {children}
</MarkdownProvider>
);
    MDX desteklenir — Markdown'ınızın içinde kullanılan herhangi bir bileşen adı (örn. <MyCustomJSXComponent />) components haritasına göre çözümlenir.

    Kendi markdown oluşturucunuzu da kullanabilirsiniz:

    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 oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın harika bir yoludur.
    AppProvider.tsx
    import { MarkdownProvider } from "solid-intlayer/markdown";

export const AppProvider = (props) => (
<MarkdownProvider
  components={{
    h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,
  }}
>
  {props.children}
</MarkdownProvider>
);
    MDX desteklenir — Markdown'ınızın içinde kullanılan herhangi bir bileşen adı (örn. <MyCustomJSXComponent />) components haritasına göre çözümlenir.

    Kendi markdown oluşturucunuzu da kullanabilirsiniz:

    AppProvider.tsx
    import { MarkdownProvider } from "solid-intlayer/markdown";

export const AppProvider = (props) => (
<MarkdownProvider
  renderMarkdown={async (md) => {
    const { renderMarkdown } = await import('solid-intlayer/markdown');
    return renderMarkdown(md);
  }}
>
  {props.children}
</MarkdownProvider>
);
    Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın harika bir yoludur.
    app.config.ts
    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerMarkdownProvider({
    components: {
      h1: { class: "text-2xl font-bold" },
    },
  }),
],
};
    MDX desteklenir — Markdown'ınızın içinde kullanılan herhangi bir bileşen adı (örn. <MyCustomJSXComponent />) components haritasına göre çözümlenir.

    Kendi markdown oluşturucunuzu da kullanabilirsiniz:

    app.config.ts
    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerMarkdownProvider({
    renderMarkdown: async (md) => {
      const { renderMarkdown } = await import('angular-intlayer/markdown');
      return renderMarkdown(md);
    },
  }),
],
};
    Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın bundle boyutunu azaltmanın harika bir yoludur.

    Suspense

    Intlayer Markdown oluşturucu dinamik olarak yüklenir. Optimize edilmiş olmasına rağmen, temel ayrıştırıcı parçası yaklaşık 55 kb'dir. Bunu senkron olarak yüklemek, ilk sayfa oluşturulmasını geciktirir ve First Contentful Paint'i (FCP) bozar.

    UI engellemesini önlemek için, Intlayer React'in Suspense API'si ile entegre olur. Arka planda ayrıştırıcıyı getirir ve indirme sırasında bir Promise fırlatır.

    Intlayer Markdown'ı oluşturan herhangi bir bileşeni bir <Suspense> sınırına sarın. Bu, parça indirilirken yerelleştirilmiş bir geri dönüş durumunu göstererek DOM'nizin geri kalanının anında oluşturulmasına izin verir.

    Uyarı: Bir <Suspense> sınırı sağlamazsanız, React 55 kb'lik parça tam olarak yüklenene kadar kök seviyesinde askıya alınır veya tüm bileşen ağacının oluşturulmasını engeller.

    Next.js App Router'da, istemci bileşenleri için React Suspense'i veya sunucu bileşenleri için bir loading.tsx dosyası kullanabilirsiniz.

    İstemci Bileşeni:

    components/MyComponent.tsx
    "use client";
import { useIntlayer } from "next-intlayer";
import { Suspense } from "react";

const MyComponent = () => {
  const markdownContent = useIntlayer("my-markdown");

  return (
    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
  );
};

    loading.tsx ile Sunucu Bileşeni:

    app/loading.tsx
    export default function Loading() {
  return <div>Loading...</div>;
}
    app/page.tsx
    import { useIntlayer } from "next-intlayer/server";

const MyPage = () => {
  const markdownContent = useIntlayer("my-markdown");
  return <div>{markdownContent}</div>;
};

export default MyPage;
    tsx
    import { useIntlayer } from "react-intlayer";
import { Suspense } from "react";

const MyComponent = () => {
  const markdownContent = useIntlayer("my-markdown");

  return (
    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
  );
};

    Vue, yerleşik bir <Suspense> bileşenine sahiptir. Markdown içeriğini oluşturan bileşeni bir <Suspense> sınırına sarın.

    MyComponent.vue
    <script setup>
import { useIntlayer } from "vue-intlayer";

const { markdownContent } = useIntlayer("my-markdown");
</script>

<template>
  <Suspense>
    <component :is="markdownContent" />
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

    Svelte'nin bir Suspense API eşdeğeri yoktur. Markdown içeriğinin asenkron olarak oluşturulmasını işlemek için bir {#await} bloğu kullanın.

    MyComponent.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("my-markdown");
</script>

{#await $content.markdownContent}
  <div>Loading...</div>
{:then rendered}
  {@html rendered}
{/await}

    Preact, preact/compat aracılığıyla React'in Suspense API'sini destekler.

    MyComponent.tsx
    import { useIntlayer } from "preact-intlayer";
import { Suspense } from "preact/compat";

const MyComponent = () => {
  const markdownContent = useIntlayer("my-markdown");

  return (
    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
  );
};

    Solid, solid-js'den kendi <Suspense> bileşenine sahiptir.

    MyComponent.tsx
    import { useIntlayer } from "solid-intlayer";
import { Suspense } from "solid-js";

const MyComponent = () => {
  const { markdownContent } = useIntlayer("my-markdown");

  return (
    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
  );
};

    Angular'da bir Suspense API'si yoktur. Geç yüklenen Markdown içeriğini işlemek için Angular'ın ertelenebilir görünümlerini (@defer) kullanın (Angular 17+ gerektirir).

    my.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-my",
  template: `
    @defer {
      <div [innerHTML]="content().markdownContent"></div>
    } @loading {
      <div>Loading...</div>
    }
  `,
})
export class MyComponent {
  content = useIntlayer("my-markdown");
}

    Sunucu Tarafı İşleme (SSR) ve Hidrasyon

    Remark / rehype gibi diğer Markdown ayrıştırıcılarıyla karşılaştırıldığında, Intlayer Markdown bağımlılık içermez ve hem istemci hem de sunucu tarafında çalışır.

    Ancak Intlayer, Sunucu Tarafı İşleme (SSR) çerçeveleri (Next.js App Router, React Router, Nuxt, SvelteKit vb. gibi) için ayrıştırmayı optimize etmiştir.

    Ham Markdown dizelerini istemciye göndermek ve tarayıcıda ayrıştırmak (bu da performans kaybına neden olur) yerine, Intlayer, Markdown'u sunucuda bir Soyut Sözdizimi Ağacı (AST) olarak önceden ayrıştırmanıza olanak tanır.

    Serileştirilebilir bir AST (ParsedMarkdown nesnesi) oluşturmak için sunucu tarafında çerçevenizin Intlayer paketindeki parseMarkdown işlevini kullanabilir ve bunu doğrudan ön uca aktarabilirsiniz. Tüm Intlayer işleme yardımcı programları ( <MarkdownRenderer>, useMarkdownRenderer vb. gibi) bu AST nesnesini otomatik olarak kabul eder ve sorunsuz bir şekilde işler.

    Sunucu/İstemci Mimarisinde Örnek

    server.ts
    import { parseMarkdown } from "react-intlayer/markdown";

// 1. Sunucuda: Markdown'u serileştirilebilir bir AST'ye ayrıştırın
export const loader = async () => {
const markdownString = "## My title \n\nLorem Ipsum";
const ast = parseMarkdown(markdownString);

// AST'yi istemciye JSON olarak döndürün
return Response.json({ content: ast });
};
    client.tsx
    import { useLoaderData } from "react-router";
import { MarkdownRenderer } from "react-intlayer/markdown";

// 2. İstemcide: AST'yi yeniden ayrıştırmadan doğrudan işleyin
export default function Page() {
const { content } = useLoaderData();

// İşleyici, ham bir dizeyi veya ayrıştırılmış AST'yi kabul eder
return <MarkdownRenderer content={content} />;
}
    app/page.tsx
    import { parseMarkdown } from "next-intlayer/markdown";
import { MarkdownRenderer } from "next-intlayer/markdown";

export default async function Page() {
// 1. Sunucuda Markdown'u serileştirilebilir bir AST'ye ayrıştırın
const markdownString = "## My title \n\nLorem Ipsum";
const ast = parseMarkdown(markdownString);

// 2. AST'yi doğrudan işleyin
// Bir Server Component içinde bu sorunsuz çalışır ve gerekirse AST'yi
// doğrudan alt istemci bileşenlerine iletir.
return <MarkdownRenderer content={ast} />;
}
    pages/index.vue
    <script setup lang="ts">
import { parseMarkdown } from "vue-intlayer/markdown";
import { MarkdownRenderer } from "vue-intlayer/markdown";

// 1. Sunucuda markdown'u getirin ve bir AST'ye ayrıştırın
const { data: ast } = await useAsyncData('markdown', () => {
const markdownString = "## My title \n\nLorem Ipsum";
return parseMarkdown(markdownString);
});
</script>

<template>
<!-- 2. İstemcide: AST'yi yeniden ayrıştırmadan doğrudan işleyin -->
<MarkdownRenderer :content="ast" />
</template>
    +page.server.ts
    import { parseMarkdown } from "svelte-intlayer/markdown";

// 1. Sunucuda: Markdown'u serileştirilebilir bir AST'ye ayrıştırın
export const load = async () => {
const markdownString = "## My title \n\nLorem Ipsum";
const ast = parseMarkdown(markdownString);

// AST'yi istemciye döndürün
return { content: ast };
};
    +page.svelte
    <script lang="ts">
import { MarkdownRenderer } from "svelte-intlayer/markdown";
export let data;
</script>

<!-- 2. İstemcide: AST'yi yeniden ayrıştırmadan doğrudan işleyin -->
<MarkdownRenderer value={data.content} />

    Angular SSR, verileri genellikle ilk yükleme sırasında sunucuda çözümler ve istemcide hidrasyon gerçekleştirir. AST'yi iletmek için çözümleyiciler (resolvers) kullanabilirsiniz.

    app.resolver.ts
    import { Injectable } from "@angular/core";
import { Resolve } from "@angular/router";
import { parseMarkdown, type ParsedMarkdown } from "angular-intlayer/markdown";

@Injectable({ providedIn: "root" })
export class MarkdownResolver implements Resolve<ParsedMarkdown> {
resolve(): ParsedMarkdown {
  const markdownString = "## My title \n\nLorem Ipsum";
  // 1. Sunucuda: Markdown'u serileştirilebilir bir AST'ye ayrıştırın
  return parseMarkdown(markdownString);
}
}
    app.component.ts
    import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { IntlayerMarkdownService, type ParsedMarkdown } from "angular-intlayer/markdown";

@Component({
selector: "app-root",
template: `<div [innerHTML]="renderedMarkdown"></div>`,
})
export class AppComponent {
renderedMarkdown: string = "";

constructor(
  private route: ActivatedRoute,
  private markdownService: IntlayerMarkdownService
) {
  // 2. İstemcide: AST'yi yeniden ayrıştırmadan doğrudan işleyin
  this.route.data.subscribe((data) => {
    this.renderedMarkdown = this.markdownService.renderMarkdown(
      data.markdownAst
    ) as string;
  });
}
}

    Bu model, Markdown ayrıştırma mantığının tamamen sunucuda çalıştırılmasını sağlayarak istemci tarafındaki yürütme süresini önemli ölçüde azaltır ve ilk hidrasyon hızını artırır.

    Seçenek Referansı

    Bu seçenekler MarkdownProvider, MarkdownRenderer, useMarkdownRenderer ve renderMarkdowna iletilebilir.

    Option Type Default Açıklama
    forceBlock boolean false Çıktının bir blok düzeyinde öğeye (örn. <div>) sarılmasını zorlar.
    forceInline boolean false Çıktının bir satır içi öğeye (örn. <span>) sarılmasını zorlar.
    tagfilter boolean true Tehlikeli HTML etiketlerini kaldırarak güvenliği artırmak için GitHub Etiket Filtresini etkinleştirir.
    preserveFrontmatter boolean false true ise, Markdown dizesinin başındaki frontmatter kaldırılmaz.
    components Overrides {} HTML etiketlerinden özel bileşenlere bir eşleme (örn. { h1: MyHeading }).
    wrapper Component null Oluşturulan Markdown'u sarmak için özel bir bileşen.
    renderMarkdown Function null Varsayılan Markdown derleyicisini tamamen değiştirmek için özel bir oluşturma işlevi.
    İç İçe GeçmeHTML