มาร์กดาวน์เป็น HTML

มาร์กดาวน์เป็น HTMLคือเครื่องมือฟรีสำหรับแปลงโค้ด Markdown เป็นโค้ด HTML ดิบ เพื่อนำไปใช้กับเว็บไซต์ ระบบจัดการเนื้อหา และขั้นตอนการพัฒนาซอฟต์แวร์

มาร์กดาวน์เป็น HTML แปลงอะไรได้บ้าง?

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

Markdown เป็นรูปแบบมาร์กอัปข้อความธรรมดาที่นิยมใช้กับไฟล์ README เอกสารทางเทคนิค คำอธิบายปัญหา และเนื้อหาสำหรับเว็บไซต์แบบสแตติก การแปลงเป็น HTML มีประโยชน์เมื่อระบบปลายทางรองรับ HTML แทน Markdown เช่น เทมเพลตเว็บไซต์ ระบบอีเมล หรือช่องเนื้อหาในระบบจัดการเนื้อหา

Markdown มีหลายรูปแบบย่อย เช่น CommonMark, GitHub Flavored Markdown และตัวแยกวิเคราะห์เฉพาะของแต่ละแอปพลิเคชัน ซึ่งอาจจัดการตาราง รายการงาน การขึ้นบรรทัดใหม่ และ HTML ที่ฝังไว้แตกต่างกัน ข้อมูลต้นทางของเครื่องมือไม่ได้ระบุรูปแบบย่อยที่ใช้ ดังนั้นควรตรวจสอบไวยากรณ์ที่ซับซ้อนกว่าหัวเรื่อง ย่อหน้า ลิงก์ และรายการทั่วไปก่อนนำผลลัพธ์ไปใช้งานจริง

จะแปลง Markdown เป็น HTML ได้อย่างไร?

ป้อนข้อความต้นฉบับในช่อง Markdown เริ่มการแปลง แล้วอ่านหรือคัดลอกโค้ดที่สร้างขึ้นจากช่อง HTML

1. วางโค้ดตัวอย่างให้ครบถ้วน แทนที่จะใส่เฉพาะเครื่องหมายจัดรูปแบบเพียงบางส่วน
2. แปลงข้อความ แล้วตรวจสอบโครงสร้างองค์ประกอบใน HTML ที่ได้รับ
3. ตรวจสอบลิงก์ รายการซ้อน และบล็อกโค้ดในแอปพลิเคชันที่จะใช้แสดงผล
4. กำหนดสไตล์ของเว็บไซต์แยกต่างหาก หากปลายทางยังไม่มี CSS ที่เหมาะสม

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

ควรอ่าน HTML ที่ได้อย่างไร?

ให้อ่านผลลัพธ์เป็นโค้ด HTML ดิบ ซึ่งประกอบด้วยองค์ประกอบที่แทนโครงสร้างของ Markdown โค้ดนี้อาจนำไปวางในหน้าเว็บ เทมเพลต หรือช่องเนื้อหาที่มีอยู่แล้วได้ แต่ไม่จำเป็นต้องเป็นเอกสาร HTML ฉบับสมบูรณ์ที่มี doctype, metadata, styles และ scripts

ตัวอย่างหัวเรื่องขนาดเล็ก ข้อความธรรมดาที่ป้อนคือ:

# Release notes

ผลลัพธ์ HTML ตามรูปแบบทั่วไปคือ:

<h1>Release notes</h1>

ตัวอย่างรายการสั้นๆ ที่ป้อนคือ:

- Alpha

- Beta

โครงสร้างที่ได้จะเป็นรายการแบบไม่เรียงลำดับ ซึ่งมีองค์ประกอบรายการสองรายการ:

<ul>

<li>Alpha</li>

<li>Beta</li>

</ul>

ข้อผิดพลาดส่วนใหญ่ใน Markdown ไม่ได้ทำให้ตัวแยกวิเคราะห์รายงานข้อผิดพลาดอย่างเป็นทางการ เครื่องหมายจัดรูปแบบที่ไม่ครบ การเยื้องผิด หรือการไม่เว้นวรรคหลังเครื่องหมายรายการ อาจแสดงเป็นข้อความธรรมดาแทน หาก HTML ที่ได้ดูเหมือนถูกต้องแต่โครงสร้างไม่ตรงตามต้องการ ให้เปรียบเทียบองค์ประกอบในผลลัพธ์กับลำดับชั้นของเอกสารที่ตั้งใจไว้

• ตรวจสอบว่าหัวเรื่องใช้ระดับที่ต้องการ และไม่ข้ามระดับโดยไม่จำเป็น
• ตรวจสอบว่ารายการซ้อนมีการเยื้องอย่างสม่ำเสมอในต้นฉบับ Markdown
• ตรวจสอบปลายทางของลิงก์ก่อนเผยแพร่ โดยเฉพาะเมื่อประมวลผลเนื้อหาจากบุคคลภายนอก
• ตรวจสอบบล็อกโค้ดแบบ fenced อย่างละเอียด เพราะ fence ที่ไม่ได้ปิดอาจรวมเนื้อหาส่วนที่เหลือของเอกสารเข้าไปด้วย
• มองหา HTML ดิบในต้นฉบับ เพราะ Markdown แต่ละระบบอาจเก็บไว้ แปลงเป็นอักขระหลีก หรือปฏิเสธ HTML ดังกล่าว

รายละเอียดการแปลง

การแปลง Markdown เปลี่ยนโครงสร้าง ไม่ได้เปลี่ยนภาษาของข้อความ ตัวอักษรที่มีเครื่องหมายกำกับ อักษรที่ไม่ใช่ละติน ตัวเลข และเครื่องหมายวรรคตอนทั่วไปยังคงเป็นเนื้อหาข้อความภายในองค์ประกอบที่สร้างขึ้นได้ ส่วนอักขระที่มีความหมายพิเศษใน HTML อาจต้องเข้ารหัสเป็น entity หากต้องการให้แสดงเป็นตัวอักษรจริงแทนการทำหน้าที่เป็นมาร์กอัป

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

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

ควรแปลง Markdown เป็น HTML เมื่อใด?

การแปลงเหมาะเมื่อระบบในขั้นตอนถัดไปรองรับ HTML แต่เนื้อหาต้นฉบับเขียนหรือส่งมาในรูปแบบ Markdown ตัวอย่างที่พบบ่อย ได้แก่ การตรวจสอบเอกสารจากบุคคลภายนอกก่อนนำเข้า การแก้ปัญหากระบวนการ build เว็บไซต์แบบสแตติก การเตรียมบันทึกประจำรุ่นสำหรับเครื่องมือแก้ไขที่รองรับเฉพาะ HTML หรือการตรวจสอบมาร์กอัปที่สร้างขึ้นก่อนนำไปใช้งาน

โดยทั่วไปไม่จำเป็นต้องแปลง Markdown เป็น HTML หากมีเพียงระบบอัตโนมัติที่อ่านเนื้อหา และ Markdown ใช้งานได้อยู่แล้วในรูปแบบที่ระบบต้องการ เช่นเดียวกัน การแปลง Markdown ตั้งแต่ช่วงต้นของกระบวนการอาจทำให้แก้ไขภายหลังได้ยากขึ้น หากผู้เขียนยังต้องทำงานต่อในรูปแบบ Markdown

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

คำถามที่พบบ่อย

HTML ที่แปลงแล้วมีสไตล์ CSS ให้ด้วยไหม?

ไม่มี HTML ใช้อธิบายโครงสร้าง ส่วน CSS ควบคุมการแสดงผลเป็นหลัก องค์ประกอบหัวเรื่องเดียวกันอาจมีหน้าตาต่างกันในแต่ละเว็บไซต์ เพราะเบราว์เซอร์ แอปพลิเคชัน หรือธีมเป็นผู้กำหนดสไตล์ ควรเพิ่มหรือนำ CSS ที่มีอยู่กลับมาใช้ในระบบปลายทาง แทนที่จะคาดหวังให้ต้นฉบับ Markdown กำหนดหน้าตาสุดท้าย

แปลงตารางและรายการงานใน Markdown ได้ไหม?

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

แปลง Markdown จากแหล่งที่ไม่น่าเชื่อถือปลอดภัยไหม?

แม้แปลงแล้ว ก็ควรถือว่า Markdown จากแหล่งที่ไม่น่าเชื่อถือยังเป็นเนื้อหาที่ไม่น่าเชื่อถืออยู่ HTML ที่ฝังไว้หรือรูปแบบลิงก์ที่ไม่ปลอดภัยอาจต้องผ่านการทำความสะอาด ทั้งนี้ขึ้นอยู่กับตัวแยกวิเคราะห์และระบบปลายทาง ตัวแปลงนี้เปลี่ยนรูปแบบข้อมูลเท่านั้น อย่าถือว่าการแปลงเพียงอย่างเดียวเป็นตัวกรองความปลอดภัย

นำ HTML ไปวางใน WordPress หรือ CMS อื่นได้ไหม?

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

ทำไมบล็อกโค้ดจึงแสดงผลผิด?

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

ควรเก็บ Markdown ไว้หลังแปลงหรือไม่?

ควรเก็บ Markdown ไว้หากเป็นต้นฉบับหลักที่ใช้แก้ไข จัดเก็บ HTML ที่สร้างขึ้นแยกต่างหาก หรือสร้างใหม่ระหว่างกระบวนการ build เพื่อป้องกันไม่ให้การแก้ไขในสองรูปแบบแตกต่างกัน ก่อนเผยแพร่ ให้ตรวจสอบลิงก์และดูส่วน HTML ในระบบปลายทางจริง อย่าอาศัยเฉพาะโค้ดดิบเท่านั้น