Perbedaan antara Markdown dan MDX#

• Markdown (MD) adalah bahasa marka ringan yang memungkinkan pengguna menulis dokumen dalam format teks polos, yang kemudian dikonversi menjadi HTML terformat. MD populer karena sintaksnya yang sederhana dan mudah digunakan, sangat cocok untuk menulis dokumentasi dan artikel blog.
• MDX adalah format yang memperluas sintaks Markdown, memungkinkan penyisipan kode JSX secara mulus di dalam dokumen Markdown. Melalui MDX, pengguna dapat menanamkan komponen React/Astro ke dalam dokumen, sehingga menghasilkan interaktivitas dan kedinamisan yang lebih kaya.

Menggunakan Komponen#

Ini adalah contoh penggunaan komponen ikon:

1
import { Icon } from 'astro-icon/components'
2

3
<div class="flex items-center gap-2 my-4">
4
<Icon name="fa6-solid:rocket" class="text-4xl text-red-500" />
5
<span>Roket Meluncur!</span>
6
</div>

<div class=“flex items-center gap-2 my-4”> <Icon name=“fa6-solid” class=“text-4xl text-red-500” /> <span>Roket Meluncur!</span> </div>

Menggunakan JSX#

Anda juga dapat menulis HTML/JSX secara langsung:

1
<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4">
2
Ini adalah blok div dengan gaya kustom, menggunakan kelas Tailwind CSS.
3
</div>
4

5
## Ekspor Variabel Sederhana

Tahun ini adalah tahun 2026.

1
export const year = new Date().getFullYear()
2

3
Tahun ini adalah tahun {year}.
4

5
Untuk informasi lebih lanjut, silakan lihat [Dokumentasi MDX](https://mdxjs.com/).