\n\n \n ```\n\n Konfigurasikan secara global melalui plugin `intlayerMarkdown` (mendukung komponen kustom MDX):\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), // Komponen MDX\n },\n });\n ```\n\n > Jika plugin `intlayerMarkdown` tidak diinstal, Intlayer akan merender menggunakan kompilator default.\n\n Anda juga dapat memberikan pengesampingan lokal untuk simpul tertentu menggunakan metode `.use()`:\n\n ```vue\n h('h1', { style: { color: 'red' } }, props.children),\n })\" />\n ```\n\n Anda dapat mengambil Markdown sebagai sebuah string:\n\n ```vue\n {{ myMarkdownContent.value }}\n {{ String(myMarkdownContent) }}\n {{ myMarkdownContent.toString() }}\n ```\n\n Dan Anda dapat mengakses metadata markdown Anda seperti ini:\n\n ```vue\n \n \n ```\n\n \n \n Svelte merender Markdown sebagai string HTML secara default. Gunakan `{@html}` untuk merendernya.\n\n ```svelte fileName=\"App.svelte\"\n \n\n \n {@html $content.myMarkdownContent}\n \n ```\n\n > Jika `MarkdownProvider` tidak ada, Intlayer akan merender markdown menggunakan kompilator default.\n\n Anda juga dapat memberikan pengesampingan lokal untuk simpul tertentu menggunakan metode `.use()`:\n\n ```svelte\n {@html $content.myMarkdownContent.use({ ... })}\n ```\n\n Anda dapat mengambil Markdown sebagai sebuah string:\n\n ```svelte\n {$content.myMarkdownContent.value}\n {String($content.myMarkdownContent)}\n {$content.myMarkdownContent.toString()}\n ```\n\n Dan Anda dapat mengakses metadata markdown Anda seperti ini:\n\n ```svelte\n {$content.myMarkdownContent.metadata}\n {$content.myMarkdownContent.metadata.title}\n ```\n\n \n \n Preact mendukung simpul Markdown secara langsung di JSX.\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) =>
BerandaSandboxShowcaseAplikasiDokumentasiBlog
Penulis:
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.
NestingHTML