การกระจายตัวของภาษา Markdown

CommonMark, GFM, MultiMarkdown และ MDX แตกต่างกันในตาราง เชิงอรรถ รายการงาน และคณิตศาสตร์ เลือกภาษาถิ่นและตัวเรนเดอร์ที่รองรับอย่างชัดเจนเพื่อหลีกเลี่ยงความแตกต่างในการเรนเดอร์อย่างน่าประหลาดใจ

XSS ผ่านอินไลน์ HTML ใน Markdown

ตัวเรนเดอร์ส่วนใหญ่อนุญาตให้ใช้ raw HTML เป็นค่าเริ่มต้น ดังนั้น Markdown ที่ผู้ใช้ระบุจึงสามารถแทรก ได้ กำหนดค่าตัวเรนเดอร์เพื่อฆ่าเชื้อ (เช่น DOMPurify) หรือปิดใช้งาน raw HTML สำหรับอินพุตที่ไม่น่าเชื่อถือ

ความไวของช่องว่าง

Markdown จะยุบบรรทัดที่อยู่ติดกันให้เป็นหนึ่งย่อหน้า เว้นแต่จะคั่นด้วยบรรทัดว่าง และเยื้องบล็อคโค้ดด้วยช่องว่าง 4 ช่อง การคัดลอกและวางจากโปรแกรมแก้ไขที่มีรูปแบบสมบูรณ์มักจะทำให้บรรทัดว่างหายไปและทำให้โครงสร้างเสียหาย

ไม่มีโครงสร้างความหมาย

## ของ Markdown คือ แต่ไม่มีความหมายใดเกินกว่าระดับ สำหรับการนำทางที่เข้าถึงได้ ( ) บทความ ( ) และด้านข้าง ( ) คุณต้องมี HTML wrappers รอบเอาต์พุต Markdown

Markdown เทียบกับ HTML: ควรใช้แบบใดสำหรับเนื้อหา?

การแนะนำ

Markdown เป็นภาษา markup น้ำหนัก map ไป subset เล็กของ HTML HTML เป็นภาษา markup เว็บเต็มรูปแบบ Markdown เน้น source ที่อ่านได้แปลงเป็น HTML; HTML เน้นควบคุม output ที่ render ไม่ใช่คู่แข่งแต่เป็นเครื่องมือต่าง abstraction —renderer Markdown ส่วนใหญ่ output HTML

ทีละขั้นตอน

เปรียบเทียบความสามารถในการอ่านแหล่งที่มา

แหล่งที่มาของ Markdown ใกล้เคียงกับข้อความธรรมดา: **ตัวหนา**, *ตัวเอียง*, # หัวเรื่อง, - รายการ HTML แหล่งที่มาเป็นแบบละเอียด: <strong>ตัวหนา</strong>, <em>ตัวเอียง</em>, <h1>ส่วนหัว</h1>, <ul><li>...</li></ul> สำหรับร้อยแก้ว Markdown นั้นอ่านและแก้ไขได้ง่ายกว่ามากในโปรแกรมแก้ไขข้อความธรรมดา
เปรียบเทียบการแสดงออก

Markdown ครอบคลุม ~20% ของ HTML: ส่วนหัว ย่อหน้า รายการ การเน้น ลิงก์ รูปภาพ บล็อกโค้ด บล็อกคำพูด HTML ครอบคลุม 100%: แบบฟอร์ม, ตารางที่มี rowspan/colspan, แท็กความหมาย (<article>, <nav>, <aside>), คุณลักษณะของข้อมูล, SVG ที่ฝังไว้, สคริปต์ เมื่อคุณต้องการสิ่งที่ Markdown ขาด คุณสามารถเลื่อนไปที่ HTML แบบอินไลน์หรือสลับไปที่ HTML ทั้งหมด
เปรียบเทียบเส้นโค้งการเรียนรู้

ไวยากรณ์มาร์กดาวน์พอดีกับหน้าเดียวและสามารถเรียนรู้ได้ภายใน 10 นาที HTML มีองค์ประกอบ คุณลักษณะ และโมเดล DOM ประมาณ 140 รายการ ซึ่งเป็นเส้นโค้งที่ชันกว่าแต่ยังคงเข้าถึงได้ สำหรับนักเขียนที่ไม่ใช่ด้านเทคนิค (PM, นักการตลาด, เจ้าหน้าที่สนับสนุน) Markdown คือชัยชนะที่ชัดเจน
เปรียบเทียบการเรนเดอร์และการพกพา

ต้องเรนเดอร์มาร์กดาวน์เป็น HTML (หรือรูปแบบอื่น) เพื่อแสดงในเบราว์เซอร์ การเรนเดอร์ทำได้โดยไลบรารี เช่น ทำเครื่องหมาย ข้อสังเกต หรือ CommonMark HTML แสดงผลโดยตรงในเบราว์เซอร์ใดก็ได้โดยไม่มีขั้นตอนการสร้าง Markdown สามารถพกพาไปยังรูปแบบเอาต์พุตได้หลายรูปแบบ (HTML, PDF, EPUB, docx); HTML ใช้ได้เฉพาะเว็บเท่านั้นโดยไม่มีการแปลง
ตัดสินใจตามกรณีการใช้งานของคุณ

เอกสารประกอบ README แชท ความคิดเห็น โพสต์บล็อก: Markdown หน้าการตลาด, UI แบบโต้ตอบ, เทมเพลตอีเมล, ตารางที่ซับซ้อน, โครงสร้างความหมาย: HTML หลายระบบ (GitHub, Notion, เครื่องมือสร้างไซต์แบบคงที่) ยอมรับ Markdown พร้อม HTML แบบฝัง เพื่อสิ่งที่ดีที่สุดทั้งสองอย่าง

ตัวอย่าง

ตัวหนาและตัวเอียง

ป้อนข้อมูล: Markdown: **bold** and *italic* | HTML: <strong>bold</strong> and <em>italic</em>

เอาท์พุต: แสดงผลทั้งสองแบบ: ตัวหนาและตัวเอียง

หัวเรื่องที่มีลิงก์

ป้อนข้อมูล: Markdown: ## [FreeOnlineTools](https://freeonlinetoolsgo.com) | HTML: <h2><a href="https://freeonlinetoolsgo.com">FreeOnlineTools</a></h2>

เอาท์พุต: Both render as an <h2> containing a clickable link to freeonlinetoolsgo.com

ตาราง —Markdown เทียบกับ HTML

ป้อนข้อมูล: Markdown: | A | B |\n|---|---|\n| 1 | 2 | | HTML: <table><tr><th>A</th><th>B</th></tr><tr><td>1</td><td>2</td></tr></table>

เอาท์พุต: ทั้งคู่เรนเดอร์ตาราง 2x2 HTML จำเป็นสำหรับ colspan, rowspan หรือเซลล์ที่มีสไตล์

สิ่งที่ Markdown ไม่สามารถทำได้ - การป้อนแบบฟอร์ม

ป้อนข้อมูล: HTML: <input type="email" placeholder="you@example.com">

เอาท์พุต: Markdown ไม่มีไวยากรณ์สำหรับการควบคุมแบบฟอร์ม คุณต้องใช้ HTML ในบรรทัด หรือเปลี่ยนไปใช้ HTML ทั้งหมด

ปัญหาทั่วไป

การกระจายตัวของภาษา Markdown: CommonMark, GFM, MultiMarkdown และ MDX แตกต่างกันในตาราง เชิงอรรถ รายการงาน และคณิตศาสตร์ เลือกภาษาถิ่นและตัวเรนเดอร์ที่รองรับอย่างชัดเจนเพื่อหลีกเลี่ยงความแตกต่างในการเรนเดอร์อย่างน่าประหลาดใจ
XSS ผ่านอินไลน์ HTML ใน Markdown: ตัวเรนเดอร์ส่วนใหญ่อนุญาตให้ใช้ raw HTML เป็นค่าเริ่มต้น ดังนั้น Markdown ที่ผู้ใช้ระบุจึงสามารถแทรก <script> ได้ กำหนดค่าตัวเรนเดอร์เพื่อฆ่าเชื้อ (เช่น DOMPurify) หรือปิดใช้งาน raw HTML สำหรับอินพุตที่ไม่น่าเชื่อถือ
ความไวของช่องว่าง: Markdown จะยุบบรรทัดที่อยู่ติดกันให้เป็นหนึ่งย่อหน้า เว้นแต่จะคั่นด้วยบรรทัดว่าง และเยื้องบล็อคโค้ดด้วยช่องว่าง 4 ช่อง การคัดลอกและวางจากโปรแกรมแก้ไขที่มีรูปแบบสมบูรณ์มักจะทำให้บรรทัดว่างหายไปและทำให้โครงสร้างเสียหาย
ไม่มีโครงสร้างความหมาย: ## ของ Markdown คือ <h2> แต่ไม่มีความหมายใดเกินกว่าระดับ สำหรับการนำทางที่เข้าถึงได้ (<nav>) บทความ (<article>) และด้านข้าง (<aside>) คุณต้องมี HTML wrappers รอบเอาต์พุต Markdown

เคล็ดลับ

ใช้ Markdown สำหรับเนื้อความของเอกสารและ HTML สำหรับเชลล์หน้า เครื่องมือสร้างไซต์คงที่ส่วนใหญ่ (Astro, Eleventy, Next) รองรับการแยกนี้โดยกำเนิด
เมื่ออนุญาตให้ผู้ใช้ป้อนข้อมูล Markdown ให้ฆ่าเชื้อ HTML ที่แสดงผลด้วย DOMPurify เสมอเพื่อตัด <script> บนแอตทริบิวต์* และ javascript: URLs —อย่าเชื่อถือการ Escape เริ่มต้นของตัวเรนเดอร์
ใช้การแสดงตัวอย่าง Markdown ของเราเพื่อดูว่าตัวเรนเดอร์แปลง Markdown ของคุณเป็น HTML อย่างไร ก่อนที่จะส่งไปยัง README หรือเอกสาร
สำหรับตารางที่ซับซ้อน (colspan, คำบรรยาย, ส่วนหัวที่มีสไตล์) ให้เขียนลงใน HTML และฝังใน Markdown ตัวเรนเดอร์ส่วนใหญ่จะส่งต่อ HTML ในบรรทัดโดยไม่มีการเปลี่ยนแปลง

Markdown เทียบกับ HTML: ควรใช้แบบใดสำหรับเนื้อหา?

ตอบด่วน

การแนะนำ

ทีละขั้นตอน

เปรียบเทียบความสามารถในการอ่านแหล่งที่มา

เปรียบเทียบการแสดงออก

เปรียบเทียบเส้นโค้งการเรียนรู้

เปรียบเทียบการเรนเดอร์และการพกพา

ตัดสินใจตามกรณีการใช้งานของคุณ