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.
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 shape | Recommended |
|---|---|
| Blog post simple, no interactivity | Markdown |
| Tutorial dengan code example | Markdown (or MDX kalau butuh syntax highlight component yang fancy) |
| Stack comparison dengan embedded calculator | MDX |
| Documentation kompleks (book-style) | AsciiDoc |
| Marketing landing page | None — pakai Astro/HTML langsung |
| Recipe/tutorial dengan step interactive | MDX |
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:
.mdfiles: built-in.mdxfiles: butuh@astrojs/mdxintegration
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