Slide Markdown

Mengapa Markdown untuk Slide?

PowerPoint dan Keynote sangat baik dalam desain slide dan buruk dalam hampir segalanya. Sulit untuk dikontrol versinya, sulit di-diff, sulit diedit di ponsel, sulit dijaga konsistensinya di seluruh tim, dan tidak bisa di-grep. Markdown menyelesaikan «semua yang lain» tanpa mencoba bersaing dalam desain visual, dan untuk konten teknis (sampel kode, keluaran terminal, panduan command-line, daftar poin-poin) lebih cepat untuk dibuat daripada alat GUI mana pun.

Formatnya adalah teks biasa, sehingga ia hidup secara native di git, terbuka di editor mana pun, diedit di alat apa pun mulai dari VS Code hingga vim hingga aplikasi catatan di ponsel, dan bertahan selama 30 tahun pergantian perangkat lunak. Trade-off: Anda menyerahkan kontrol desain yang sempurna hingga piksel. Untuk all-hands developer, pembicaraan konferensi, deck walkthrough README, materi kelas, dan lightning talk, itu adalah trade yang sangat baik. Untuk pitch sales dan deck marketing, PowerPoint atau Figma mungkin masih menang.

Konvensi ---

Tiga tanda hubung di baris tersendiri adalah sintaks Markdown yang sudah ada untuk aturan horizontal, didefinisikan kembali di CommonMark dan digunakan ulang sebagai pemisah slide di seluruh ekosistem Markdown-slides, reveal.js, Marp, Slidev, dan sebagian besar alat yang lebih kecil semuanya menggunakannya. Konvensinya tidak ambigu (aturan horizontal nyata masih berfungsi di dalam satu slide; --- hanya memisahkan ketika berada di baris tersendiri) dan mudah diketik. Anda menulis deck sebagai satu dokumen Markdown berkelanjutan dan alat tersebut mensegmentasinya ulang secara visual.

Ekosistem Markdown-Slides pada 2026

• reveal.js (Hakim El Hattab, sejak 2011), library presentasi berbasis browser yang menjadi pelopor. Grid slide vertikal dan horizontal, transisi, catatan pembicara (sintaks Notes:), sumber Markdown melalui atribut data-markdown. Nama yang dikenal luas; slides.com menghostingnya sebagai SaaS.
• Marp: proyek Markdown-ke-slide khusus yang paling populer. Berbasis CommonMark, dilengkapi dengan CLI, ekstensi VS Code, dan Marp Core. Ekspor PDF yang sangat baik. Frontmatter untuk tema dan rasio aspek.
• Slidev (Anthony Fu), lebih baru (2021), berbasis Vue, modern. Dirancang untuk pembicaraan developer: penyorotan kode bawaan, penyematan kode di dalam slide, tampilan presenter, menggambar di slide saat berbicara.
• remark.js (Ole Petter Bang), minimal, embed file tunggal. Disukai karena tidak memaksakan opini.
• HackMD: varian pengeditan kolaboratif. Berbasis browser, memerlukan akun, sinkronisasi lintas perangkat.

Alat ini mengisi niche yang berbeda: tanpa instalasi, tanpa akun, tanpa unggahan. Tempel, presentasikan, tutup tab. Ini adalah pilihan yang tepat ketika Anda sedang mempersiapkan lightning talk 5 menit di laptop pinjaman, menyelesaikan slide di penerbangan, atau membuat draf di ruang rapat dan tidak ingin menjalankan Marp atau masuk ke slides.com.

Rasio Aspek Dijelaskan

Deck slide modern menggunakan 16:9 secara default, setiap proyektor konferensi yang dibuat dalam satu dekade terakhir adalah permukaan 16:9, dan 16:9 cocok dengan setiap layar laptop dan TV modern. Viewport di sini dirender 16:9 untuk menyesuaikan. Deck lama menggunakan 4:3 (aspek asli proyektor CRT); laptop lama terkadang menggunakan 16:10. Default PowerPoint telah 16:9 sejak versi 2013; Google Slides default ke 16:9 saat dibuat; default Keynote juga 16:9.

Kasus Penggunaan Umum

• All-hands developer dan hari demo. Pandu tim melalui perubahan kode, arsitektur baru, atau retrospektif insiden.
• Pembicaraan konferensi dan meet-up. Terutama pembicaraan untuk audiens teknis di mana deck membutuhkan sampel kode yang dapat di-diff dengan bersih dalam pull request.
• Walkthrough README. Intro 6 slide untuk sebuah library, disematkan dalam dokumentasi proyek.
• Lightning talk. Pembicaraan 5 menit, ~5 slide di mana formalitas adalah musuh.
• Materi kelas. Edit langsung slide saat mengajar; siswa dapat menyalin sumber Markdown untuk catatan mereka.
• Pelatihan internal. Deck orientasi yang diberi versi dan di-code-review bersama codebase yang mereka ajarkan.
• Brief pra-rapat. Pre-read 3 slide yang dikirim sebagai Markdown yang bisa di-preview penerima di editor mereka.

Prinsip Desain Slide yang Penting Bahkan di Markdown

• Satu ide per slide. Aturan klasik. Jika sebuah slide memiliki dua pemikiran, pisahkan.
• Lebih sedikit teks, lebih banyak struktur. Jika sebuah slide terbaca seperti paragraf, pembicara membacakan slide. Kurangi menjadi poin-poin dan biarkan pembicara mengisi prosanya.
• Font lebih besar dari yang Anda kira. Slide Markdown default ke teks isi sekitar setara 24-32 px. Apa pun di bawah ~18 px tidak terbaca dari belakang ruang konferensi.
• Satu H1 per slide. Beberapa heading tingkat teratas pada slide yang sama menciptakan kebingungan visual.
• Jaga blok kode tetap singkat. Enam baris adalah maksimum yang nyaman pada slide 16:9. Snippet yang lebih panjang perlu dibagi atau ditampilkan dengan bagian yang disorot.
• Pastikan setiap gambar memiliki tujuan. Foto stok sebagai dekorasi adalah pengisi. Diagram, screenshot, dan visualisasi data adalah sinyal.

Privasi

Deck slide seringkali bersifat rahasia, deck pitch, strategi internal, angka keuangan, demo produk sebelum peluncuran. Alat ini berjalan sepenuhnya di browser Anda: Markdown tetap di textarea, rendering terjadi secara lokal, dan presentasi layar penuh membaca dari state di memori yang sama. Tidak ada yang diunggah, tidak diperlukan akun, dan menutup tab menghapus segalanya. Alternatif yang dihosting server (slides.com, HackMD, GitPitch) memerlukan kepercayaan pada kebijakan penanganan data operatornya; yang ini menghilangkan pertanyaan tersebut sepenuhnya.

Kesalahan Umum

1. Menempel seluruh paragraf ke satu slide. Jika audiens membacanya, mereka tidak mendengarkan pembicara. Pecah menjadi poin-poin.
2. Level heading yang tidak konsisten. Satu slide dengan judul H1, berikutnya dengan H2, terlihat ceroboh. Pilih satu level untuk judul slide dan patuhi itu.
3. Blok kode terlalu panjang untuk proyektor. Snippet 30 baris tidak terbaca dari baris belakang. Tampilkan hanya 5-10 baris yang relevan, dengan sisanya diganti oleh // ....
4. Tidak ada catatan pembicara. Slide adalah alat bantu ingat audiens, bukan milik Anda. Catatan pembicara (di alat yang mendukungnya) menyimpan poin-poin pembicaraan.
5. Melupakan rasio aspek proyektor. Jika Anda membuat konten di laptop 16:10 dan venue menggunakan proyektor 4:3, konten terpotong.
6. Terlalu banyak transisi slide. Animasi antar slide terasa sempurna dalam demo dan menjemukan selama pembicaraan 30 menit. Default ke tanpa transisi atau fade sederhana.
7. Menggunakan font kreatif yang rusak di mesin venue. Tetap pada font sistem, sans-serif untuk isi, monospace untuk kode.

Pertanyaan yang Sering Diajukan Lainnya

Bisakah saya mengekspor slide sebagai PDF?

Ya, masuk ke mode layar penuh, lalu gunakan fungsi Print browser (Ctrl/Cmd + P) dan pilih Save as PDF. Sebagian besar browser mencetak slide yang dirender satu per halaman PDF. Hasilnya adalah PDF teks yang bersih (bukan gambar) sehingga kecil dan dapat dicari.

Bagaimana dengan penyorotan sintaks untuk kode?

Blok kode berpagar dirender dengan monospace dan latar belakang gelap ringan, yang membuatnya terbaca pada tema layar penuh yang gelap. Penyorotan sintaks per bahasa (kata kunci Python dengan satu warna, string dengan warna lain) memerlukan framework slide yang lebih lengkap seperti reveal.js atau Slidev. Untuk lightning talk yang cepat, hal itu jarang terasa kurang; untuk pembicaraan panjang yang banyak kode, alat tersebut lebih cocok.

Bagaimana cara menyematkan gambar?

Sintaks gambar Markdown standar: ![alt text](https://your-image-url.png). Gambar harus dapat diakses dari web publik (atau dari mesin lokal Anda melalui URL file://, tetapi URL file mungkin diblokir di beberapa browser). Untuk gambar sensitif, gunakan sintaks tautan Markdown ke file lokal yang Anda sajikan dari web server lokal kecil selama pembicaraan.

Apakah ini berfungsi secara offline?

Setelah halaman dimuat, ya, rendering Markdown dan navigasi slide berjalan secara lokal. Gambar eksternal tidak akan dimuat tanpa jaringan, jadi sematkan gambar sebagai data URI atau host secara lokal jika Anda akan mempresentasikan secara offline.

Bisakah saya menggunakan keyboard selama pembicaraan?

Ya, tombol panah / spasi maju, backspace kembali, Escape keluar dari layar penuh, F mengalihkan layar penuh. Sebagian besar remote presenter (remote nirkabel Logitech standar, dll.) mengemulasi tombol panah yang sama, sehingga bekerja tanpa konfigurasi.

Apakah ada yang dikirim ke server?

Tidak. Rendering Markdown, segmentasi slide, presentasi layar penuh, semuanya terjadi di browser Anda. Konten deck Anda tidak diunggah, dicatat, atau disimpan di mana pun di sisi server. Menutup tab menghapus konten textarea.