HTML to Markdown

Apa itu Konversi HTML ke Markdown?

Konversi HTML ke Markdown mengubah markup HTML menjadi Markdown, sintaks pemformatan teks biasa yang ringan yang dibuat oleh John Gruber pada tahun 2004. Markdown dirancang agar mudah dibaca tanpa perlu di-render. HTML menggunakan tag pembuka dan penutup seperti <strong> dan <a href="">, sedangkan Markdown menggunakan karakter singkat: **tebal**, [tautan](url), dan # heading. Mengonversi HTML ke Markdown menghasilkan file yang lebih mudah dibaca, diedit, dan dikontrol versinya dibandingkan HTML mentah.

Proses konversi memetakan elemen HTML ke padanan Markdown-nya. Tag <h2> menjadi ##, elemen <ul><li> menjadi - item, dan tag <a> menjadi [teks](url). Beberapa elemen HTML tidak memiliki padanan langsung di Markdown, seperti <div>, <span>, atau atribut data kustom. Konverter biasanya menghapus tag-tag ini atau meneruskannya sebagai HTML mentah, tergantung konfigurasi.

Markdown telah menjadi format penulisan standar untuk dokumentasi developer (GitHub, GitLab, Bitbucket), static site generator (Hugo, Jekyll, Astro), aplikasi catatan (Obsidian, Notion), dan blog teknis. Mengonversi konten HTML yang sudah ada ke Markdown adalah langkah umum saat migrasi website, mengimpor konten CMS, atau mengarsipkan halaman web dalam format yang portabel. Berbeda dengan HTML, file Markdown menghasilkan diff yang bersih dalam version control, sehingga tinjauan kode untuk perubahan dokumentasi menjadi lebih praktis.

Mengapa Menggunakan Konverter HTML ke Markdown?

Menulis ulang HTML sebagai Markdown secara manual membutuhkan waktu lama dan rawan kesalahan, terutama untuk halaman dengan daftar bertingkat, tabel, atau puluhan tautan. Konverter otomatis menangani pemetaan struktur secara instan dan konsisten.

Kasus Penggunaan HTML ke Markdown

Referensi Elemen HTML ke Markdown

Tabel di bawah menunjukkan bagaimana elemen HTML umum dipetakan ke padanan Markdown-nya. Pemetaan ini mengikuti konvensi GitHub-Flavored Markdown (GFM), yang memperluas spesifikasi CommonMark dengan tabel, strikethrough, dan daftar tugas. Elemen yang tidak tercantum di sini (seperti <div>, <form>, atau web component kustom) tidak memiliki padanan Markdown dan akan dihapus atau diteruskan sebagai HTML mentah.

Varian Markdown: GFM vs CommonMark vs Original

Tidak semua Markdown sama. Format output penting karena berbagai platform mengurai Markdown secara berbeda. Tiga varian yang paling umum adalah GitHub-Flavored Markdown (GFM), CommonMark, dan Markdown original karya Gruber.

Contoh Kode

Contoh praktis dalam JavaScript (Turndown), Python (markdownify dan html2text), Go, dan Pandoc di command line.

import TurndownService from 'turndown'

const turndown = new TurndownService({ headingStyle: 'atx' })
const html = '<h1>Title</h1><p>A <strong>bold</strong> paragraph.</p>'
const md = turndown.turndown(html)
console.log(md)
// → "# Title\n\nA **bold** paragraph."

from markdownify import markdownify

html = '<h2>Section</h2><ul><li>First</li><li>Second</li></ul>'
md = markdownify(html, heading_style='ATX')
print(md)
# → "## Section\n\n- First\n- Second"

import html2text

converter = html2text.HTML2Text()
converter.body_width = 0  # disable line wrapping

html = '<p>Visit <a href="https://example.com">Example</a> for details.</p>'
md = converter.handle(html)
print(md)
# → "Visit [Example](https://example.com) for details."

package main

import (
	"fmt"
	md "github.com/JohannesKaufmann/html-to-markdown"
)

func main() {
	converter := md.NewConverter("", true, nil)
	html := `<h3>Go Example</h3><p>Code: <code>fmt.Println()</code></p>`
	markdown, _ := converter.ConvertString(html)
	fmt.Println(markdown)
	// → "### Go Example\n\nCode: `fmt.Println()`"
}

# Convert an HTML file to Markdown
pandoc input.html -f html -t markdown -o output.md

# Pipe HTML from stdin
echo '<p>Hello <em>world</em></p>' | pandoc -f html -t markdown
# → Hello *world*

# Use GitHub-Flavored Markdown output
pandoc input.html -f html -t gfm -o output.md

Pertanyaan yang Sering Diajukan