← Semua picks

Format Compare Recommended

MDX vs Markdown vs AsciiDoc untuk content site

3 format markup untuk content site. Markdown = simplest, MDX = embed React component, AsciiDoc = power-user. Pick tergantung content complexity.

16 Mei 2026 · 6 menit
MDXMarkdownAsciiDoc

TL;DR

  • Markdown: Recommended untuk most content site SMB Indonesia
  • MDX: Recommended kalau Anda butuh interactive component dalam article
  • AsciiDoc: Skip kecuali Anda dari tech writing background (DocBook lineage)

Konteks

Format yang saya pakai untuk content site:

  • Markdown (.md): default untuk most pick + post
  • MDX (.mdx): untuk artikel yang butuh interactive demo (calculator, embedded chart, tab)
  • AsciiDoc: pernah eksperimen, kembali ke Markdown

Markdown

Pro

  • Simplest syntax: 30-menit learning curve
  • Universal: every static site generator support
  • Tool ecosystem matang: VS Code preview, lint (markdownlint), format (Prettier)
  • AI-friendly: ChatGPT/Claude generate Markdown excellently
  • Source-control friendly: plain text, git diff clean

Con

  • No component embed: tidak bisa embed React/Vue/Astro component
  • Limited semantic: heading, paragraph, list, link, code, image — that’s it
  • Variant fragmentation: CommonMark vs GitHub Flavored vs Pandoc — subtle differences

Example

# Bun vs Node performance

Bun is **2-3x faster** at HTTP request handling.

## Benchmark

| Runtime | RPS |
|---------|-----|
| Bun     | 142K |
| Node    | 76K |

See [official benchmark](https://bun.sh/docs/runtime) for detail.

MDX

Pro

  • Markdown + JSX: embed any component
  • Static + interactive: pre-render at build, hydrate component selectively
  • Variable interpolation: import data, use in content
  • Astro/Next.js native support

Con

  • More complex: harus tahu JSX
  • Slower build: parsing + bundling component per article
  • Source-control noisier: JSX in content kadang awkward di review
  • Editing tool less mature: most CMS tidak handle MDX

Example

import BenchmarkChart from '~/components/BenchmarkChart.astro';

# Bun vs Node performance

Bun is **2-3x faster** at HTTP request handling.

<BenchmarkChart data={[
  { runtime: 'Bun', rps: 142000 },
  { runtime: 'Node', rps: 76000 },
]} />

## Detail
...

Powerful untuk interactive content (calculator, comparison widget, demo).

AsciiDoc

Pro

  • Powerful syntax: includes, conditionals, table-of-contents auto-generation
  • Strong semantic: untuk technical doc, AsciiDoc lebih ekspresif
  • Output flexible: HTML, PDF, EPUB
  • Used by major project: Linux kernel docs, AsciiDoctor.org

Con

  • Steeper learning curve: 2-3 jam untuk fluent
  • Smaller ecosystem: less tool support dari Markdown
  • AI integration kurang: ChatGPT generate AsciiDoc less reliable
  • Overkill untuk most SMB content

Example

= Bun vs Node performance

Bun is *2-3x faster* at HTTP request handling.

== Benchmark

[cols="2,1"]
|===
| Runtime | RPS

| Bun
| 142K

| Node
| 76K
|===

See https://bun.sh/docs/runtime[official benchmark] for detail.

Lebih verbose. Power feature seperti include::other-file.adoc[] tidak ada di Markdown.

Decision matrix

Content shapeRecommended
Blog post simple, no interactivityMarkdown
Tutorial dengan code exampleMarkdown (or MDX kalau butuh syntax highlight component yang fancy)
Stack comparison dengan embedded calculatorMDX
Documentation kompleks (book-style)AsciiDoc
Marketing landing pageNone — pakai Astro/HTML langsung
Recipe/tutorial dengan step interactiveMDX

Konteks Indonesia

Untuk SMB Indonesia 2026:

  • 90% content site cukup dengan Markdown
  • MDX masuk akal untuk tech tutorial dengan demo interactive
  • AsciiDoc hampir tidak relevan untuk SMB

Astro support

Astro 6 native support:

  • .md files: built-in
  • .mdx files: butuh @astrojs/mdx integration
bun add @astrojs/mdx
// astro.config.mjs
import mdx from '@astrojs/mdx';

export default defineConfig({
  integrations: [mdx()],
});

After install: .mdx files work in src/pages/ and src/content/ same as .md.

Yang surprising

Saya thought MDX akan jadi default untuk dev blog. Reality: 80% post saya cukup pakai Markdown. MDX overhead (component import, JSX parsing) tidak worth untuk content yang flat.

MDX shine untuk specific use case: interactive demo, custom code block (e.g., live editable), embedded data viz. Untuk static prose + code: Markdown more efficient.

Verdict

Recommended:

  • Markdown untuk default content site SMB Indonesia
  • MDX untuk specific interactive content (tutorial dengan demo)

Skip:

  • AsciiDoc untuk SMB Indonesia (overkill)

Hindari:

  • Mix-and-match MDX di banyak file kalau Anda tidak actively pakai component (clean syntax matter)
  • Custom format yang non-standard

Ditulis oleh Asti Larasati

// Pick Format Compare lain


← Semua picks RSS feed