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..

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, nibh sed commodo tristique, augue lacus facilisis nisl, sed vulputate velit nunc eget erat. Quote ini dibuat lebih panjang untuk membantu proses testing typography, spacing, wrapping text, dan rendering multiline pada component admonition quote.

Bima Akbar Author

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.

c0desk1

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.

Seseorang

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

Kode

console.log("line 1") console.log("line 2") console.log("line 3") console.log("line 4")console.log("line 5") 

---// Astro component exampleconst title = "Markdown Testing"; ---<section class="space-y-4">  <h2>{title}</h2>  <p>     Semua syntax markdown dan prose sedang diuji.  </p></section>

console.log("line 1") console.log("line 2") console.log("line 3") console.log("line 4")console.log("line 5") 

/* src/styles/prose/code.css */.prose code:not(pre code) {  @apply text-code-14;  padding: 0.2em 0.45em;  font-weight: 500;  background-color: var(--prose-code-bg);  color: var(--prose-code-text);  border: 1px solid var(--prose-code-border);  border-radius: var(--prose-radius-md);  white-space: break-spaces;  }.prose h1 code,.prose h2 code,.prose h3 code,.prose h4 code,.prose summary code {  background: transparent;  border: none;  padding: 0;  color: inherit;}.prose a code {  color: inherit;}.prose pre {  padding: 1.25rem 1.5rem;  margin: 0 !important;  position: relative;  overflow-x: auto;  background: var(--prose-code-bg) !important;  scrollbar-width: thin;  scrollbar-color: var(--prose-border-strong) transparent;}.prose pre::-webkit-scrollbar { height: 4px; }.prose pre::-webkit-scrollbar-track { background: transparent; }.prose pre::-webkit-scrollbar-thumb { background: var(--prose-border-strong); border-radius: var(--prose-radius-full);}.prose pre[data-lang]::before {  content:        attr(data-lang);  position:       absolute;  top:            10px;  right:          14px;  text-transform: uppercase;  pointer-events: none;  user-select:    none;  color:          var(--prose-fg-dim);}.prose pre code {  @apply text-code-14;}.prose .code-block-wrapper {  margin: 2.5rem 0;  overflow-x: auto;  overflow:       hidden;  border-radius: var(--prose-radius-lg);  border: 1px solid var(--prose-code-border);  background: var(--prose-code-bg) !important;}.prose .code-block-header {  display:         flex;  align-items:     center;  justify-content: space-between;  gap:             0.5rem;  padding:         0.25rem 0.65rem;  border-bottom:   1px solid var(--prose-code-border);  background:      var(--prose-code-header-bg) !important;}.prose .mac-controls {  padding-right: 0.5rem;}.prose .mac-dot {  width: 8px;  height: 8px;  border-radius: 50%;  border: 1px solid rgba(0, 0, 0, 0.15); }.prose .mac-dot.close {  background-color: #ff5f56;}.prose .mac-dot.minimize {  background-color: #ffbd2e;}.prose .mac-dot.maximize {  background-color: #27c93f;}.dark .prose .mac-dot {  border-color: rgba(255, 255, 255, 0.1);}.prose .code-block-title {  @apply text-label-14;  color:          var(--prose-fg-strong);  white-space:    nowrap;  overflow:       hidden;  text-overflow:  ellipsis;  min-width:      0;}.prose .code-diff-legend {  display:     flex;  align-items: center;  gap:         0.25rem;}.prose .diff-tag {  @apply text-label-14;  padding:        0.3rem;  border-radius:  var(--prose-radius-sm);}.prose .diff-tag.add    {   color: var(--prose-code-diff-add-text) !important;   background: var(--prose-code-diff-add-bg) !important; }.prose .diff-tag.remove {   color: var(--prose-code-diff-remove-text) !important;   background: var(--prose-code-diff-remove-bg) !important; }.prose .copy-button {  display:         flex;  align-items:     center;  justify-content: center;  flex-shrink:     0;  border-radius:   var(--prose-radius-md);  cursor:          pointer;  transition:      all var(--prose-duration) var(--prose-ease-out);  opacity:         0;  color:           var(--prose-fg-muted);}.prose pre:hover .copy-button,.prose .code-block-wrapper:hover .copy-button,.prose .copy-button:focus-visible {   opacity: 1; }.prose .copy-button:hover {  color: var(--prose-fg-strong);}@media (hover: none) {  .prose .copy-button { opacity: 1; }}.prose .code-content {  margin: 0;  overflow-x: auto;  border-radius: 0;  border-style: none;  background: var(--prose-code-bg) !important;  scrollbar-width: thin;  scrollbar-color: var(--prose-border-strong) transparent;}.prose .code-content::-webkit-scrollbar        { height: 4px; }.prose .code-content::-webkit-scrollbar-track  { background: transparent; }.prose .code-content::-webkit-scrollbar-thumb  { background: var(--prose-border-strong); border-radius: 2px; }.prose .code-content pre {  @apply text-code-14;  border: none;  margin: 0;  border-radius: 0;  background-color: transparent !important;  overflow-x: visible;  white-space: pre;  word-break: normal;  word-wrap: normal;  padding:          1.125rem 1.25rem;}.prose .code-content pre code {  white-space: pre !important;}.prose pre.line-numbers {  counter-reset:  line;  padding-left:   3.5rem;}.prose pre.line-numbers .line {  position:       relative;  counter-increment: line;}.prose pre.line-numbers .line::before {  @apply text-code-14;  content:        counter(line);  position:       absolute;  top:            0;  bottom:         0;  height:         100%;  left:           -3.5rem;  width:          2.75rem;  text-align:     right;  color:          var(--prose-code-number);   user-select:    none;  pointer-events: none;  padding-right:  0.75rem;  border-right:   1px solid var(--prose-code-border); }.prose pre.line-numbers .line.diff-add::before,.prose pre.line-numbers .line.diff-remove::before {  left: -3.5rem; }.prose pre .line.highlighted,.prose pre .line.diff-add,.prose pre .line.diff-remove {  display: block;  @apply text-code-14;  margin-inline: -1.25rem;  padding-inline: 1.25rem;}.prose pre .line.highlighted {  background: var(--prose-code-line-highlighted-bg) !important;   border-left: 3px solid var(--prose-code-line-highlighted-border) !important; }.prose pre .line.diff-add {  background: var(--prose-code-line-add-bg) !important;  border-left: 3px solid var(--prose-code-line-add-border) !important; }.prose pre .line.diff-remove {  background: var(--prose-code-line-remove-bg) !important;  border-left: 3px solid var(--prose-code-line-remove-border) !important; }.prose pre .line.diff-add::before {  @apply text-label-14;  content: "+";  position: absolute;  left: 0.35rem;  color: var(--prose-code-diff-add-text) !important;  user-select: none;}.prose pre .line.diff-remove::before {  @apply text-label-14;  content: "−";  position: absolute;  left: 0.35rem;  color: var(--prose-code-diff-remove-text) !important;  user-select: none;}.prose pre.line-numbers .line.highlighted,.prose pre.line-numbers .line.diff-add,.prose pre.line-numbers .line.diff-remove {  margin-left: -3.5rem;   padding-left: 3.5rem; }.prose pre.line-numbers .line.highlighted::before,.prose pre.line-numbers .line.diff-add::before,.prose pre.line-numbers .line.diff-remove::before {  left: 0 !important;  z-index: 2;}.dark .astro-code {  background-color: var(--prose-code-bg) !important;  overflow-x: auto;}.dark .astro-code span {  background-color: transparent !important;  color: var(--shiki-dark) !important;  white-space: pre;  word-break: normal;  word-wrap: normal;}@media (max-width: 767px) {  .prose code:not(pre code) {    padding: 0.15em 0.3em;  }  .prose .code-block-wrapper {    margin:        1.75rem 0;  }  .prose pre {    padding: 1.5rem 1rem;    margin: 1.5rem 0;    border-radius: var(--prose-radius-sm);  }  .prose .code-content pre {    padding: 1rem 0.875rem;  }  .prose pre.line-numbers {    padding-left: 3.125rem;  }  .prose pre.line-numbers .line::before {    left:  -3.125rem;    width: 2.375rem;    padding-right: 0.5rem;  }  .prose pre.line-numbers .line.highlighted,  .prose pre.line-numbers .line.diff-add,  .prose pre.line-numbers .line.diff-remove {    margin-left: -3.125rem;    padding-left: 3.125rem;  }  .prose pre.line-numbers .line.highlighted::before,  .prose pre.line-numbers .line.diff-add::before,  .prose pre.line-numbers .line.diff-remove::before {    left: 0 !important;  }  .prose .copy-button { opacity: 1; }}

// JavaScript examplefunction testMarkdown() {  console.log("Semua sintaks markdown siap diuji");  const items = ["markdown", "syntax", "testing"];  return items.map((item) => ({    name: item,    active: true,  }));}

// TypeScript exampletype User = {  id: number;  name: string;  active: boolean;};const user: User = {  id: 1,  name: "Bima Akbar",  active: true,};export function getUser(): User {  return user;}

// React TSX exampletype ButtonProps = {  label: string;};export function Button({ label }: ButtonProps) {  return (    <button className="rounded-lg border px-4 py-2">      {label}    </button>  );}

<!-- HTML example --><section class="card">  <h2>Testing HTML</h2>  <p>    Contoh HTML untuk menguji styling prose custom.  </p></section>

/* CSS example */.prose code {  font-size: 14px;  border-radius: 6px;  padding: 0.2rem 0.4rem;}

{  "name": "markdown-test",  "version": "1.0.0",  "private": true,  "scripts": {    "dev": "astro dev"  }}

name: markdown-testingon:  push:    branches:      - mainjobs:  build:    runs-on: ubuntu-latest

# Bash examplenpm installnpm run devgit status

# Python exampledef test_markdown():    print("Markdown syntax siap diuji")    return {        "success": True    }

<?phpfunction testMarkdown() {    return "Semua syntax markdown siap diuji";}echo testMarkdown();

-- SQL exampleSELECT  id,  title,  published_atFROM postsORDER BY published_at DESC;

# Markdown example- Item pertama- Item kedua- Item ketiga

Gambar

https://c0desk1.my.id

Gambar dengan caption

https://c0desk1.my.id

File Tree

Horizontal Rule

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bagian ini digunakan untuk membantu testing spacing sebelum elemen horizontal rule, termasuk margin atas, vertical rhythm, dan konsistensi typography pada prose custom.

. . .

…

Suspendisse potenti. Bagian setelah horizontal rule ini digunakan untuk memastikan margin bawah, separator visibility, dan transisi visual antar section tetap terlihat rapi pada berbagai ukuran layar dan mode tema.

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.

Callout

STEPS

Timeline

Details

Changelog

Badge

Ini adalah NEW badge yang digunakan untuk membantu testing styling inline badge, termasuk background color, padding, border radius, spacing inline, serta konsistensi typography pada prose custom di berbagai ukuran layar dan mode tema.

Selain itu, UPDATED badge juga digunakan untuk memastikan rendering elemen inline highlight tetap stabil ketika berada di dalam paragraf panjang, bersama elemen markdown lain seperti strong, italic, dan inline code.