Menggunakan MDX

Compile MDX dengan unifast untuk menggunakan ekspresi JSX dan statement import di dalam Markdown, dirender dengan React atau runtime JSX lainnya.

MDX memungkinkan Anda menggunakan ekspresi JSX dan statement import di dalam Markdown. unifast meng-compile MDX menjadi modul JavaScript yang dapat dirender dengan React atau runtime JSX lainnya.

Instalasi

Penggunaan Dasar

import { compile } from "@unifast/node";

const source = `
# Hello

<Counter initial={0} />

export const meta = { title: "My Page" };
`;

const result = compile(source, { inputKind: "mdx" });
// result.output is a JavaScript module string

Cara Kerja MDX

MDX memperluas Markdown dengan dua kemampuan:

  1. Ekspresi JSX - Gunakan komponen secara inline dengan konten Anda.

  2. Import/export ESM - Import komponen dan export metadata.

Compiler memproses MDX dalam langkah-langkah berikut:

MDX source
  → Parse (Markdown + JSX + ESM)
  → MdAst with JSX/ESM nodes
  → Lower to HAst
  → Emit as JavaScript module

Outputnya adalah modul JavaScript dengan fungsi default export yang menerima prop components untuk injeksi komponen.

Penggunaan dengan React

import { compile } from "@unifast/node";
import { compileToReact } from "@unifast/react";

const source = `# Hello\n\nThis is **MDX**.`;

const result = compile(source, { inputKind: "mdx" });
const Component = compileToReact(result);

// Render in your React app
<Component components={{ h1: MyHeading }} />

Frontmatter dalam MDX

Gabungkan MDX dengan plugin frontmatter untuk mengekstrak metadata:

import { compile, frontmatter } from "@unifast/node";

const source = `---
title: My Article
author: Jane
---

# {frontmatter.title}

Written by {frontmatter.author}.
`;

const result = compile(source, {
  inputKind: "mdx",
  plugins: [frontmatter()],
});

console.log(result.frontmatter);
// { title: "My Article", author: "Jane" }

Lihat Juga