\n\n \n ```\n\n `intlayerMarkdown` eklentisi aracılığıyla global olarak yapılandırın (MDX özel bileşenlerini destekler):\n\n ```ts fileName=\"main.ts\"\n import { intlayerMarkdown } from \"vue-intlayer/markdown\";\n\n app.use(intlayerMarkdown, {\n components: {\n h1: (props) => h('h1', { style: { color: 'green' } }, props.children),\n MyButton: (props) => h('button', props), // MDX Bileşeni\n },\n });\n ```\n\n > `intlayerMarkdown` eklentisi yüklü değilse, Intlayer varsayılan derleyiciyi kullanarak oluşturacaktır.\n\n Ayrıca `.use()` yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:\n\n ```vue\n h('h1', { style: { color: 'red' } }, props.children),\n })\" />\n ```\n\n Markdown'ı bir dize olarak alabilirsiniz:\n\n ```vue\n {{ myMarkdownContent.value }}\n {{ String(myMarkdownContent) }}\n {{ myMarkdownContent.toString() }}\n ```\n\n Ve markdown meta verilerinize şu şekilde erişebilirsiniz:\n\n ```vue\n \n \n ```\n\n \n \n Svelte, Markdown'ı varsayılan olarak bir HTML dizesi olarak oluşturur. Oluşturmak için `{@html}` kullanın.\n\n ```svelte fileName=\"App.svelte\"\n \n\n \n {@html $content.myMarkdownContent}\n \n ```\n\n > `MarkdownProvider` mevcut değilse, Intlayer varsayılan derleyiciyi kullanarak markdown'ı oluşturacaktır.\n\n Ayrıca `.use()` yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:\n\n ```svelte\n {@html $content.myMarkdownContent.use({ ... })}\n ```\n\n Markdown'ı bir dize olarak alabilirsiniz:\n\n ```svelte\n {$content.myMarkdownContent.value}\n {String($content.myMarkdownContent)}\n {$content.myMarkdownContent.toString()}\n ```\n\n Ve markdown meta verilerinize şu şekilde erişebilirsiniz:\n\n ```svelte\n {$content.myMarkdownContent.metadata}\n {$content.myMarkdownContent.metadata.title}\n ```\n\n \n \n Preact, JSX'teki Markdown düğümlerini doğrudan destekler.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n import { MarkdownProvider } from \"preact-intlayer/markdown\";\n\n const AppContent = () => {\n const { myMarkdownContent } = useIntlayer(\"app\");\n return
{myMarkdownContent}
;\n };\n\n const App = () => (\n

{children}

,\n MyButton: (props) =>
Ana SayfaPlaygroundShowcaseUygulamaDokümanBlog
Yazar:
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-contentdescription: İçeriğimlocale: 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'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}

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

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.

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;

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ınexport 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şleyinexport default function Page() {  const { content } = useLoaderData();  // İşleyici, ham bir dizeyi veya ayrıştırılmış AST'yi kabul eder  return <MarkdownRenderer content={content} />;}

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