ดูตัวอย่าง Markdown

Markdown คืออะไร?

Markdown คือภาษา markup ที่มีน้ำหนักเบา สร้างขึ้นโดย John Gruber ในปี 2004 โดยใช้สัญลักษณ์การจัดรูปแบบข้อความธรรมดา เช่น เครื่องหมายดอกจัน สัญลักษณ์แฮช และขีดกลาง เพื่อระบุโครงสร้าง ได้แก่ หัวข้อ ตัวหนา ตัวเอียง รายการ ลิงก์ และบล็อกโค้ด เครื่องมือดูตัวอย่าง Markdown จะแปลงข้อความธรรมดาดังกล่าวให้เป็น HTML ที่จัดรูปแบบแล้ว เพื่อให้คุณเห็นว่าเอกสารสุดท้ายจะมีหน้าตาอย่างไรก่อนเผยแพร่ ข้อกำหนด Markdown ดั้งเดิมอธิบายไว้ในเอกสาร Daring Fireball ของ Gruber และรูปแบบนี้ได้รับการกำหนดเป็นมาตรฐานอย่างเป็นทางการในชื่อ CommonMark

Markdown กลายเป็นรูปแบบการเขียนมาตรฐานสำหรับเอกสารประกอบของนักพัฒนา ไฟล์ README ตัวสร้างเว็บไซต์แบบสถิต (Jekyll, Hugo, Astro) วิกิ และฐานความรู้ GitHub, GitLab, Bitbucket, Stack Overflow, Reddit และ Notion ล้วนรองรับ Markdown โดยตรง เนื่องจากต้นฉบับเป็นข้อความธรรมดา ไฟล์ Markdown จึงจัดการเวอร์ชันด้วย Git ได้ง่าย เปรียบเทียบความต่างระหว่างสาขาได้สะดวก และผสานรวมได้โดยไม่เกิดความขัดแย้งในส่วนที่ไม่ทับซ้อนกัน

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

ทำไมต้องใช้เครื่องมือดูตัวอย่าง Markdown ออนไลน์?

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

กรณีการใช้งานการดูตัวอย่าง Markdown

เอกสารอ้างอิงไวยากรณ์ Markdown

ตารางด้านล่างแสดงการจับคู่ไวยากรณ์ Markdown ทั่วไปกับผลลัพธ์ที่แสดงผลและองค์ประกอบ HTML ที่สอดคล้องกัน ครอบคลุมพื้นฐาน CommonMark ที่ Markdown parser เกือบทุกตัวรองรับ

เปรียบเทียบรูปแบบ Markdown

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

ตัวอย่างโค้ด: การแสดงผล Markdown ด้วยโปรแกรม

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

import { marked } from 'marked'

const md = '# Hello\n\nThis is **Markdown**.'
const html = marked(md)
// → "<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>\n"

// With options
marked.setOptions({ gfm: true, breaks: true })
const gfmHtml = marked('Line one\nLine two')
// → "<p>Line one<br>Line two</p>\n"

import markdown

md = '# Hello\n\nThis is **Markdown**.'
html = markdown.markdown(md)
# → '<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>'

# With extensions
html = markdown.markdown(md, extensions=['fenced_code', 'tables'])

# Convert a file
with open('README.md') as f:
    html = markdown.markdown(f.read(), extensions=['extra'])

package main

import (
	"bytes"
	"fmt"
	"github.com/yuin/goldmark"
)

func main() {
	source := []byte("# Hello\n\nThis is **Markdown**.")
	var buf bytes.Buffer
	if err := goldmark.Convert(source, &buf); err != nil {
		panic(err)
	}
	fmt.Println(buf.String())
	// → <h1>Hello</h1>
	// → <p>This is <strong>Markdown</strong>.</p>
}

# Convert Markdown file to HTML
pandoc README.md -f markdown -t html -o output.html

# Convert with GitHub Flavored Markdown
pandoc README.md -f gfm -t html --standalone -o output.html

# Pipe from stdin
echo '# Hello **world**' | pandoc -f markdown -t html
# → <h1>Hello <strong>world</strong></h1>

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