Konversi HTML ke Markdown online

Alasan umum beralih dari HTML ke Markdown

HTML adalah cara konten diterbitkan; Markdown adalah cara banyak konten ditulis dan disimpan. Konversi di antara keduanya dibutuhkan saat memindahkan blog dari WordPress atau CMS lain ke static site generator seperti Hugo, Jekyll, atau Astro, saat menyalin dokumentasi dari halaman intranet lama ke wiki berbasis Git, saat menyimpan artikel ke aplikasi catatan seperti Obsidian, atau saat menyiapkan konten web sebagai input bersih untuk skrip atau indeks pencarian. Markdown mempertahankan struktur yang bermakna, yaitu heading, penekanan, tautan, dan daftar, serta membuang markup presentasi yang membuat HTML sulit dibaca dan diedit.

Menjadi apa setiap elemen

Konversi berjalan saat Anda mengetik dan mengikuti seperangkat konvensi tetap, yang dipilih agar sesuai dengan yang diharapkan sebagian besar alat Markdown:

• <h1> hingga <h6> menjadi heading # hingga ######.
• <strong> dan <b> menjadi **tebal**; <em> dan <i> menjadi _miring_.
• <a href> menjadi [text](url), dengan atribut title dipertahankan jika ada. Tautan tanpa href menjadi teks biasa.
• <img> menjadi ![alt](src). File gambarnya sendiri tidak disentuh, jadi tautan menunjuk ke mana pun src aslinya menunjuk.
• Daftar <ul> memakai - sebagai poin, dan daftar <ol> diberi nomor.
• <pre><code> menjadi blok kode berpagar di antara tiga backtick. Class seperti language-python pada elemen code dipertahankan sebagai tag bahasa pada pagar, jadi syntax highlighting tetap berfungsi.
• <blockquote> menjadi baris yang diawali >, dan <hr> menjadi * * *.
• <br> menjadi dua spasi di akhir baris dan baris baru, cara Markdown menulis pemisah baris paksa.

Elemen yang tidak punya makna dalam Markdown, seperti <div>, <span>, dan <section>, dibuka bungkusnya: teksnya tetap ada dan tag-nya hilang. <script>, <style>, <noscript>, dan <iframe> dihapus beserta seluruh isinya, yang sekaligus membereskan kode pelacakan, widget tersemat, dan CSS inline.

Karakter yang mendapat backslash

Anda mungkin melihat backslash di hasil yang tidak ada di halaman, seperti 1\. Pendahuluan atau \*penting\*. Ini adalah escaping, dan memang benar. Jika sebuah paragraf di HTML diawali "1." diikuti spasi, menuliskannya polos di Markdown akan mengubahnya menjadi daftar bernomor. Tanda bintang, garis bawah, kurung siku, dan # di awal baris juga di-escape dengan alasan yang sama, agar Markdown yang dirender menampilkan teks persis seperti yang ditampilkan HTML.

Mendapatkan hasil bersih dari halaman web utuh

Konverter tidak menebak bagian mana dari halaman yang merupakan artikel. Menu navigasi, banner cookie, sidebar, dan footer hanyalah teks HTML biasa, jadi menempel seluruh source halaman akan ikut membawa semuanya. Untuk hasil yang bersih, berikan hanya konten yang Anda inginkan:

1. Buka halaman di browser, klik kanan baris pertama artikel, lalu pilih Inspect.
2. Di developer tools, cari elemen yang membungkus seluruh artikel, sering kali <article> atau <main>.
3. Klik kanan elemen itu, pilih Copy, lalu Copy outerHTML, dan tempel di sini.

Beberapa hal lain yang perlu diingat:

• Tautan relatif tetap relatif. Tautan seperti /blog/post-2 atau gambar src="img/photo.jpg" dikonversi apa adanya. Jika Markdown akan berada di situs lain, ganti dengan URL lengkap.
• HTML email dikonversi dengan buruk. Newsletter dibangun dari tabel tata letak bersarang, dan setiap <table> dikonversi menjadi tabel Markdown. Hasilnya satu tabel dengan seluruh bagian teks dijejalkan ke dalam sel. Salin isi dalam satu sel saja alih-alih seluruh email.
• Tabel hanya berisi teks. Setiap sel dikurangi menjadi teks biasanya, jadi tautan dan format di dalam sel hilang, dan baris pertama selalu menjadi baris header.
• Komentar HTML dibuang.

Memeriksa hasilnya

Cara tercepat memastikan konversi adalah merendernya kembali. Tempel Markdown ke Markdown ke HTML dan lihat pratinjaunya: heading, daftar, dan blok kode harus sesuai dengan struktur halaman asli. Jika Anda mengonversi file Word, bukan halaman web, gunakan DOCX ke Markdown, yang menerapkan aturan yang sama tetapi membaca .docx secara langsung. Tidak ada yang Anda tempel di sini yang diunggah; HTML diurai dan dikonversi oleh browser Anda.