ดูตัวอย่าง Markdown

ดูตัวอย่าง Markdown ที่แสดงผลเป็น HTML

Markdown
ดูตัวอย่าง

Hello, Markdown

A quick bold word and some italics.

  • Bullet one
  • Bullet two
    • Nested
  • Bullet three
const greeting = 'hello world';
console.log(greeting);

Block quotes work too.

Col A Col B
1 2
3 4

Link

Markdown แบบไหนที่รองรับ?

การดูตัวอย่างใช้ตัวแยกวิเคราะห์ `marked` ที่กำหนดค่าสำหรับ GitHub-Flavored Markdown (GFM): ตารางที่มีตัวแบ่ง `|` บล็อกโค้ดที่มีกรอบด้วย ``` markers และคำแนะนำภาษา ลิงก์อัตโนมัติสำหรับ URL ช่องทำเครื่องหมายในรายการงาน (`- [ ]`) และการขีดฆ่าด้วย `~~text~~`

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

กรณีการใช้งาน

  • ดูตัวอย่าง README ก่อนที่จะทำการ commit — ดูว่า GitHub จะแสดงหัวข้อ บล็อกโค้ด และรายการอย่างไร
  • ร่างเอกสาร — เขียนเอกสาร API ใน markdown และดูตัวอย่างการจัดรูปแบบก่อนที่จะวางลงใน Notion หรือ wiki
  • เขียนโพสต์จดหมายข่าว — เขียนใน markdown และดูตัวอย่างสำหรับ Substack หรือ Beehiiv ก่อนที่จะวาง
  • จัดรูปแบบคำตอบใน Stack Overflow — ดูตัวอย่างกรอบโค้ด รายการ และลิงก์ก่อนที่จะส่ง

ตัวอย่าง

Headings and emphasis
ข้อมูลนำเข้า
# Title

**bold** and *italic* text.

- list item
- another
ผลลัพธ์
<h1>Title</h1>
<p><strong>bold</strong> and <em>italic</em> text.</p>
<ul><li>list item</li><li>another</li></ul>

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

ส่วนขยาย Markdown ใดบ้างที่รองรับ?

รองรับ Markdown แบบ GitHub-flavored: ตาราง บล็อกโค้ดแบบมีกรอบ ลิงก์อัตโนมัติ รายการงาน และการขีดฆ่า ส่วนหมายเหตุและกล่องคำแนะนำยังไม่รองรับ

อนุญาตให้ใช้ HTML ภายใน Markdown หรือไม่?

ใช่ แต่ผลลัพธ์จะถูกทำความสะอาด — `<script>`, `<style>`, และคุณสมบัติ on-event จะถูกลบออกก่อนการแสดงผล

ฉันสามารถส่งออก HTML ที่แสดงผลได้หรือไม่?

ใช้การดูแหล่งที่มาของเบราว์เซอร์หรือ DevTools เพื่อคัดลอก HTML ที่แสดงผล คลิกขวาที่การดูตัวอย่างและ 'ดูแหล่งที่มาของเฟรม' หากมี

บล็อกโค้ดมีการเน้นไวยากรณ์หรือไม่?

ไม่ — บล็อกโค้ดแบบมีกรอบจะแสดงด้วยฟอนต์โมโนสเปซแต่ไม่มีการไฮไลต์สีตามภาษา หากต้องการสิ่งนั้น ให้เพิ่มตัวประมวลผล Markdown เช่น `markdown-it` ร่วมกับ `highlight.js` ในโปรเจกต์ของคุณเอง

ข้อมูลนำเข้าส่งไปยังเซิร์ฟเวอร์หรือไม่?

ไม่ การแยกวิเคราะห์และการแสดงผลเกิดขึ้นในเบราว์เซอร์ของคุณ