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