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