ตัวแก้ไข/แสดงตัวอย่าง Markdown
เขียนและดูตัวอย่าง Markdown พร้อมการแสดงผลแบบสดและการเน้นไวยากรณ์
วิธีใช้งาน
พิมพ์หรือวาง Markdown ของคุณลงในพื้นที่แก้ไข เมื่อเปิดครั้งแรกจะมีเอกสารตัวอย่างสั้น ๆ อยู่แล้วเพื่อให้เห็นไวยากรณ์ในบริบทจริง และคุณสามารถแทนที่ด้วยเนื้อหาของตัวเองได้ตลอดเวลา การขึ้นบรรทัดใหม่ การเยื้อง และบรรทัดว่างจะถูกรักษาไว้ตามที่คุณป้อน สิ่งนี้สำคัญเพราะ Markdown ใช้บรรทัดว่างในการแบ่งย่อหน้าและใช้การเยื้องในการซ้อนชั้นรายการ
สังเกตพื้นที่แสดงตัวอย่างที่อัปเดตขณะคุณพิมพ์ ไม่มีปุ่มสั่งแสดงผลและไม่ต้องรอ ทุกครั้งที่กดแป้นพิมพ์เอกสารจะถูกแสดงผลใหม่ทันที ตารางที่เสียหรือบล็อกโค้ดที่ยังไม่ปิดจึงปรากฏให้เห็นในขณะที่สร้างขึ้น ไม่ใช่หลังจากเผยแพร่แล้ว
เปลี่ยนโหมดการแสดงผลให้เข้ากับงานที่ทำ มุมมองแบบแบ่งครึ่งแสดงพื้นที่แก้ไขและตัวอย่างเคียงข้างกัน เหมาะที่สุดสำหรับการเขียนจริง มุมมองเฉพาะโปรแกรมแก้ไขให้ความกว้างทั้งหมดกับเนื้อหา ช่วยได้เมื่อทำงานกับตารางกว้างหรือบล็อกโค้ดยาว มุมมองเฉพาะตัวอย่างแสดงเฉพาะผลลัพธ์ เหมาะกับการตรวจทานครั้งสุดท้าย
ใช้แถวสถิติเพื่อติดตามความยาว เครื่องมือจะนับตัวอักษร คำ บรรทัด และย่อหน้าอย่างต่อเนื่อง มีประโยชน์เมื่อคุณเขียนภายใต้ข้อจำกัดความยาว เช่น คำอธิบายแพ็กเกจ สรุป pull request หรือหัวข้อเอกสารที่ต้องสั้นพอให้อ่านผ่านได้
คลิกคัดลอก Markdown เพื่อนำซอร์สต้นฉบับเข้าคลิปบอร์ด นี่คือเวอร์ชันที่คุณจะวางลงใน GitHub, GitLab, ตัวสร้างเว็บไซต์แบบสแตติก หรือระบบอื่นที่รับ Markdown และเป็นเวอร์ชันที่ควรเก็บไว้เป็นต้นฉบับสำหรับแก้ไขในภายหลัง
คลิกคัดลอก HTML เพื่อรับมาร์กอัปที่แสดงผลแล้วแทน ใช้เมื่อปลายทางต้องการ HTML ไม่ใช่ Markdown เช่น ช่องข้อความแบบ rich text ใน CMS หรือเทมเพลตอีเมล
คลิกดาวน์โหลดเพื่อบันทึกงานเป็นไฟล์ document.md เนื่องจากโปรแกรมนี้ไม่เก็บร่างงานไว้ระหว่างการเข้าใช้ การดาวน์โหลดจึงเป็นวิธีเดียวที่จะเก็บเอกสารที่คุณต้องการกลับมาทำต่อ อย่าลืมทำก่อนปิดแท็บสำหรับงานที่สำคัญ
ใช้โหลดตัวอย่างเพื่อเรียกเอกสารตัวอย่างกลับมาเมื่อต้องการดูวิธีเขียนไวยากรณ์ใดเป็นพิเศษ และใช้ล้างข้อมูลเพื่อเคลียร์พื้นที่แก้ไขและเริ่มใหม่ ทั้งสองปุ่มจะแทนที่เนื้อหาปัจจุบัน ดังนั้นควรดาวน์โหลดสิ่งที่ยังต้องใช้ก่อน
เคล็ดลับโปร
- งานของคุณไม่ได้ถูกบันทึกไว้ระหว่างการเข้าใช้ ไม่มีการบันทึกอัตโนมัติและไม่มีการใช้พื้นที่จัดเก็บของเบราว์เซอร์ การรีเฟรช ปิดแท็บ หรือโปรแกรมหยุดทำงานจะทำให้ร่างงานหายไป ดาวน์โหลดไฟล์ .md ทุกครั้งที่เขียนสิ่งที่ไม่อยากพิมพ์ใหม่
- บล็อกโค้ดจะถูกแสดงเป็นบล็อกฟอนต์ความกว้างคงที่ที่จัดรูปแบบถูกต้อง แต่ไม่มีการเน้นสีในที่นี่ บล็อกที่ระบุภาษาเช่น ```javascript จะยังเน้นสีได้ถูกต้องเมื่อคุณนำไปวางใน GitHub หรือเว็บไซต์ที่มีระบบเน้นสีของตัวเอง
- ตารางต้องมีแถวคั่นที่ประกอบด้วยขีดกลางอยู่ใต้แถวหัวตารางทันที และไม่จำเป็นต้องจัดเครื่องหมายไปป์ให้ตรงกัน หากตารางแสดงผลเป็นย่อหน้าเดียว สาเหตุมักเป็นแถวคั่นที่ขาดไปเสมอ
- เว้นบรรทัดว่างไว้ก่อนและหลังตาราง รายการ และบล็อกโค้ด Markdown จะถือว่าบล็อกที่ติดกับย่อหน้าก่อนหน้าเป็นส่วนหนึ่งของย่อหน้านั้น ซึ่งเป็นสาเหตุที่พบบ่อยที่สุดที่ทำให้รายการแสดงผลเป็นบรรทัดเดียวต่อกัน
- รายการเช็คลิสต์ใช้ไวยากรณ์ - [ ] สำหรับรายการที่ยังไม่ติ๊ก และ - [x] สำหรับรายการที่ติ๊กแล้ว โดยต้องมีช่องว่างในวงเล็บเหลี่ยม จะแสดงเป็นช่องติ๊กจริงบน GitHub และ GitLab จึงเหมาะกับเช็คลิสต์สำหรับตรวจโค้ด
- แท็ก HTML ที่ใส่ตรง ๆ จะผ่านไปและถูกแสดงผล คุณจึงใช้ได้เมื่อ Markdown ไม่มีไวยากรณ์ที่เทียบเท่า ควรใช้เฉพาะกับเนื้อหาที่คุณเขียนเอง และจำไว้ว่าหลายแพลตฟอร์มตัด HTML ออกจาก Markdown ด้วยเหตุผลด้านความปลอดภัย ควรทดสอบก่อนพึ่งพา
- คัดลอก Markdown และคัดลอก HTML ใช้แทนกันไม่ได้ ควรเก็บ Markdown ไว้เป็นต้นฉบับหลัก และถือว่า HTML เป็นการส่งออกทางเดียว เพราะการแปลง HTML กลับเป็น Markdown ที่สะอาดในภายหลังนั้นยุ่งยากกว่ามาก
กรณีการใช้งาน
การเขียนและแก้ไขไฟล์ README
ร่าง README ของโปรเจกต์ที่มีหัวข้อ คำแนะนำการติดตั้ง ตัวอย่างโค้ด และตารางคุณสมบัติ แล้วยืนยันว่าแสดงผลถูกต้องก่อนคอมมิต
เอกสารทางเทคนิคและวิกิ
เขียนหน้าเอกสารที่มีลำดับชั้นหัวข้อถูกต้อง ขั้นตอนแบบซ้อนชั้น และตัวอย่างโค้ด สำหรับระบบที่รองรับ Markdown
คำอธิบาย Pull Request และรายงานปัญหา
เรียบเรียงคำอธิบาย pull request ที่ยาวและรายงานบั๊กที่มีเช็คลิสต์ ตัวอย่างโค้ด และขั้นตอนการทำซ้ำปัญหา ก่อนวางลงในระบบติดตามงาน
บทความบล็อกสำหรับตัวสร้างเว็บไซต์แบบสแตติก
ร่างบทความสำหรับ Jekyll, Hugo, Astro, Next.js หรือตัวสร้างใดก็ตามที่อ่านไฟล์ Markdown และตรวจโครงสร้างก่อนเพิ่มส่วนหัวข้อมูล
การเรียนรู้ไวยากรณ์ Markdown
เห็นได้ทันทีว่าไวยากรณ์แต่ละแบบให้ผลอะไร ซึ่งเร็วกว่าการอ่านตารางอ้างอิงแล้วคาดเดา
การแปลง Markdown เป็น HTML
เปลี่ยนเอกสาร Markdown เป็น HTML สำหรับช่องใน CMS เทมเพลตอีเมล หรือส่วนของหน้าเว็บที่ไม่รองรับ Markdown
คำถามที่พบบ่อย
เอกสารของฉันจะถูกบันทึกไว้หรือไม่หากปิดแท็บหรือรีเฟรชหน้า?
ไม่ถูกบันทึก โปรแกรมเก็บข้อความไว้ในหน่วยความจำของหน้าเว็บเท่านั้น ไม่ได้ใช้พื้นที่จัดเก็บของเบราว์เซอร์หรือเซิร์ฟเวอร์ ดังนั้นการรีเฟรช ปิดแท็บ หรือออกไปหน้าอื่นจะทำให้ร่างงานหายไปโดยไม่มีทางกู้คืน หากคุณเขียนสิ่งที่ต้องการเก็บไว้ ให้คลิกดาวน์โหลดเพื่อบันทึกเป็นไฟล์ .md ก่อนออกจากหน้า นี่เป็นการแลกเปลี่ยนที่ตั้งใจไว้ ไม่มีอะไรถูกจัดเก็บไว้ที่ใด จึงไม่ต้องฝากความไว้ใจเนื้อหาของคุณกับใคร แต่ก็หมายความว่าคุณต้องรับผิดชอบการบันทึกงานเอง
รองรับไวยากรณ์ Markdown แบบใด?
โปรแกรมแสดงผลด้วย GitHub Flavored Markdown ซึ่งครอบคลุม Markdown มาตรฐานพร้อมส่วนขยายที่คนส่วนใหญ่คาดหวัง ได้แก่ ตาราง รายการเช็คลิสต์ ข้อความขีดฆ่าด้วยเครื่องหมายตัวหนอนคู่ และการเปลี่ยน URL เป็นลิงก์อัตโนมัติ องค์ประกอบมาตรฐานเช่นหัวข้อทั้งหกระดับ ตัวหนา ตัวเอียง รายการแบบมีลำดับและไม่มีลำดับที่ซ้อนชั้นได้ การอ้างอิง เส้นคั่น โค้ดในบรรทัด และบล็อกโค้ด ทั้งหมดทำงานได้ แท็ก HTML ที่ฝังไว้ใน Markdown ก็ผ่านไปและถูกแสดงผลด้วย
ทำไมบล็อกโค้ดของฉันไม่มีการเน้นสี?
ตัวอย่างนี้แสดงบล็อกโค้ดเป็นบล็อกฟอนต์ความกว้างคงที่ที่จัดรูปแบบถูกต้อง แต่ไม่ได้ใส่สีตามไวยากรณ์ ชื่อภาษาที่คุณเขียนไว้หลังเครื่องหมายเปิดบล็อก เช่น ```python จะถูกเก็บไว้ในซอร์ส ดังนั้นบล็อกนั้นจะถูกเน้นสีตามปกติเมื่อนำไปวางใน GitHub, GitLab หรือเว็บไซต์ที่มีระบบเน้นสีของตัวเอง ให้เขียนชื่อภาษาต่อไปได้ เพียงแต่ในตัวอย่างนี้จะไม่เห็นผลทางสายตา
ทำไมตารางของฉันแสดงผลเป็นข้อความบรรทัดเดียว?
ตาราง Markdown ต้องมีแถวคั่นที่ประกอบด้วยขีดกลางอยู่ใต้แถวหัวตารางทันที เช่น |---|---| และแถวนี้มักเป็นสิ่งที่ขาดไป อีกสาเหตุที่พบบ่อยคือไม่มีบรรทัดว่างระหว่างตารางกับย่อหน้าด้านบน เพราะ Markdown จะถือว่าทั้งหมดเป็นส่วนต่อเนื่องของย่อหน้านั้น เครื่องหมายไปป์ไม่จำเป็นต้องเรียงตรงกันและไปป์ท้ายบรรทัดก็ไม่บังคับ ทั้งสองอย่างจึงไม่ใช่สาเหตุ
คัดลอก Markdown กับคัดลอก HTML ต่างกันอย่างไร?
คัดลอก Markdown ให้ซอร์สต้นฉบับตามที่คุณพิมพ์ ซึ่งเป็นสิ่งที่คุณวางลงใน GitHub ไฟล์ในคลังโค้ด หรือตัวสร้างเว็บไซต์แบบสแตติก และควรเก็บไว้เป็นต้นฉบับสำหรับแก้ไข คัดลอก HTML ให้มาร์กอัปที่แสดงผลแล้วแทน สำหรับปลายทางที่รับเฉพาะ HTML เช่นช่อง rich text ใน CMS หรือเทมเพลตอีเมล ควรถือว่า HTML เป็นการส่งออกทางเดียว เพราะการแปลงกลับเป็น Markdown ที่สะอาดในภายหลังยุ่งยากกว่าการเก็บต้นฉบับไว้มาก
มีข้อจำกัดความยาวของเอกสารหรือไม่?
ไม่มีข้อจำกัดจำนวนตัวอักษรหรือคำที่กำหนดไว้ แต่เนื่องจากตัวอย่างจะแสดงผลใหม่ทุกครั้งที่กดแป้นพิมพ์และทุกอย่างทำงานในเบราว์เซอร์ เอกสารขนาดใหญ่มากที่มีหลายพันบรรทัดอาจเริ่มตอบสนองช้าลง โดยเฉพาะบนอุปกรณ์รุ่นเก่า หากรู้สึกว่าการพิมพ์หน่วงในเอกสารยาว การสลับไปมุมมองเฉพาะโปรแกรมแก้ไขจะหยุดการแสดงผลตัวอย่างขณะพิมพ์และทำให้ความเร็วกลับมาเป็นปกติ
เนื้อหาของฉันถูกอัปโหลดไปที่ใดหรือไม่?
ไม่ การแก้ไขและการแสดงผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณด้วย JavaScript และข้อความของคุณไม่เคยถูกส่งไปยังเซิร์ฟเวอร์ จึงใช้ได้อย่างปลอดภัยกับเอกสารภายในองค์กร บันทึกการอัปเดตที่ยังไม่เผยแพร่ หรือสิ่งอื่นที่คุณไม่อยากวางลงในบริการออนไลน์ ข้อแลกเปลี่ยนคือสิ่งที่อธิบายไว้ข้างต้น เมื่อไม่มีการจัดเก็บอะไรไว้ ก็ไม่มีอะไรคงอยู่หลังปิดแท็บ
ใช้งานบนโทรศัพท์หรือแท็บเล็ตได้หรือไม่?
ใช้ได้ เลย์เอาต์ปรับตามขนาดหน้าจอ แต่มุมมองแบบแบ่งครึ่งจะแคบบนโทรศัพท์เพราะสองพื้นที่ต้องแบ่งความกว้างกัน บนมือถือมักจะดีกว่าถ้าเขียนในมุมมองเฉพาะโปรแกรมแก้ไข แล้วสลับไปมุมมองเฉพาะตัวอย่างเพื่อตรวจผลลัพธ์ ใช้ปุ่มโหมดการแสดงผลสลับไปมาแทนที่จะพยายามให้เห็นทั้งสองพร้อมกัน
ทำไมต้องใช้เครื่องมือนี้
การเขียน Markdown โดยไม่มีตัวอย่างการแสดงผลหมายความว่าคุณจะรู้ว่าทำถูกหรือไม่ก็หลังเผยแพร่ไปแล้ว โปรแกรมแก้ไขแบบเรียลไทม์ปิดช่องว่างนั้น และการทำงานในเบราว์เซอร์ก็ตัดขั้นตอนการติดตั้งและคำถามด้านความเป็นส่วนตัวที่มาพร้อมกับการติดตั้งโปรแกรมหรือสมัครใช้บริการ
- เห็นข้อผิดพลาดขณะเขียน: ตารางที่เสีย บล็อกโค้ดที่ยังไม่ปิด หรือรายการที่ไม่ยอมซ้อนชั้น จะปรากฏในตัวอย่างทันทีที่สร้างขึ้น ไม่ใช่หลังคอมมิตและโหลดหน้าใหม่
- ไม่ต้องติดตั้งหรือสมัครบัญชี: เปิดในแท็บเบราว์เซอร์และใช้งานได้ทันที จึงใช้ได้จริงบนเครื่องที่คุณไม่มีสิทธิ์ดูแล หรือเมื่อต้องแก้ไฟล์เดียวอย่างเร่งด่วน
- เนื้อหาอยู่บนอุปกรณ์ของคุณ: การแสดงผลเกิดขึ้นในเบราว์เซอร์ทั้งหมด ร่างเอกสารภายในองค์กรหรือบันทึกที่ยังไม่เผยแพร่จึงไม่ถูกส่งไปยังเซิร์ฟเวอร์
- มีรูปแบบผลลัพธ์ทั้งสองแบบ: คัดลอกซอร์ส Markdown สำหรับคลังโค้ดและเว็บไซต์แบบสแตติก หรือคัดลอก HTML ที่แสดงผลแล้วสำหรับระบบที่รับเฉพาะมาร์กอัป โดยไม่ต้องใช้ตัวแปลงแยก
- ทราบความยาวได้ทันที: จำนวนตัวอักษร คำ บรรทัด และย่อหน้าแบบเรียลไทม์ช่วยให้เขียนภายในข้อจำกัดความยาว และคุมแต่ละหัวข้อของเอกสารให้สั้นพอที่จะมีคนอ่านจริง
- เรียนรู้ไวยากรณ์ได้เร็ว: การเปลี่ยนทีละอย่างแล้วเห็นผลทันทีสอน Markdown ได้เร็วกว่าการอ่านจากตารางอ้างอิงอย่างชัดเจน
- มีโหมดการแสดงผลให้เลือกตามงาน: มุมมองแบ่งครึ่งสำหรับร่างงาน มุมมองเฉพาะโปรแกรมแก้ไขสำหรับตารางกว้างและโค้ดยาว มุมมองเฉพาะตัวอย่างสำหรับการตรวจทานครั้งสุดท้าย เลย์เอาต์จึงเข้ากับงานที่ทำ