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

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

Markdown เป็นรูปแบบข้อความน้ำหนักเบาที่ใช้เครื่องหมายวรรคตอนน้อยที่สุด (# สำหรับ headings, * สำหรับการเน้น, - สำหรับรายการ) เพื่อเข้ารหัสร้อยแก้วที่มีโครงสร้าง GitHub Flavored Markdown (GFM) ขยายข้อกำหนด CommonMark ดั้งเดิมด้วย tables, strikethrough, task lists และ autolinks ส่วน HTML คือรูปแบบที่ render และเบราว์เซอร์แสดง การแปลง Markdown เป็น HTML ช่วยให้คุณเขียนด้วยไวยากรณ์เบา ๆ และส่งออกไปยังพื้นผิวที่ render ได้ — README, หน้า static-site, เนื้อหาอีเมล — โดยไม่ต้องเขียนแท็กด้วยมือ

ฟีเจอร์ GitHub Flavored Markdown ใดบ้างที่รองรับ?

ตัวแยกวิเคราะห์ marked@12.0.2 ที่มาพร้อมเครื่องมือรองรับ superset GFM เต็มรูปแบบ: headings สไตล์ ATX จาก # ถึง ######, ordered และ unordered lists ที่ซ้อนได้, ตัวหนา **text** และตัวเอียง *text*, strikethrough ~~text~~, inline links [text](url) และ inline images ![alt](src), fenced code blocks พร้อม language tag ที่เลือกได้ (```js), inline code spans `code`, pipe tables พร้อม header rows, GFM task lists - [ ] / - [x], blockquotes >, horizontal rules --- และ autolinks แต่ละรายการแสดงผลในแผง preview เหมือนกับที่ GitHub render

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

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

1. Parse: marked.parse(source) อ่าน Markdown ของคุณและสร้างสตริง HTML ตัวแยกวิเคราะห์ทำงานในโหมด GFM ดังนั้น tables, task lists, strikethrough และ autolinks ทั้งหมดจะถูกรู้จัก
2. Sanitize: ผลลัพธ์ HTML ผ่าน DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) ก่อนถูกกำหนดให้ innerHTML DOMPurify เป็น XSS sanitizer ตัวเดียวกับที่ Mozilla MDN, Atlassian และ Microsoft 365 ใช้ — มันแยกวิเคราะห์ HTML เดินใน DOM และลบ <script> elements, attribute event handler on* ทุกตัว และ URI scheme javascript:
3. Render: HTML ที่ sanitize แล้วถูกเขียนไปยัง preview pane ผ่าน innerHTML ส่วน HTML ดิบถูกแสดงในแผงที่สองผ่าน <textarea> แบบอ่านอย่างเดียว เพื่อให้คุณคัดลอก markup ได้ โหมดสดจะ debounce อินพุต 150 ms เพื่อให้ตัวอย่างอัปเดตขณะพิมพ์โดยไม่ทำให้ parser ทำงานหนักเกินไป

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

• ความเป็นส่วนตัว: ทุก parse, sanitize และ render เกิดขึ้นในเบราว์เซอร์ของคุณ Markdown — รวมถึงบล็อกโพสต์ที่ยังไม่เผยแพร่ ดราฟต์เอกสารภายใน และเนื้อหา README ที่เป็นความลับ — ไม่เคยเข้าถึงเซิร์ฟเวอร์ของเรา
• ปลอดภัยจาก XSS โดยค่าเริ่มต้น: preview pane ที่ render ส่งสตริง HTML ทุกตัวผ่าน DOMPurify ก่อน innerHTML ดังนั้นแท็ก <script> หรือ handler onerror= ที่แทรกอยู่ใน raw HTML ภายใน Markdown จะได้ preview ที่ไม่ทำงาน แผงดิบแสดงผลลัพธ์ที่ไม่ sanitize เพื่อการตรวจสอบ แต่อยู่ภายใน <textarea> ผ่าน value — ไม่เคยถูก execute
• GFM ครบถ้วน: tables, strikethrough, task lists และ autolinks ทั้งหมด render เหมือนกับที่ GitHub render Markdown pipe-table แปลงเป็น HTML <table> ที่มี <thead> และ <tbody> — ไม่มีแถวหาย ไม่มีโครงสร้างที่ถูกทำให้แบน

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

การแปลง Markdown เป็น HTML ปรากฏในเอกสาร การทำงาน static-site และการเขียนอีเมล:

• การเขียน README บน GitHub: ร่าง README ของโปรเจ็กต์ในเครื่องเป็น Markdown และพรีวิว HTML ที่ render ก่อน push พรีวิวจะตรงกับ renderer GFM ของ GitHub สำหรับ tables, task lists และ fenced code
• เนื้อหา static-site: วาง Markdown post และนำ HTML ไปใช้กับ CMS field หรือ templating engine ที่ต้องการ markup แทน Markdown source
• เทมเพลตอีเมล: เขียนเนื้อหาอีเมลธุรกรรมเป็น Markdown และแปลงเป็น HTML สำหรับ templating engine ของผู้ให้บริการอีเมล ผลลัพธ์เป็น HTML ที่สื่อความหมายล้วน — ไม่มี inline styles ไม่มีลูกเล่นของ email client เพิ่มเติม

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

การวาง # Title\n\n- item 1\n- item 2\n\n[link](https://example.com) สร้าง preview pane ที่ประกอบด้วย <h1>Title</h1>, unordered list สองรายการ และ <a href="https://example.com">link</a> แผงดิบแสดง HTML string ที่ถูกต้องเพื่อให้คุณคัดลอกไปใส่ใน template ได้โดยตรง pipe table ที่มี alignment row |---|---| แปลงเป็น <table> ครบถ้วนที่มี <thead> และ <tbody> — ยืนยันว่า GFM tables render เหมือนกับที่ GitHub render

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

ใช่ ทุก parse, sanitize และ render ทำงานในเครื่องเป็น JavaScript ภายในแท็บเบราว์เซอร์ของคุณ ไลบรารีสองตัวที่มาพร้อมเครื่องมือ — marked@12.0.2 และ DOMPurify@3.1.7 — ถูกส่งจาก origin เดียวกับหน้าเว็บ ดังนั้นไม่มีการพึ่งพา CDN, ไม่มี fetch, ไม่มี XMLHttpRequest, ไม่มี navigator.sendBeacon บนอินพุต เครื่องมือยังทำงานออฟไลน์เมื่อหน้าโหลดแล้ว เพราะเป็นบันเดิล HTML/CSS/JS แบบสแตติกที่มีไลบรารี vendor วางอยู่ข้าง ๆ โพสต์ที่ยังไม่เผยแพร่ เอกสารภายใน และ READMEs ที่เป็นความลับยังคงอยู่บนอุปกรณ์ของคุณ

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 และ CSS expressions อันตรายที่รู้จัก การวาง <img src=x onerror=alert(1)> สร้าง preview ที่ document.querySelector('#output-preview img[onerror]') คืนค่า null และไม่มี alert ใดทำงาน

tables GFM รองรับหรือไม่?

ใช่ ทิศทาง Markdown → HTML จัดการ pipe tables แบบเนทีฟผ่านโหมด GFM ของ marked — header row คั่นด้วย alignment row |---|---| ตามด้วย data rows สร้าง <table> ที่มี <thead> + <tbody> Strikethrough (~~text~~ → <del>text</del>) และ task lists (- [ ] / - [x] → <input type="checkbox">) render เหมือนกับที่ GitHub render

Markdown ของฉันจะแปลงโดยไม่สูญเสียข้อมูลหรือไม่?

สำหรับชุดฟีเจอร์ 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 มีความเสถียรและตรงกับ renderer ของ GitHub สิ่งที่ควรรู้บางประการ: raw inline HTML ภายใน Markdown (เช่น <sub>text</sub>) ผ่านไปยังผลลัพธ์โดยไม่เปลี่ยนแปลง และ CommonMark setext headings (ขีดล่าง ===) กับ ATX headings (# Title) ทั้งคู่สร้าง <h1> เดียวกัน สิ่งเหล่านี้เป็นพฤติกรรม marked ที่บันทึกไว้ ไม่ใช่ bug หากต้องการทิศทางย้อนกลับ — ดึง HTML ที่ render แล้วกลับเป็น Markdown — ใช้เครื่องมือ HTML to Markdown

การไฮไลต์ 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 ที่ทำได้

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