Pratinjau Markdown

Ketik di sebelah kiri, lihat HTML dirender di sebelah kanan. Pratinjau ini memahami Markdown ala GitHub: tabel, daftar tugas, blok kode berpagar dengan penyorotan sintaks, coret, URL yang ditautkan otomatis, dan HTML inline. Berguna untuk menyusun README sebelum commit, memeriksa tampilan komentar pada sebuah PR, atau sekadar mempelajari sintaks Markdown dengan melihat setiap ketikan dirender.

Cara menggunakan pratinjau

  1. 1

    Tulis Markdown

    Panel kiri menerima Markdown mentah. Setiap perubahan langsung merender ulang panel kanan.

  2. 2

    Lihat pratinjau HTML

    Panel kanan menampilkan hasil render dengan gaya seperti GitHub.

  3. 3

    Ganti mode

    Tampilan berdampingan, hanya pratinjau, atau hanya sumber untuk menulis tanpa gangguan.

  4. 4

    Salin HTML

    Ambil HTML hasil render jika Anda perlu menempelkannya ke aplikasi email atau CMS.

Fitur yang didukung pratinjau ini

  • CommonMark: judul, paragraf, penekanan, daftar, kutipan blok, blok kode, tautan, gambar, garis horizontal.
  • Ekstensi GFM: tabel dengan perataan kolom, daftar tugas (- [ ] dan - [x]), coret dengan ~~, URL yang ditautkan otomatis, serta blok kode berpagar dengan petunjuk bahasa.
  • Penyorotan sintaks: lebih dari 100 bahasa melalui highlight.js, JavaScript, Python, Go, Rust, SQL, YAML, dan lainnya.
  • HTML mentah: HTML inline diteruskan (dibersihkan demi keamanan).
  • Matematika (opsional): $...$ inline dan $$...$$ blok jika Anda mengaktifkan ekstensi matematika.

Tidak didukung

  • Wikilink kustom bergaya Obsidian ([[Page]]), hanya untuk Obsidian.
  • Div berpagar milik Pandoc (:::), hanya untuk Pandoc.
  • Penyertaan sisi server (server-side includes) atau tag templat {% ... %}.

Penggunaan umum

  • Menyusun README di luar IDE lalu menempelkan versi finalnya.
  • Memeriksa format komentar PR sebelum memposting, kotak komentar GitHub tidak menampilkan pratinjau blok kode dengan benar.
  • Mengubah catatan menjadi HTML saat Anda perlu menempelkan konten bergaya ke email atau CMS yang menerima HTML mentah.
  • Mengajarkan Markdown, tampilan berdampingan membuat sintaks menjadi jelas.

Kinerja

Proses render menggunakan parser Markdown-it dengan plugin GFM dan berjalan sepenuhnya di peramban. Dokumen berukuran beberapa ratus KB dirender dalam hitungan milidetik; dokumen yang sangat besar (satu buku utuh dalam satu file) mungkin tersendat saat Anda mengetik, jika demikian, pecahlah menjadi bab-bab.

Ekspor

  • Salin HTML memberi Anda <div> berisi konten hasil render beserta kelas-kelas gayanya.
  • Unduh .md menyimpan sumbernya.
  • Cetak ke PDF dari dialog cetak peramban menghasilkan salinan PDF bergaya dari tampilan hasil render.

Pertanyaan yang Sering Diajukan

GitHub menerapkan CSS-nya sendiri di atas GFM. Keluaran HTML seharusnya cocok; gayanya (font, jarak) adalah milik GitHub. Untuk kesamaan yang persis, gunakan pengalih tema “dirender di GitHub”.

Ya, jika Anda mengaktifkan ekstensi matematika, $...$ inline dan $$...$$ blok dirender dengan KaTeX. Fitur ini nonaktif secara bawaan agar bobot halaman tetap ringan.

Dibersihkan, tag aman seperti <div>, <span>, <table>, <img> diteruskan; <script> dan penangan peristiwa inline dihapus.

Ratusan KB berjalan lancar. Untuk file yang sangat besar, matikan render langsung dan render sesuai permintaan.

Proses render sepenuhnya di sisi klien. Konten tidak dikirim ke mana pun. Jika Anda menyegarkan halaman, draf akan hilang kecuali peramban mempertahankan status formulir.

Alat Terkait

Alat ini tersedia dalam bahasa lain