Pratinjau Markdown

Preview dan editor Markdown online gratis — dengan Mermaid & LaTeX

Markdown preview ini merender teks Anda secara langsung, berdampingan, begitu Anda mengetik. Tulis di editor sebelah kiri dan hasil terformatnya langsung muncul di kanan — heading, bold, italic, tabel, checklist, code block, diagram Mermaid, dan matematika KaTeX semuanya dirender seketika. Ini adalah editor Markdown online dan Markdown viewer yang sepenuhnya gratis, tanpa pendaftaran, tanpa batas, dan tidak perlu instalasi apa pun.

Karena semuanya berjalan di browser Anda, alat ini juga benar-benar privat: teks Anda diproses lokal dan auto-save ke perangkat Anda sendiri, tidak pernah diunggah ke server. Itu membuatnya lebih cepat dan lebih privat dibanding editor cloud seperti StackEdit, HackMD, atau Dillinger.io untuk pekerjaan Markdown sehari-hari — dan tetap bisa dipakai offline setelah halaman dimuat. Tanpa akun, tanpa langganan, tanpa perlu penyimpanan cloud.

GitHub-Flavored Markdown, dirender seperti yang Anda harapkan

Previewer ini mendukung GitHub-Flavored Markdown (GFM), sehingga tabel, checklist, coret teks, autolink, dan code block dengan syntax highlighting dirender sama persis seperti di README GitHub. Ketik tabel pipe atau checklist - [x] dan hasilnya langsung tampil terformat di sebelah kanan — preview README GitHub yang andal untuk siapa pun yang menulis dokumentasi, issue, atau deskripsi pull request.

Toolbar pemformatan menambahkan bold, italic, coret teks, inline code, heading, bullet list, numbered list, dan checklist, kutipan, link, gambar, tabel, code block, dan garis pembatas dengan satu klik. Shortcut keyboard (Ctrl+B, Ctrl+I, Ctrl+K, Ctrl+F) bekerja persis seperti di editor desktop. Hitungan kata, karakter, dan waktu baca yang langsung diperbarui, daftar isi (table of contents) yang dibuat otomatis dari heading Anda, cari & ganti, serta beberapa mode tampilan (hanya editor, split, hanya preview, layar penuh) menjaga proses menulis tetap nyaman di layar berapa pun ukurannya.

Diagram Mermaid, matematika LaTeX, dan kode dengan syntax highlighting

Di sinilah alat ini unggul dibanding previewer sederhana. Tempelkan blok ```mermaid dan flowchart, sequence diagram, class diagram, Gantt chart, atau pie chart Anda langsung dirender sebagai SVG yang menyesuaikan mode terang dan gelap. Preview Markdown bawaan VS Code membutuhkan ekstensi 'Markdown Preview Mermaid Support' untuk melakukan ini — di sini langsung bekerja tanpa setelan tambahan. Dillinger.io dan demo Marked.js dasar sama sekali tidak mendukung Mermaid.

Tulis inline $E = mc^2$ atau blok $$\int_0^\infty e^{-x^2} dx$$ dan matematika LaTeX langsung dituliskan (typeset) dengan KaTeX — tanpa MathJax, tanpa permintaan jaringan, tanpa jeda. Code block diberi warna oleh highlight.js untuk 180+ bahasa pemrograman dengan tema bergaya GitHub. Renderer yang lebih berat ini hanya dimuat ketika dokumen Anda benar-benar memakainya, sehingga halaman tetap cepat untuk teks polos.

Alternatif tanpa instalasi untuk VS Code, Typora, Dillinger, StackEdit, dan Obsidian

Jika Anda biasa memakai preview Markdown VS Code (Ctrl+Shift+V) atau tampilan split di sampingnya (Ctrl+K V), halaman ini melakukan hal yang sama tanpa perlu membuka editor. Ideal ketika Anda memakai komputer tanpa VS Code, hanya butuh pengecekan render cepat, atau preview VS Code Anda belum dikonfigurasi untuk Mermaid maupun matematika. Mode edit seamless Typora memang unik dan elegan tapi berbayar $14,99 — alat ini gratis dan tidak butuh instalasi.

StackEdit mendukung KaTeX dan Mermaid tapi membutuhkan akun sinkronisasi cloud untuk fitur workspace. HackMD adalah platform kolaborasi yang kuat tapi menyimpan dokumen di server mereka dengan akses publik secara default dan membutuhkan login untuk sebagian besar fitur. Obsidian unggul untuk pencatatan yang saling terhubung tapi merupakan aplikasi terinstal dengan format vault-nya sendiri. Notion membutuhkan akun dan memakai editor berbasis blok, bukan Markdown standar. Alat ini memberi Anda Mermaid + KaTeX + GFM + ekspor dalam satu halaman yang langsung dimuat, dengan privasi penuh dan tanpa akun.

Ekspor ke PDF, HTML, atau Markdown — dan bagikan dengan URL

Ketika dokumen sudah siap, bawa ke mana saja. Ekspor ke PDF mencetak halaman yang sudah dirender — termasuk diagram Mermaid, matematika KaTeX, dan kode yang di-highlight — menjadi file memakai print API browser, dengan CSS cetak bersih yang menghapus elemen antarmuka. Download .html menyimpan halaman web mandiri dengan style yang sudah inline; Download .md menyimpan sumbernya. Anda juga bisa menyalin HTML hasil render yang bersih, atau menyalin sebagai rich text untuk ditempel terformat ke Gmail, Google Docs, atau Notion.

Perlu mengirimkannya ke seseorang? Share mengubah seluruh dokumen menjadi tautan (dikompresi dengan LZ-string) dan menyalin URL-nya ke clipboard. Buka tautan itu dan teksnya langsung dimuat kembali ke editor — tanpa akun, tanpa server, tanpa unggahan. Karena kontennya berada di dalam URL itu sendiri, berbagi menjadi instan dan privat. Editor cloud seperti StackEdit dan HackMD menyimpan dokumen Anda di server mereka untuk membuat link berbagi; alat ini menyimpannya di dalam URL itu sendiri, sebuah perbedaan privasi dan keandalan yang berarti.

Output aman, auto-save, dan privasi total

Melihat preview Markdown dari sumber eksternal — file yang diunduh, ekspor komentar, konten rekan kerja — seharusnya tidak berisiko. Setelah diproses, alat ini membersihkan HTML hasil render dengan DOMPurify, menghapus tag script, event handler inline, dan URL javascript: sebelum menampilkan apa pun. Preview-nya menampilkan konten Anda secara akurat tapi aman dari cross-site scripting (XSS). Kebanyakan previewer online sederhana sama sekali tidak melakukan sanitasi — alat ini tidak demikian.

Semuanya diperbarui seketika saat Anda mengetik. Draf Anda auto-save ke local storage sehingga menutup tab tidak akan menghilangkan pekerjaan Anda. Anda bisa tempel atau seret gambar langsung ke editor untuk menyematkannya. Tanpa pendaftaran, tanpa unggahan, tanpa pelacakan. Untuk menulis draf dokumentasi, mem-preview README, merender Mermaid dan matematika, mengonversi Markdown ke HTML dan PDF yang bersih, atau sekadar melihat tampilan sebuah cuplikan sebelum dipublikasikan — preview Markdown langsung ini menyelesaikan seluruh pekerjaan itu dalam satu halaman yang cepat, privat, dan bisa dipakai offline.

Sejarah dan filosofi Markdown

John Gruber dan Aaron Swartz menciptakan Markdown pada 2004. Gruber mempublikasikan format ini di blognya Daring Fireball dan mendefinisikan filosofi intinya: format penulisan teks polos yang meniru cara orang sudah menulis email dan prosa informal, lalu dikonversi bersih menjadi XHTML yang valid. Tujuan desainnya sengaja minimalis — tanda kurung siku dan entitas HTML seharusnya jarang muncul dalam prosa, dan teks sumbernya harus tetap terbaca tanpa perlu dirender terlebih dahulu. Swartz menyumbangkan implementasi Perl awal, sebuah skrip sepanjang kira-kira 1.500 baris bernama Markdown.pl. Implementasi itu mendefinisikan sintaksis lewat contoh, bukan tata bahasa formal, yang berdampak panjang.

Gruber tetap memegang kepemilikan nama dan spesifikasi Markdown dan tidak pernah secara resmi menyerahkan keduanya ke badan standar mana pun. Seiring adopsinya meledak — menyebar dari blogging ke alat dokumentasi, code forge, dan platform pesan — para pengembang menemukan ambiguitas di spesifikasi asli dan mengisi celah itu dengan cara berbeda-beda, menghasilkan proliferasi dialek yang tidak kompatibel satu sama lain. Pada 2012 fragmentasinya sudah cukup parah sehingga Jeff Atwood (salah satu pendiri Stack Overflow) dan ahli bahasa sekaligus programmer John MacFarlane mulai mengerjakan spesifikasi formal yang tidak ambigu. Upaya itu diluncurkan secara publik pada 2014 dengan nama CommonMark — sebuah tata bahasa lengkap dengan ribuan kasus uji yang mencakup setiap kasus tepi (edge case) dalam spesifikasi asli. CommonMark tidak menggantikan Markdown; ia menjadi baseline yang saling interoperabel dan kini diterapkan oleh sebagian besar parser modern, dari renderer GitHub hingga parser yang tertanam di VS Code dan Obsidian.

GitHub membangun supersetnya sendiri di atas CommonMark bernama GitHub Flavored Markdown (GFM). GFM menambahkan empat ekstensi yang tidak ada di CommonMark: tabel pipe (dengan perataan kolom lewat titik dua), item checklist (- [ ] dan - [x]), coret teks dengan dua tilde (~~teks~~), dan code block berpagar dengan info string untuk syntax highlighting. Karena GitHub menjadi rumah bagi file README, issue, pull request, wiki, dan thread diskusi mayoritas proyek open-source di dunia, GFM secara efektif menjadi dialek Markdown dominan untuk penulisan yang menyasar developer — itulah sebabnya previewer ini mendukungnya sebagai bawaan default.

Perbandingan dialek Markdown: CommonMark, GFM, MultiMarkdown, Pandoc, R Markdown, dan MDX

Spesifikasi Markdown.pl asli tahun 2004 adalah nenek moyang bersama tapi kini jarang dipakai langsung, karena ambiguitasnya berarti dua implementasi yang sama-sama patuh bisa berbeda hasil untuk input yang sama. CommonMark adalah penerus yang distandarkan: ia menyelesaikan semua ambiguitas yang diketahui dengan tata bahasa formal, memiliki implementasi referensi kanonis (cmark, ditulis dalam C), dan kini menjadi basis parsing Markdown di GitHub, GitLab, Discourse, dan banyak platform lain. CommonMark sengaja minimalis — ia hanya menetapkan apa yang sudah dicakup Markdown asli, meninggalkan ekstensi seperti tabel dan checklist ke lapisan khusus dialek. GitHub Flavored Markdown (GFM) menambahkan ekstensi-ekstensi itu di atas CommonMark dan juga dipakai oleh Bitbucket serta banyak sistem CI yang merender dokumentasi repositori. MultiMarkdown (MMD), dikembangkan oleh Fletcher Penney, mendahului CommonMark dan menambahkan fitur yang masih belum dimiliki CommonMark: footnote, definition list, tabel pipe (yang kemudian memengaruhi GFM), dukungan sitasi, dan cross-reference — membuatnya populer dalam alur kerja penulisan akademik dan tulisan panjang.

Markdown Pandoc adalah dialek terlengkap yang dipakai secara luas. Karena Pandoc adalah pengonversi dokumen universal (Markdown → LaTeX → PDF, Markdown → DOCX, Markdown → EPUB, dan puluhan jalur lain), Markdown miliknya perlu membawa metadata level dokumen serta fitur yang tidak dimiliki CommonMark biasa. Pandoc menambahkan footnote, sitasi lewat BibTeX atau CSL, matematika LaTeX, atribut kustom pada blok atau elemen inline apa pun ({.class #id key=value}), definition list, example list, dan LaTeX atau HTML mentah — pada dasarnya semua yang dibutuhkan untuk menulis makalah akademik lengkap dalam Markdown. R Markdown (Rmd) mengambil dimensi berbeda: alih-alih memperluas sintaksis, ia menyematkan chunk kode R yang dieksekusi ketika dirender, menganyam output kode (tabel, plot, hasil konsol) langsung ke dalam dokumen. Dikembangkan di RStudio (kini Posit), R Markdown menggerakkan dokumen riset yang reproducible, laporan data science, dan notebook interaktif; penerusnya Quarto menggeneralisasi konsep yang sama ke Python, Julia, dan Observable. MDX melangkah lebih jauh lagi, menggantikan model prosa-plus-kode dengan prosa-plus-React: file .mdx mana pun adalah Markdown valid di mana tag JSX diproses sebagai elemen kelas satu, memungkinkan komponen React hidup berdampingan dengan teks Markdown. Gatsby dan ekosistem dokumentasi Next.js banyak memakai MDX, dan framework Astro yang menjadi fondasi situs ini mendukung MDX secara native bersama koleksi kontennya sendiri.

Memilih dialek bergantung pada target output Anda. Untuk dokumentasi yang berada di GitHub atau code forge, GFM adalah pilihan yang tepat — konten Anda akan dirender identik di deskripsi pull request, file README, dan halaman wiki tanpa konfigurasi tambahan. Untuk situs statis yang dibangun di atas Jekyll, Hugo, Astro, atau Gatsby, prosesor Markdown situs tersebut (sering CommonMark atau Remark) menentukan ekstensi apa saja yang tersedia; frontmatter YAML di antara pembatas --- berlaku universal di semua generator ini terlepas dari dialek mana yang mereka pakai untuk isi teks. Untuk penerbitan akademik atau konversi ke DOCX dan PDF, Markdown Pandoc adalah pilihan yang praktis karena model dokumen Pandoc jauh lebih lengkap memetakan ke format-format itu dibanding dialek berorientasi web mana pun. Previewer ini menyasar titik manis GFM/CommonMark — dialek yang paling banyak ditulis para developer sehari-hari — dan menambahkan matematika KaTeX serta diagram Mermaid sebagai ekstensi kelas satu.

Markdown dalam tooling developer: static site generator, platform dokumentasi, dan manajemen pengetahuan

Markdown menjadi format konten native untuk arsitektur Jamstack — pola pre-rendering HTML statis saat build dari repositori Git dan menyajikannya lewat CDN, tanpa server origin. Dalam model Jamstack, file Markdown adalah lapisan konten, Git adalah CMS-nya, dan static site generator adalah alat build-nya. Jekyll, generator berbasis Ruby yang dipakai GitHub Pages sebagai default, mempopulerkan front matter YAML (blok metadata yang dibatasi --- di bagian atas setiap file .md) dan membuktikan bahwa situs dokumentasi atau blog bisa dibangun sepenuhnya dari sekumpulan file teks tanpa database sama sekali. Hugo, ditulis dalam Go, mendorong batas performa lebih jauh — build puluhan ribu file Markdown selesai dalam hitungan detik — dan memperkenalkan shortcode, mekanisme ekstensi berbasis template milik Hugo untuk menyematkan konten dinamis di dalam Markdown. Gatsby dan Next.js membawa model komponen React ke static generation, memungkinkan konten Markdown dikueri lewat GraphQL atau API sistem file dan dirender di dalam layout React interaktif. Astro, framework yang menggerakkan situs ini, memperluas model itu dengan arsitektur island-nya: file Markdown dan MDX dirender sebagai HTML tanpa JavaScript secara default, dengan island interaktif opsional untuk komponen yang membutuhkannya — memberikan performa konten sekelas file statis dengan interaktivitas framework komponen di tempat yang benar-benar dibutuhkan.

Di ranah tooling dokumentasi, Markdown sama dominannya. Docusaurus (dikelola Meta/Facebook) adalah framework di balik situs dokumentasi React, Create React App, dan Jest — ia menggabungkan halaman Markdown/MDX dengan versioning, pencarian, dan i18n secara bawaan. MkDocs dengan tema Material adalah pilihan utama untuk dokumentasi proyek Python, menghasilkan situs statis cepat dari sekumpulan file Markdown dengan konfigurasi YAML. GitBook dan Notion sama-sama menawarkan impor dan ekspor Markdown sambil menyediakan lapisan pengeditan visual yang lebih kaya di atasnya. Confluence mendukung paste Markdown sebagai mode input. Konsekuensi praktisnya, menguasai Markdown berarti tulisan Anda portabel ke hampir semua platform dokumentasi yang umum dipakai — dokumen yang ditulis dalam CommonMark/GFM standar bisa dipublikasikan di GitHub Pages, Netlify, Vercel, Confluence, Notion, dan GitBook dengan pemformatan ulang yang minimal atau bahkan tanpa perlu sama sekali.

Di luar dokumentasi, Markdown telah menjadi substrat untuk alat manajemen pengetahuan pribadi (PKM). Obsidian menyimpan setiap catatan sebagai file .md polos di dalam folder vault lokal, membuat catatan mudah dicadangkan, dikendalikan versinya dengan Git, dan diproses dengan skrip eksternal. Ekstensi khasnya adalah sintaksis wiki-link ([[Judul Catatan]]) untuk menautkan catatan berdasarkan nama tanpa perlu tahu path filenya — pola yang diwarisi Obsidian dari Roam Research dan Foam. Foam adalah ekstensi VS Code yang membawa penautan catatan berbasis graf [[wiki-link]] yang sama ke sekumpulan file Markdown langsung di dalam editor, tanpa biaya dan tanpa format file proprietary. Kedua alat ini menunjukkan keunggulan utama membangun sesuatu di atas Markdown: karena catatan adalah file teks polos, Anda bisa berpindah alat, menulis skrip kustom, atau membuka seluruh basis pengetahuan Anda di editor teks standar kapan saja. Portabilitas Markdown bukan sekadar kenyamanan — untuk basis pengetahuan berumur panjang yang mungkin Anda rawat selama bertahun-tahun atau puluhan tahun, itu adalah alasan terpenting untuk memilihnya ketimbang format proprietary.