}>{markdownContent}\n );\n};\n```\n\n \n \n\nAngular tidak memiliki API Suspense. Gunakan tampilan yang ditangguhkan (`@defer`) milik Angular untuk menangani konten Markdown yang dimuat secara lambat (membutuhkan Angular 17+).\n\n```typescript fileName=\"my.component.ts\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-my\",\n template: `\n @defer {\n
    \n } @loading {\n
    Loading...
    \n }\n `,\n})\nexport class MyComponent {\n content = useIntlayer(\"my-markdown\");\n}\n```\n\n     \n\n\n---\n\n## Rendering Sisi Server (SSR) dan Hidrasi\n\nDibandingkan dengan parser Markdown lainnya seperti remark / rehype, Intlayer Markdown bebas ketergantungan dan berjalan di sisi klien maupun server.\n\nNamun Intlayer mengoptimalkan parsing untuk framework Server-Side Rendering (SSR) (seperti Next.js App Router, React Router, Nuxt, SvelteKit, dll.).\n\nHidrasi di browser memakan waktu, sehingga Intlayer memungkinkan Anda untuk mem-parsing Markdown terlebih dahulu ke dalam Abstract Syntax Tree (AST) di server, lalu mengirimkannya sebagai objek JSON yang dapat diserialisasi ke frontend.\n\nAnda dapat menggunakan fungsi `parseMarkdown` dari paket Intlayer framework Anda di sisi server untuk menghasilkan AST yang dapat diserialisasi (objek `ParsedMarkdown`), dan meneruskannya secara langsung ke frontend. Semua utilitas rendering Intlayer (seperti ``, `useMarkdownRenderer`, dll.) secara otomatis menerima objek AST ini dan merendernya dengan lancar.\n\n### Contoh dalam Arsitektur Server/Klien\n\n\n \n\n ```tsx fileName=\"server.ts\"\n import { parseMarkdown } from \"react-intlayer/markdown\";\n\n // 1. Di server: Parsing markdown ke dalam AST yang dapat diserialisasi\n export const loader = async () => {\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n const ast = parseMarkdown(markdownString);\n\n // Kembalikan AST sebagai JSON ke klien\n return Response.json({ content: ast });\n };\n ```\n\n ```tsx fileName=\"client.tsx\"\n import { useLoaderData } from \"react-router\";\n import { MarkdownRenderer } from \"react-intlayer/markdown\";\n\n // 2. Di klien: Render AST secara langsung tanpa mem-parsing ulang\n export default function Page() {\n const { content } = useLoaderData();\n\n // Renderer menerima string mentah atau AST hasil parsing\n return ;\n }\n ```\n\n \n \n\n ```tsx fileName=\"app/page.tsx\"\n import { parseMarkdown } from \"next-intlayer/markdown\";\n import { MarkdownRenderer } from \"next-intlayer/markdown\";\n\n export default async function Page() {\n // 1. Parsing markdown ke dalam AST yang dapat diserialisasi di server\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n const ast = parseMarkdown(markdownString);\n\n // 2. Render AST secara langsung\n // Dalam Server Component, ini bekerja dengan lancar dan meneruskan AST\n // secara langsung ke komponen klien di bawahnya jika diperlukan.\n return ;\n }\n ```\n\n \n \n\n ```vue fileName=\"pages/index.vue\"\n \n\n \n ```\n\n \n \n\n ```typescript fileName=\"+page.server.ts\"\n import { parseMarkdown } from \"svelte-intlayer/markdown\";\n\n // 1. Di server: Parsing markdown ke dalam AST yang dapat diserialisasi\n export const load = async () => {\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n const ast = parseMarkdown(markdownString);\n\n // Kembalikan AST ke klien\n return { content: ast };\n };\n ```\n\n ```svelte fileName=\"+page.svelte\"\n \n\n \n \n ```\n\n \n \n\n Angular SSR biasanya menyelesaikan data di server selama pemuatan awal dan menghidrasi di klien. Anda dapat menggunakan resolver untuk meneruskan AST.\n\n ```typescript fileName=\"app.resolver.ts\"\n import { Injectable } from \"@angular/core\";\n import { Resolve } from \"@angular/router\";\n import { parseMarkdown, type ParsedMarkdown } from \"angular-intlayer/markdown\";\n\n @Injectable({ providedIn: \"root\" })\n export class MarkdownResolver implements Resolve {\n resolve(): ParsedMarkdown {\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n // 1. Di server: Parsing markdown ke dalam AST yang dapat diserialisasi\n return parseMarkdown(markdownString);\n }\n }\n ```\n\n ```typescript fileName=\"app.component.ts\"\n import { Component } from \"@angular/core\";\n import { ActivatedRoute } from \"@angular/router\";\n import { IntlayerMarkdownService, type ParsedMarkdown } from \"angular-intlayer/markdown\";\n\n @Component({\n selector: \"app-root\",\n template: `
    `,\n })\n export class AppComponent {\n renderedMarkdown: string = \"\";\n\n constructor(\n private route: ActivatedRoute,\n private markdownService: IntlayerMarkdownService\n ) {\n // 2. Di klien: Render AST secara langsung tanpa mem-parsing ulang\n this.route.data.subscribe((data) => {\n this.renderedMarkdown = this.markdownService.renderMarkdown(\n data.markdownAst\n ) as string;\n });\n }\n }\n ```\n\n     \n    \n\nPola ini memastikan bahwa logika parsing Markdown dieksekusi sepenuhnya di server, secara signifikan mengurangi waktu eksekusi di sisi klien dan meningkatkan kecepatan hidrasi awal.\n\n## Referensi Opsi\n\nOpsi ini dapat diteruskan ke `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer`, dan `renderMarkdown`.\n\n| Option | Type | Default | Deskripsi |\n| :-------------------- | :---------- | :------ | :--------------------------------------------------------------------------------------------------- |\n| `forceBlock` | `boolean` | `false` | Memaksa output untuk dibungkus dalam elemen tingkat blok (mis., `
    `). |\n| `forceInline` | `boolean` | `false` | Memaksa output untuk dibungkus dalam elemen sebaris (mis., ``). |\n| `tagfilter` | `boolean` | `true` | Mengaktifkan GitHub Tag Filter untuk keamanan yang ditingkatkan dengan menghapus tag HTML berbahaya. |\n| `preserveFrontmatter` | `boolean` | `false` | Jika `true`, frontmatter di awal string Markdown tidak akan dihapus. |\n| `components` | `Overrides` | `{}` | Peta tag HTML ke komponen kustom (mis., `{ h1: MyHeading }`). |\n| `wrapper` | `Component` | `null` | Komponen kustom untuk membungkus Markdown yang dirender. |\n| `renderMarkdown` | `Function` | `null` | Fungsi perenderan kustom untuk sepenuhnya menggantikan kompilator Markdown default. |\n","about":"Pelajari cara mendeklarasikan dan menggunakan konten Markdown di situs web multibahasa Anda dengan Intlayer. Ikuti langkah-langkah dalam dokumentasi online ini untuk mengintegrasikan Markdown dengan mulus ke dalam proyek Anda.","url":"https://intlayer.org/id/doc/concept/content/markdown","datePublished":"07-02-2025","dateModified":"19-05-2026","keywords":"Markdown, Internasionalisasi, Dokumentasi, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Pengembang, Manajer Konten"}}
    Dibuat:2025-02-07Terakhir diperbarui:2026-05-19

    Markdown / Konten Teks Kaya

    Intlayer mendukung konten teks kaya yang didefinisikan menggunakan sintaks Markdown. Ini memungkinkan Anda dengan mudah menulis dan memelihara konten berformat kaya seperti blog, artikel, dan lainnya.

    Mendeklarasikan Konten Markdown

    Anda dapat mendeklarasikan konten Markdown menggunakan fungsi md atau cukup sebagai string (jika mengandung sintaks Markdown).

    Mulai dari versi 8.10.0, Anda dapat mendeklarasikan konten Markdown langsung di dalam file .content.md. Intlayer akan secara otomatis mendeteksi dan mem-parsing konten Markdown.

    markdown-file.en.content.md
    ---key: my-markdown-contentdescription: Konten sayalocale: en---# Konten sayaBerikut adalah contoh konten markdown

    Bidang locale pada front-matter adalah bidang yang mendefinisikan bahasa konten. Ini bersifat opsional. Jika tidak diberikan, Intlayer akan menggunakan bahasa default, yang juga digunakan sebagai bahasa cadangan jika tidak ada terjemahan yang tersedia untuk bahasa tertentu.

    Contoh struktur file:

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

    Anda dapat menambahkan properti apa pun yang didefinisikan dalam Definisi Kamus ke dalam front-matter

    Merender Markdown

    Intlayer menyediakan dua cara independen untuk merender Markdown:

    1. Melalui useIntlayer — Intlayer secara otomatis mengubah simpul md menjadi keluaran asli kerangka kerja (JSX, VNode, string HTML).

      • Frontmatter diparsing dan diekspos sebagai .metadata. Anda dapat mengesampingkan rendering pada dua tingkat — secara global dengan MarkdownProvider (atau yang setara di kerangka kerja) dan secara lokal per simpul dengan .use(). Keduanya dapat digabungkan; .use() diutamakan daripada MarkdownProvider, yang pada gilirannya diutamakan daripada nilai default.

    2. Utilitas Pembantu — <MarkdownRenderer />, useMarkdownRenderer(), dan renderMarkdown() adalah alat mandiri yang menerima hanya string Markdown mentah. Alat-alat ini independen dari useIntlayer dan tidak bekerja dengan simpul dekoratif yang dikembalikannya.

    Rendering Markdown mendukung MDX — gunakan komponen JSX/kerangka kerja apa pun berdasarkan namanya langsung di dalam Markdown Anda.

    1. Rendering Otomatis (melalui useIntlayer)

    Simpul Markdown dapat dirender langsung sebagai JSX.

    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} />, // Komponen MDX    }}  >    <AppContent />  </MarkdownProvider>);
    Jika MarkdownProvider tidak ada, Intlayer akan merender markdown menggunakan parser default Markdown ke JSX.

    Anda juga dapat memberikan pengesampingan lokal untuk simpul tertentu menggunakan metode .use():

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

    Anda dapat mengambil Markdown sebagai sebuah string:

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

    Dan Anda dapat mengakses metadata markdown Anda seperti ini:

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

    2. Utilitas Pembantu (Hanya String Markdown)

    Utilitas ini merender hanya string Markdown mentah dan independen dari useIntlayer. Gunakan utilitas ini saat Anda perlu merender Markdown dari sumber selain dari kamus Anda.

    Komponen <MarkdownRenderer />

    Merender string Markdown dengan opsi tertentu.

    tsx
    import { MarkdownRenderer } from "react-intlayer/markdown";<MarkdownRenderer forceBlock={true} tagfilter={true}>  {"# Judul Saya"}</MarkdownRenderer>

    Hook useMarkdownRenderer()

    Mendapatkan fungsi perender yang sudah dikonfigurasi sebelumnya.

    tsx
    import { useMarkdownRenderer } from "react-intlayer/markdown";const renderMarkdown = useMarkdownRenderer({  forceBlock: true,  components: { h1: (props) => <h1 {...props} className="custom" /> }});return renderMarkdown("# Judul Saya");

    Utilitas renderMarkdown()

    Utilitas mandiri untuk rendering di luar komponen.

    tsx
    import { renderMarkdown } from "react-intlayer/markdown";const jsx = renderMarkdown("# Judul Saya", { forceBlock: true });

    Konfigurasi Global dengan MarkdownProvider

    MarkdownProvider (atau padanan kerangka kerjanya) mengonfigurasi jalur rendering Markdown untuk seluruh aplikasi Anda. Ini berlaku baik untuk rendering useIntlayer otomatis maupun utilitas pembantu. Opsi yang ditetapkan di sini adalah default — .use() mengesampingkannya di tingkat simpul.

    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 didukung — nama komponen apa pun yang digunakan di dalam Markdown Anda (misalnya <MyCustomJSXComponent />) diselesaikan terhadap peta components.

    Anda juga dapat menggunakan perender markdown Anda sendiri:

    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>);
    Mengimpor perender Markdown Anda secara dinamis adalah cara yang bagus untuk mengurangi ukuran bundel aplikasi Anda.

    Suspense

    Perender Markdown Intlayer dimuat secara dinamis. Meskipun dioptimalkan, ukuran parser dasarnya sekitar 55kb. Memuat ini secara sinkron menunda perenderan halaman awal dan menurunkan First Contentful Paint (FCP).

    Untuk mencegah pemblokiran UI, Intlayer terintegrasi dengan API Suspense dari React. Ia mengambil parser di latar belakang dan melempar Promise selama pengunduhan.

    Bungkus komponen apa pun yang merender Markdown Intlayer di dalam batasan <Suspense>. Ini menampilkan status fallback yang dilokalkan saat chunk diunduh, memungkinkan sisa DOM Anda segera dirender.

    Peringatan: Jika Anda tidak menyediakan batasan <Suspense>, React akan ditangguhkan pada tingkat root atau memblokir seluruh pohon komponen dari perenderan hingga chunk 55kb dimuat sepenuhnya.

    Di Next.js App Router, Anda dapat menggunakan Suspense React untuk komponen klien atau file loading.tsx untuk komponen server.

    Komponen Klien:

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

    Komponen Server dengan loading.tsx:

    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;

    Rendering Sisi Server (SSR) dan Hidrasi

    Dibandingkan dengan parser Markdown lainnya seperti remark / rehype, Intlayer Markdown bebas ketergantungan dan berjalan di sisi klien maupun server.

    Namun Intlayer mengoptimalkan parsing untuk framework Server-Side Rendering (SSR) (seperti Next.js App Router, React Router, Nuxt, SvelteKit, dll.).

    Hidrasi di browser memakan waktu, sehingga Intlayer memungkinkan Anda untuk mem-parsing Markdown terlebih dahulu ke dalam Abstract Syntax Tree (AST) di server, lalu mengirimkannya sebagai objek JSON yang dapat diserialisasi ke frontend.

    Anda dapat menggunakan fungsi parseMarkdown dari paket Intlayer framework Anda di sisi server untuk menghasilkan AST yang dapat diserialisasi (objek ParsedMarkdown), dan meneruskannya secara langsung ke frontend. Semua utilitas rendering Intlayer (seperti <MarkdownRenderer>, useMarkdownRenderer, dll.) secara otomatis menerima objek AST ini dan merendernya dengan lancar.

    Contoh dalam Arsitektur Server/Klien

    server.ts
    import { parseMarkdown } from "react-intlayer/markdown";// 1. Di server: Parsing markdown ke dalam AST yang dapat diserialisasiexport const loader = async () => {  const markdownString = "## My title \n\nLorem Ipsum";  const ast = parseMarkdown(markdownString);  // Kembalikan AST sebagai JSON ke klien  return Response.json({ content: ast });};
    client.tsx
    import { useLoaderData } from "react-router";import { MarkdownRenderer } from "react-intlayer/markdown";// 2. Di klien: Render AST secara langsung tanpa mem-parsing ulangexport default function Page() {  const { content } = useLoaderData();  // Renderer menerima string mentah atau AST hasil parsing  return <MarkdownRenderer content={content} />;}

    Pola ini memastikan bahwa logika parsing Markdown dieksekusi sepenuhnya di server, secara signifikan mengurangi waktu eksekusi di sisi klien dan meningkatkan kecepatan hidrasi awal.

    Referensi Opsi

    Opsi ini dapat diteruskan ke MarkdownProvider, MarkdownRenderer, useMarkdownRenderer, dan renderMarkdown.

    Option Type Default Deskripsi
    forceBlock boolean false Memaksa output untuk dibungkus dalam elemen tingkat blok (mis., <div>).
    forceInline boolean false Memaksa output untuk dibungkus dalam elemen sebaris (mis., <span>).
    tagfilter boolean true Mengaktifkan GitHub Tag Filter untuk keamanan yang ditingkatkan dengan menghapus tag HTML berbahaya.
    preserveFrontmatter boolean false Jika true, frontmatter di awal string Markdown tidak akan dihapus.
    components Overrides {} Peta tag HTML ke komponen kustom (mis., { h1: MyHeading }).
    wrapper Component null Komponen kustom untuk membungkus Markdown yang dirender.
    renderMarkdown Function null Fungsi perenderan kustom untuk sepenuhnya menggantikan kompilator Markdown default.
    Nesting
    HTML