Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Paragraf biasa.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer facilisis, nisl sed tincidunt varius, ligula erat fermentum nisi, non pretium velit magna nec lectus. Curabitur ut sem vel augue pulvinar volutpat sit amet sed risus.

Ini paragraf kedua dengan teks tebal, teks miring, dan teks tebal miring. Juga ada coret dan inline code. Selain itu terdapat kombinasi elemen inline lain untuk membantu testing typography, spacing antar paragraf, line-height, wrapping text, serta rendering markdown pada berbagai ukuran layar dan mode tema..

Suspendisse potenti. Curabitur convallis, sapien sit amet faucibus tempus, ligula tortor dignissim erat, vel vulputate elit sem sed neque. Bagian ini berguna untuk memastikan inline link, hover state, dan external source rendering tetap konsisten pada berbagai ukuran layar.

Praesent feugiat, purus vel luctus elementum, lorem arcu tincidunt nisl, vitae pulvinar libero turpis nec justo. Konten diperpanjang untuk membantu debugging alignment author, overflow content, serta vertical rhythm pada layout quote custom.

Donec faucibus, risus vel luctus tincidunt, justo sapien placerat nibh, sed gravida lorem lectus non sapien. Variasi tanpa metadata seperti ini penting untuk memastikan renderer tetap stabil meskipun tidak memiliki source maupun author tambahan.

Donec faucibus, risus vel luctus tincidunt, justo sapien placerat nibh, sed gravida lorem lectus non sapien. Variasi tanpa metadata seperti ini penting untuk memastikan renderer tetap stabil meskipun tidak memiliki source maupun author tambahan.

Ini cite

Daftar (List)

Daftar tak berurutan (unordered)

• Item pertama dengan deskripsi yang sedikit lebih panjang untuk membantu testing spacing, wrapping text, dan alignment marker pada daftar unordered.
• Item kedua yang juga memiliki isi lebih panjang agar rendering multiline dapat terlihat dengan lebih jelas pada berbagai ukuran layar.
  • Sub item A dengan tambahan teks untuk memastikan nested list tetap memiliki indentation dan vertical rhythm yang konsisten.
  • Sub item B yang digunakan untuk menguji tampilan marker, spacing antar item, dan line-height pada nested unordered list.
• Item ketiga dengan kombinasi teks yang lebih panjang untuk membantu debugging typography dan layout pada prose content custom.

Daftar berurutan (ordered)

1. Langkah satu dengan penjelasan tambahan yang dibuat lebih panjang untuk membantu testing alignment angka, spacing antar item, dan wrapping text pada ordered list custom.
2. Langkah dua dengan isi yang sedikit lebih kompleks agar rendering multiline dan vertical rhythm pada daftar berurutan dapat terlihat lebih jelas.
3. Sub langkah 2.1 dengan tambahan konten untuk memastikan nested ordered list tetap memiliki indentation dan numbering yang konsisten.
4. Sub langkah 2.2 yang digunakan untuk menguji tampilan marker angka, line-height, serta spacing antar nested item.
5. Langkah tiga dengan paragraf yang lebih panjang untuk membantu debugging typography, numbering style, dan keseluruhan layout prose pada berbagai ukuran layar.

Task list

• Selesai dan sudah diuji untuk memastikan styling checkbox aktif, alignment icon, serta typography pada task list berjalan dengan baik di dalam prose custom.
• Belum selesai karena masih digunakan untuk testing spacing, wrapping text, dan interaksi visual antara checkbox dengan konten multiline yang lebih panjang.
• Sedang dikerjakan sambil melakukan debugging terhadap vertical rhythm, nested spacing, serta konsistensi rendering task list pada berbagai ukuran layar dan mode tema.

Tabel

Code block

---// src/components/mdx/CodeBlock.astroimport Icon from "@/components/ui/icons/Icon.astro"; interface Props {  title?: string; }const { title = "" } = Astro.props; const $ = {  wrapper:    "code-block-wrapper not-prose relative my-6 rounded-xl overflow-hidden border border-(--prose-code-border) bg-(--prose-code-header-bg)",  header:    "code-block-header flex items-center justify-between px-4 py-2 min-h-10 border-b border-(--prose-code-border)/60",  leftSlot: "header-left flex items-center gap-2 min-w-0 flex-1 pr-4",  rightSlot: "header-right flex items-center gap-3 shrink-0",  titleText:    "code-block-title text-label-13 truncate text-(--prose-fg-muted) font-medium tracking-wide",  langBadge:    "lang-badge text-label-11 font-mono font-bold text-(--prose-fg-subtle) bg-(--prose-bg-subtle) uppercase px-2 py-0.5 rounded border border-(--prose-code-border)/40",  content:    "code-content relative bg-(--prose-code-bg) overflow-x-auto group/content",  copyBtn:    "copy-button absolute top-3 right-3 z-20 flex items-center justify-center p-2 rounded-md text-(--prose-fg-subtle) border border-(--prose-code-border) bg-(--prose-code-bg)/80 backdrop-blur-md opacity-0 group-hover/content:opacity-100 focus-visible:opacity-100 transition-all duration-200 hover:text-(--prose-fg-strong) hover:bg-(--prose-code-header-bg)",} as const;---<div class={$.wrapper}>  <div class={$.header}>    <div class={$.leftSlot}>      {title && <span class={$.titleText}>{title}</span>}    </div>    <div class={$.rightSlot}>      <span class={$.langBadge} style="display: none;"></span>    </div>  </div>  <div class={$.content}>    <button      type="button"      aria-label="Salin kode"      title="Salin"      class={$.copyBtn}    >      <Icon name="copy" className="copy-icon h-3.5 w-3.5" />      <Icon name="check" className="check-icon hidden h-3.5 w-3.5" />    </button>    <slot />  </div></div>

CodeBlock

---// src/components/mdx/CodeBlock.astroimport Icon from "@/components/ui/icons/Icon.astro"; interface Props {  title?: string; }const { title = "" } = Astro.props; ---

Callouts

Details

Changelog

STEPS

File Tree

Gambar

Gambar dengan caption

Tabs

Horizontal Rule

Footnote

Artikel ini menggunakan beberapa footnote untuk memberikan penjelasan tambahan tanpa mengganggu alur utama pembahasan¹. Sistem seperti ini sering dipakai pada dokumentasi teknis, artikel akademik, maupun blog dengan konten panjang agar referensi tetap rapi dan mudah dibaca².

Selain itu, footnote juga berguna untuk menyisipkan konteks tambahan, sumber referensi, atau catatan kecil yang tidak terlalu penting jika dimasukkan langsung ke paragraf utama³. Pada implementasi MDX atau Markdown modern, footnote biasanya dirender menjadi daftar referensi otomatis di bagian bawah halaman⁴.

Contoh lain penggunaan footnote dapat ditemukan pada pembahasan API, changelog, maupun catatan kompatibilitas browser yang sering membutuhkan detail tambahan tanpa memenuhi isi utama artikel⁵.

Strikethrough

Teks ini dicoret untuk membantu testing styling strikethrough, ketebalan garis, alignment dengan typography utama, serta konsistensi rendering inline markdown pada berbagai ukuran layar dan mode tema.

Selain itu, bagian teks yang dicoret lebih panjang seperti ini juga berguna untuk memastikan wrapping text, line-height, dan posisi dekorasi garis tetap stabil ketika digunakan pada paragraf multiline di dalam prose custom.

Highlight

Ini paragraph dengan mark digunakan untuk membantu testing background highlight, border accent, spacing inline, serta konsistensi typography pada prose custom di berbagai ukuran layar.

Teks yang di-highlight dengan HTML juga berguna untuk memastikan rendering elemen inline tetap stabil ketika berada di dalam paragraf panjang, memiliki wrapping multiline, maupun digunakan bersamaan dengan elemen markdown lain seperti link, strong, atau inline code.

Escaping karakter

Ini tidak miring karena *backslash*. Contoh ini digunakan untuk membantu testing escaped markdown character, rendering literal symbol, serta memastikan parser markdown tidak mengubah karakter tertentu menjadi elemen formatting otomatis.

Selain itu, karakter seperti # heading, > blockquote, dan `inline code` juga sering dipakai untuk memastikan prose renderer tetap konsisten saat menampilkan dokumentasi teknis atau contoh sintaks markdown mentah di dalam artikel.

HTML inline

Ini paragraf dengan HTML langsung yang digunakan untuk membantu testing rendering HTML inline, inheritance typography, spacing, dan kompatibilitas styling custom di dalam prose markdown.

Paragraf kedua dengan HTML langsung ini juga berguna untuk memastikan inline style, wrapping text, dan perilaku rendering HTML tetap konsisten pada berbagai ukuran layar maupun mode tema.

Abbreviation

WHO adalah organisasi kesehatan yang digunakan di sini untuk membantu testing tooltip abbreviation, border style, hover interaction, serta rendering elemen inline HTML di dalam prose custom.

CSS digunakan untuk styling dan juga dipakai pada contoh ini untuk memastikan typography, spacing inline, serta perilaku abbreviation tetap konsisten pada berbagai ukuran layar dan mode tema.

Sample Output

Error: file not found (404) digunakan untuk membantu testing typography elemen sample output, background styling, border radius, spacing inline, serta konsistensi rendering elemen terminal-style di dalam prose custom.

Build completed successfully in 1.24s juga berguna untuk memastikan wrapping text, line-height, dan alignment elemen output tetap stabil ketika digunakan bersama paragraf biasa, inline code, maupun block code pada berbagai ukuran layar.

Time element

19 Mei 2026 digunakan untuk membantu testing styling elemen time, typography inline, spacing antar elemen, serta rendering semantic HTML pada prose custom di berbagai ukuran layar dan mode tema.

Selain itu, 19 Mei 2026 pukul 14 WIB juga berguna untuk memastikan format datetime, wrapping text, dan perilaku elemen time tetap konsisten ketika digunakan bersama paragraf panjang, inline code, maupun elemen markdown lainnya.

Meter

60% digunakan untuk membantu testing rendering elemen meter, alignment inline, ukuran default browser styling, serta kompatibilitas typography pada prose custom di berbagai ukuran layar dan mode tema.

Selain itu, 85% juga berguna untuk memastikan tampilan indikator nilai tetap konsisten ketika digunakan bersama paragraf biasa, list, maupun elemen inline lainnya di dalam konten markdown.

Progress

70% digunakan untuk membantu testing elemen progress, tinggi komponen bawaan browser, alignment vertikal, serta rendering semantic HTML pada prose custom.

Selain itu, 45% dipakai untuk memastikan perubahan value, spacing antar elemen, dan perilaku rendering progress bar tetap stabil pada berbagai ukuran layar dan mode tema.

Inline quote

Ini kutipan pendek di dalam paragraf digunakan untuk membantu testing styling elemen inline quote, typography quotation mark bawaan browser, spacing inline, serta kompatibilitas rendering semantic HTML pada prose custom.

Selain itu, Kutipan inline yang sedikit lebih panjang seperti ini juga berguna untuk memastikan wrapping text, line-height, dan posisi tanda kutip tetap konsisten ketika digunakan bersama elemen markdown lain seperti strong, em, maupun inline code.

Variable

Rumus luas persegi: s² digunakan untuk membantu testing styling elemen variable, alignment superscript, typography matematika inline, serta kompatibilitas semantic HTML pada prose custom di berbagai ukuran layar dan mode tema.

Selain itu, contoh seperti x + y = z juga berguna untuk memastikan rendering elemen variable tetap konsisten ketika digunakan bersama inline code, strong text, maupun elemen markdown lainnya di dalam paragraf panjang.

Small text

Insert dan Delete

Ini teks ditambahkan dan ini teks dihapus. Contoh ini digunakan untuk membantu testing styling elemen insert dan delete, termasuk underline, strikethrough, spacing inline, serta konsistensi typography pada prose custom di berbagai ukuran layar dan mode tema.

Selain itu, kombinasi seperti konten baru yang lebih panjang untuk pengujian wrapping text dan konten lama yang sudah tidak digunakan lagi juga berguna untuk memastikan rendering semantic HTML tetap stabil ketika digunakan bersama strong text, inline code, maupun elemen markdown lainnya di dalam paragraf panjang.

Citation

Judul Buku atau Karya digunakan untuk membantu testing styling elemen citation, typography italic bawaan browser, spacing inline, serta kompatibilitas semantic HTML pada prose custom di berbagai ukuran layar dan mode tema.

Keyboard Input

Tekan Ctrl+C untuk menyalin. Contoh ini digunakan untuk membantu testing styling elemen keyboard input, border, shadow, spacing inline, serta konsistensi typography pada prose custom di berbagai ukuran layar dan mode tema.

Selain itu, kombinasi seperti Ctrl+Shift+P atau ⌘+K juga berguna untuk memastikan alignment, wrapping text, dan rendering elemen kbd tetap stabil ketika digunakan bersama paragraf biasa maupun elemen markdown lainnya.

Superscript dan Subscript

H₂O dan E = mc² digunakan untuk membantu testing alignment superscript dan subscript, typography matematika inline, spacing vertikal, serta kompatibilitas semantic HTML pada prose custom di berbagai ukuran layar dan mode tema.

Selain itu, contoh seperti CO₂, NH₃, dan x¹⁰ juga berguna untuk memastikan rendering elemen subscript maupun superscript tetap konsisten ketika digunakan bersama inline code, variable, atau elemen markdown lainnya di dalam paragraf panjang.

Definition List

Term 1

Definisi term 1 yang dibuat sedikit lebih panjang untuk membantu testing spacing, indentation, typography, dan alignment antara definition term dengan definition description pada prose custom.

Term 2

Definisi term 2 digunakan untuk memastikan rendering definition list tetap konsisten ketika memiliki konten multiline, wrapping text, maupun kombinasi elemen inline seperti strong, italic, dan inline code.

Bidirectional text

Ruby annotation

漢字かんじ digunakan untuk membantu testing rendering ruby annotation, alignment furigana, spacing vertikal, serta kompatibilitas semantic HTML pada prose custom di berbagai ukuran layar dan mode tema.

Selain itu, contoh seperti 東京とうきょう dan 日本語にほんご juga berguna untuk memastikan typography karakter Jepang, posisi annotation, dan wrapping text tetap konsisten ketika digunakan bersama paragraf biasa maupun elemen markdown lainnya.