Softonic

ตัวแสดงตัวอย่าง Markdown

ขั้นตอน 1 / 2
ถัดไป

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

วิธีใช้ตัวแสดงตัวอย่าง

  1. 1

    เขียน Markdown

    ช่องด้านซ้ายรับ Markdown ดิบ ทุกการเปลี่ยนแปลงจะเรนเดอร์ช่องด้านขวาใหม่ทันที

  2. 2

    ดูตัวอย่าง HTML

    ช่องด้านขวาจะแสดงผลลัพธ์ที่เรนเดอร์แล้วในสไตล์แบบ GitHub

  3. 3

    สลับโหมด

    มุมมองแบบเคียงข้างกัน แสดงเฉพาะตัวอย่าง หรือแสดงเฉพาะซอร์ส เพื่อการเขียนที่ไม่มีสิ่งรบกวน

  4. 4

    คัดลอก HTML

    ดึง HTML ที่เรนเดอร์แล้วไปใช้ หากต้องการวางลงในโปรแกรมอีเมลหรือระบบจัดการเนื้อหา (CMS)

สิ่งที่ตัวแสดงตัวอย่างนี้รองรับ

  • CommonMark: หัวเรื่อง ย่อหน้า การเน้นข้อความ รายการ ข้อความอ้างอิง โค้ดบล็อก ลิงก์ รูปภาพ และเส้นคั่นแนวนอน
  • ส่วนขยาย GFM: ตารางที่จัดแนวคอลัมน์ได้ รายการงาน (- [ ] และ - [x]) ขีดฆ่าด้วย ~~ ลิงก์ URL อัตโนมัติ และโค้ดบล็อกแบบมีรั้วพร้อมระบุภาษา
  • การเน้นไวยากรณ์: รองรับกว่า 100 ภาษาผ่าน highlight.js เช่น JavaScript, Python, Go, Rust, SQL, YAML และอื่น ๆ
  • HTML ดิบ: HTML แบบอินไลน์จะถูกส่งผ่านโดยตรง (ผ่านการทำให้ปลอดภัยแล้ว)
  • คณิตศาสตร์ (ไม่บังคับ): $...$ แบบอินไลน์ และ $$...$$ แบบบล็อก จะเรนเดอร์ได้เมื่อคุณเปิดใช้ส่วนขยายคณิตศาสตร์

สิ่งที่ไม่รองรับ

  • วิกิลิงก์สไตล์ Obsidian ([[Page]]), ใช้ได้เฉพาะกับ Obsidian เท่านั้น
  • div แบบมีรั้วของ Pandoc (:::), ใช้ได้เฉพาะกับ Pandoc เท่านั้น
  • การรวมไฟล์ฝั่งเซิร์ฟเวอร์ (server-side includes) หรือแท็กเทมเพลต {% ... %}

การใช้งานทั่วไป

  • ร่างไฟล์ README: เขียนนอก IDE แล้วนำเวอร์ชันสุดท้ายไปวาง
  • ตรวจรูปแบบคอมเมนต์ใน PR: ก่อนโพสต์, ช่องคอมเมนต์ของ GitHub ไม่แสดงตัวอย่างโค้ดบล็อกอย่างถูกต้อง
  • แปลงโน้ตเป็น HTML: เมื่อต้องการวางเนื้อหาที่จัดรูปแบบแล้วลงในอีเมลหรือ CMS ที่รองรับ HTML ดิบ
  • สอน Markdown: มุมมองเคียงข้างกันช่วยให้เห็นโครงสร้างไวยากรณ์ชัดเจน

ประสิทธิภาพ

การเรนเดอร์ใช้ตัวแยกวิเคราะห์ Markdown-it ร่วมกับปลั๊กอิน GFM และทำงานทั้งหมดภายในเบราว์เซอร์ เอกสารขนาดไม่กี่ร้อย KB จะเรนเดอร์ในเวลาไม่กี่มิลลิวินาที ส่วนไฟล์ขนาดใหญ่มาก (หนังสือทั้งเล่มในไฟล์เดียว) อาจกระตุกขณะพิมพ์, หากเป็นเช่นนั้นให้แบ่งออกเป็นบท ๆ

การส่งออก

  • คัดลอก HTML จะได้ <div> ที่มีเนื้อหาเรนเดอร์แล้วพร้อมคลาสจัดรูปแบบ
  • ดาวน์โหลด .md จะบันทึกซอร์สต้นฉบับ
  • พิมพ์เป็น PDF จากกล่องพิมพ์ของเบราว์เซอร์ จะได้สำเนา PDF ของมุมมองที่เรนเดอร์แล้วพร้อมการจัดรูปแบบ

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

GitHub ใส่ CSS ของตัวเองทับบน GFM ผลลัพธ์ HTML ควรตรงกัน ส่วนสไตล์ (แบบอักษร ระยะห่าง) เป็นของ GitHub หากต้องการให้เหมือนกันทุกประการ ให้ใช้ตัวสลับธีม “แสดงผลบน GitHub”

รองรับ หากคุณเปิดใช้ส่วนขยายคณิตศาสตร์ $...$ แบบอินไลน์และ $$...$$ แบบบล็อกจะเรนเดอร์ด้วย KaTeX โดยค่าเริ่มต้นจะปิดไว้เพื่อให้หน้าเว็บเบา

จะผ่านการทำให้ปลอดภัย, แท็กที่ปลอดภัยอย่าง <div>, <span>, <table>, <img> จะผ่านได้ ส่วน <script> และตัวจัดการเหตุการณ์แบบอินไลน์จะถูกลบออก

ขนาดหลายร้อย KB ทำงานได้ลื่นไหล สำหรับไฟล์ที่ใหญ่มาก ให้ปิดการเรนเดอร์แบบเรียลไทม์แล้วเรนเดอร์เมื่อต้องการ

การเรนเดอร์ทำงานทั้งหมดที่ฝั่งไคลเอ็นต์ เนื้อหาจะไม่ถูกส่งไปที่ใด หากรีเฟรชหน้าเว็บ ร่างจะหายไป เว้นแต่เบราว์เซอร์จะเก็บสถานะของฟอร์มไว้

เครื่องมือที่เกี่ยวข้อง

ตัวสร้างการตั้งค่า Webpack

สร้างไฟล์ webpack.config.js สำหรับ webpack 5 จากแบบฟอร์มสั้นๆ ตั้งค่า entry, โฟลเดอร์ output และ mode จากนั้นเปิด TypeScript, Babel, CSS loader, HtmlWebpackPlugin และ dev server

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

ตัวสร้างลูกศร CSS

สร้างลูกศร CSS ในเบราว์เซอร์ด้วยทิศทาง สี ขนาด และความหนาของเส้นขอบ แล้วคัดลอกกฎ.

เครื่องมือนี้มีให้บริการในภาษาอื่น