ตัวแปลง HTML เป็น Markdown — แปลง HTML เป็น Markdown ออนไลน์ _

การแปลง HTML เป็น Markdown คืออะไร?

HTML คือ markup ที่ render แล้วซึ่งเบราว์เซอร์แสดง — <h1>, <ul>, <table>, <a> และอื่น ๆ Markdown เป็นรูปแบบข้อความน้ำหนักเบาที่ใช้เครื่องหมายวรรคตอนน้อยที่สุด (# สำหรับ headings, * สำหรับการเน้น, - สำหรับรายการ) เพื่อเข้ารหัสโครงสร้างเดียวกัน GitHub Flavored Markdown (GFM) ขยายข้อกำหนด CommonMark ดั้งเดิมด้วย tables, strikethrough, task lists และ autolinks การแปลง HTML เป็น Markdown ดึง HTML ที่ render หรือ export แล้วกลับมาเป็น Markdown ข้อความธรรมดาที่แก้ไขได้ — สิ่งที่จำเป็นสำหรับการ migrate เนื้อหาจาก CMS หรือการ cleanup README

ผลลัพธ์รองรับฟีเจอร์ GitHub Flavored Markdown ใดบ้าง?

เครื่องมือ turndown@7.2.0 ที่มาพร้อมกับ extension turndown-plugin-gfm ส่งออก superset GFM เต็มรูปแบบจาก HTML ของคุณ: headings สไตล์ ATX จาก # ถึง ###### จาก <h1>–<h6>, ordered และ unordered lists ที่ซ้อนได้, ตัวหนา **text** และตัวเอียง *text*, strikethrough ~~text~~ จาก <del>, inline links [text](url) และ inline images ![alt](src), fenced code blocks พร้อม language hints (```js), inline code spans `code`, pipe tables จาก <table>, GFM task lists - [ ] / - [x] จาก checkbox inputs, blockquotes > และ horizontal rules --- preview pane re-render Markdown ที่ส่งออกด้วย marked@12.0.2 เพื่อให้คุณยืนยันการแปลงด้วยสายตา

การแปลง HTML เป็น Markdown ทำงานอย่างไร?

ทุกการแปลงทำงานภายในเบราว์เซอร์ของคุณโดยใช้ไลบรารีที่มาพร้อมเครื่องมือสามตัว — ไม่มี CDN ไม่มี fetch ไม่มี telemetry ขั้นตอนหลักคือ:

1. Sanitize: HTML ที่วางเข้ามาผ่าน DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) ก่อน เพื่อลบ <script> elements, attribute event handler on* ทุกตัว และ URI javascript: ก่อนที่สิ่งใดจะสำรวจ markup DOMPurify เป็น XSS sanitizer ตัวเดียวกับที่ Mozilla MDN, Atlassian และ Microsoft 365 ใช้
2. Convert: turndownService.turndown เดินใน DOM ที่ทำความสะอาดแล้วและส่งออก GitHub Flavored Markdown — headings กลายเป็น prefix #, lists กลายเป็น item - / 1., <table> กลายเป็น pipe table และอื่น ๆ Markdown ถูกเขียนไปยัง <textarea> output แบบ read-only ผ่าน value (ไม่ใช่ innerHTML) จึงปลอดภัยโดยธรรมชาติ
3. Render: Markdown ที่ส่งออกถูก re-parse โดย marked.parse, sanitize อีกครั้งผ่าน DOMPurify, และกำหนดให้ innerHTML ของ preview pane เพื่อให้คุณได้รับการยืนยันด้วยสายตาว่า Markdown round-trip กลับสู่โครงสร้างที่คาดหวัง Live mode debounce อินพุต 150 ms เพื่อให้ผลลัพธ์อัปเดตขณะวางโดยไม่ทำให้ parser ทำงานหนักเกินไป

ทำไมต้องแปลง HTML เป็น Markdown ด้วยเครื่องมือนี้?

• ความเป็นส่วนตัว: ทุก sanitize, แปลง และ render เกิดขึ้นในเบราว์เซอร์ของคุณ HTML — รวมถึงโพสต์ CMS ที่ export ออกมา เอกสารภายใน และซอร์สโค้ดหน้าเว็บที่เป็นความลับ — ไม่เคยเข้าถึงเซิร์ฟเวอร์ของเรา
• ปลอดภัยจาก XSS โดยค่าเริ่มต้น: HTML ที่วางเข้ามาผ่าน DOMPurify ก่อนที่ turndown จะสำรวจ และ preview pane ส่ง HTML ที่ re-rendered ผ่าน DOMPurify อีกครั้งก่อน innerHTML ดังนั้นการวาง markup ที่มีแท็ก <script> หรือ handler onerror= จะได้ preview ที่ไม่ทำงานและ Markdown ที่สะอาด
• GFM ครบถ้วน: elements <table> แปลงเป็น Markdown pipe tables, <del> เป็น strikethrough, และ checkbox lists เป็น GFM task lists ตัวแปลงออนไลน์ส่วนใหญ่ทิ้ง tables ในเส้นทาง HTML → Markdown — extension turndown-plugin-gfm ที่มาพร้อมเครื่องมือรักษาไว้

การใช้งานทั่วไปของการแปลง HTML เป็น Markdown มีอะไรบ้าง?

การแปลง HTML เป็น Markdown ปรากฏในการ migrate เนื้อหา การทำเอกสาร และการเก็บถาวร:

• Migration CMS: ส่งออกโพสต์ WordPress หรือ Ghost เป็น HTML และแปลงเป็น Markdown สำหรับ rebuild static-site ด้วย Hugo / Jekyll / 11ty / Astro การแปลงรักษาระดับ heading, links, lists และ inline emphasis ไว้
• Cleanup README: วาง HTML ที่ render แล้วของหน้า wiki หรือบทความเว็บและดึงกลับมาเป็น Markdown ที่แก้ไขได้สำหรับ project README หรือ docs site — แทนที่จะพิมพ์โครงสร้างซ้ำด้วยมือ
• การเก็บถาวรและบันทึก: จับ HTML email หรือ web clipping และแปลงเป็น Markdown สำหรับจัดเก็บใน Obsidian, Notion หรือ knowledge base ข้อความธรรมดา — Markdown ยังคง diff-friendly และรอดพ้นจากการเปลี่ยนรูปแบบ

ตัวอย่างการแปลง HTML เป็น Markdown เป็นอย่างไร?

การวาง <h2>Heading</h2><ul><li>a</li><li>b<ul><li>nested</li></ul></li></ul> สร้าง Markdown ที่มี ## Heading, bullet list ซ้อน และ preview pane ที่ render กลับเป็นโครงสร้างซ้อนเดียวกัน การวาง <table> ที่มี header row และ data rows สองแถวสร้าง pipe table | col | col | ที่เท่าเทียม — ยืนยันว่าการแปลงรักษา headings, lists และ tables ไว้

ตัวแปลง HTML เป็น Markdown นี้ทำงานในเบราว์เซอร์ของฉันทั้งหมดหรือเปล่า?

ใช่ ทุก sanitize, แปลง และ render ทำงานในเครื่องเป็น JavaScript ภายในแท็บเบราว์เซอร์ของคุณ ไลบรารีสามตัวที่มาพร้อมเครื่องมือ — turndown@7.2.0 (พร้อม turndown-plugin-gfm@1.0.2), marked@12.0.2 และ DOMPurify@3.1.7 — ถูกส่งจาก origin เดียวกับหน้าเว็บ ดังนั้นไม่มีการพึ่งพา CDN, ไม่มี fetch, ไม่มี XMLHttpRequest, ไม่มี navigator.sendBeacon บนอินพุต เครื่องมือยังทำงานออฟไลน์เมื่อหน้าโหลดแล้ว โพสต์ที่ export ออกมา เอกสารภายใน และซอร์สโค้ดหน้าเว็บที่เป็นความลับยังคงอยู่บนอุปกรณ์ของคุณ

preview pane ที่ render ปลอดภัยจาก XSS หรือไม่?

ใช่ ทุกสตริง HTML ที่ถูกกำหนดให้ innerHTML ผ่าน DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) ก่อน DOMPurify เป็น XSS sanitizer โอเพนซอร์สที่ดูแลโดย Cure53 มันเป็นไลบรารีเดียวกับที่ Mozilla MDN, Atlassian และ Microsoft 365 ใช้เพื่อ harden HTML ที่ผู้ใช้ส่งมา profile html เริ่มต้นลบ <script> elements, attribute event-handler on* ทุกตัว (onerror, onclick เป็นต้น), URI scheme javascript: ภายใน href / src การวาง <img src=x onerror=alert(1)> สร้าง preview ที่ document.querySelector('#output-preview img[onerror]') คืนค่า null และไม่มี alert ใดทำงาน

tables GFM ถูกแปลงจาก HTML หรือไม่?

ใช่ ทิศทาง HTML → Markdown ใช้ turndown-plugin-gfm ซึ่งเพิ่มกฎ turndown ที่กำหนดเองที่เดินบน <table> nodes และปล่อย pipe-table Markdown ที่เท่ากัน — header row, alignment row |---|---| แล้ว data rows ตัวแปลงออนไลน์ส่วนใหญ่ทิ้ง tables ในเส้นทางนี้ ตัวนี้รักษาไว้ Strikethrough (<del>text</del> → ~~text~~) และ task lists (<input type="checkbox"> → - [ ] / - [x]) แปลงในลักษณะเดียวกัน

HTML ของฉันจะแปลงได้อย่างสะอาดหรือไม่?

สำหรับชุดฟีเจอร์ GFM มาตรฐาน — headings h1 ถึง h6, ordered และ unordered lists ที่ซ้อน, bold / italic / strikethrough, inline links, inline images, fenced code blocks พร้อม language tags, inline code spans, pipe tables, task lists, blockquotes, horizontal rules และ autolinks — การแปลงจะสะอาดและคาดเดาได้ กรณีขอบ: HTML comments (<!-- ... -->) ถูกตัดออก (Markdown ไม่มี comment syntax); inline styling และ class attributes ถูกทิ้งเพราะ Markdown ไม่มีเทียบเท่า; และ inline tags ที่ไม่ธรรมดาเช่น <sub> / <sup> ถูกแปลงเป็น plain text สิ่งเหล่านี้เป็นพฤติกรรม turndown ที่บันทึกไว้ ไม่ใช่ bug

การไฮไลต์ syntax ใน fenced code blocks รองรับหรือไม่?

ไม่ใน v1 fenced code blocks render ด้วยฟอนต์ monospace และพื้นหลังจาง ๆ แต่ไม่มีการไฮไลต์ token ต่อภาษา การเพิ่มการไฮไลต์ syntax จะต้อง bundle Prism หรือ highlight.js แต่ละตัวเพิ่ม 15–40 KB บวกกับไฟล์ grammar ต่อภาษาและ matrix theme ที่ต้องสอดคล้องกับ palette Workshop Terminal ตอนนี้ renderer มุ่งเน้นที่ความถูกต้องและความปลอดภัยจาก XSS หากมีความต้องการจากผู้ใช้สำหรับ inline highlighting toggle opt-in เป็น follow-up ที่ทำได้

ตัวแปลง HTML เป็น Markdown นี้มาพร้อม turndown@7.2.0 (+ turndown-plugin-gfm@1.0.2), marked@12.0.2 และ DOMPurify@3.1.7 ที่บันเดิลที่ origin เดียวกัน ส่งออกชุดฟีเจอร์ GFM เต็มรูปแบบ และ sanitize ทุกสตริง HTML ที่ render ก่อนแตะ DOM ไม่มีการอัปโหลด ไม่มี CDN ไม่มี telemetry — ทุกไบต์อยู่ในเบราว์เซอร์ของคุณ