การเขียนเว็บเพจแบบ Markdown

สารบัญ

1. เกี่ยวกับ Markdown

1.1 เหตุผลของการใช้งาน Markdown

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

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

1.2 การใส่ HTML โดยตรง

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

Markdown มีรูปแบบการจัดหน้าเว็บเพจไม่มากเท่า HTML โดย Markdown มีเฉพาะส่วนที่มีการใช้งานบ่อยๆ เท่านั้น ดังนั้นเว็บเพจที่ต้องการการจัดหน้าที่ซับซ้อนมักจะต้องใช้ HTML ร่วมด้วยอยู่บ้าง

1.3 การเปลี่ยนแปลงตัวอักษรพิเศษอัตโนมัติ

การเขียนเว็บเพจด้วย HTML นั้นมีตัวอักษรพิเศษหลายตัวที่ไม่สามารถเขียนได้โดยตรงเพราะตัวอักษรเหล่านั้นใช้ในการจัดหน้าด้วย HTML อาทิเช่น < และ & ต้องเขียนเป็น &lt; และ &amp; เป็นต้น

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

2. การเขียนเนื้อหาที่อยู่ในหลายบรรทัด

2.1 ย่อหน้าและการขึ้นบรรทัดใหม่

ข้อความที่ต่อเนื่องการโดยไม่มีการเว้นบรรทัดจะถูกจัดให้อยู่ในย่อหน้า (paragraph) เดียวกัน หากต้องการขึ้นย่อหน้าใหม่ให้เว้นระหว่างข้อความด้วยบรรทัดว่างหนึ่งบรรทัด

หากต้องการขึ้นบรรทัดใหม่ในย่อหน้าเดียวกัน ให้พิมพ์ช่องว่างอย่างน้อยสองช่องหลังบรรทัดนั้น หรือใส่เครื่องหมาย <br /> หลังบรรทัดนั้น

2.2 หัวข้อ (Headers)

หัวข้อสามารถเขียนได้สองแบบ

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

# หัวข้อระดับที่หนึ่ง## หัวข้อระดับที่สอง### หัวข้อระดับที่สาม#### หัวข้อระดับที่สี่##### หัวข้อระดับที่ห้า###### หัวข้อระดับที่หก

แบบที่สองเขียนโดยการใช้เครื่องหมายเท่ากับ (=) และขีดกลาง (-) อยู่ในบรรทัดถัดไปของบรรทัดที่ต้องการให้เป็นหัวข้อ โดยเครื่องหมายเท่ากับจะทำให้บรรทัดนั้นเป็นหัวข้อระดับที่หนึ่ง ส่วนเครื่องหมายขีดกลางจะทำให้บรรทัดนั้นเป็นหัวข้อระดับที่สอง ดังตัวอย่าง

หัวข้อระดับที่หนึ่ง============หัวข้อระดับที่สอง------------

2.3 ย่อหน้าที่ยกมา (Blockquotes)

การใส่เนื้อหาที่ยกมานั้นทำได้โดยการใส่เครื่องหมายมากกว่า (>) หน้าย่อหน้าที่ยกมานั้น ดังตัวอย่าง

> เนื้อหาตอนนี้เป็นเนื้อหาที่ยกมาจากแหล่งอื่นจึงใส่เป็น blockquotes

และระบบจะแสดงเนื้อหานั้นในเว็บเพจแตกต่างจากย่อหน้าอื่นๆ ดังนี้

เนื้อหาตอนนี้เป็นเนื้อหาที่ยกมาจากแหล่งอื่นจึงใส่เป็น blockquotes

นอกจากนี้เนื้อหาที่ใส่ใน blockquotes นั้นสามารถใส่เครื่องหมายอื่นๆ ของ Markdown เพื่อจัดเนื้อหาได้อีก อาทิเช่น

> เนื้อหาตอนนี้เป็น **ตัวหนา**> * ดิน> * น้ำ> * ลม> * ไฟ

จะได้ผลลัพธ์เป็น

เนื้อหาตอนนี้เป็น ** ตัวหนา*** ดิน* น้ำ* ลม* ไฟ

2.4 รายการ

รายการแบบไม่เรียงตัวเลขให้เขียนโดยการเขียนหน้าข้อความรายการด้วยเครื่องหมายดอกจัน เครื่องหมายบวก หรือเครื่องหมายลบ เครื่องหมายใดก็ได้แต่ในรายการหนึ่งให้ใช้เครื่องหมายใดเครื่องหมายหนึ่งเหมือนกันเท่านั้น ดังนี้

* ดิน* น้ำ* ลม* ไฟ

หรือ

- ดิน- น้ำ- ลม- ไฟ

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

1. ดิน1. น้ำ1. ลม1. ไฟ

2.5 โค้ตโปรแกรม

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

    This is code block.

2.6 เส้นแบ่งเนื้อหา

ให้เขียนดอกจันหรือเครื่องหมายขีดกลางหรือเครื่องหมายขีดล่างติดต่อกันอย่างน้อยสามตัวเพื่อสร้างเส้นแบ่งเนื้อหา ดังนี้

***---___

3. การเขียนเนื้อหาที่อยู่ในบรรทัดเดียว

3.1 ลิงก์

การใส่ลิงก์ในเว็บเพจด้วย Markdown มีวิธีเขียนดังนี้

[ข้อความที่จะลิงก์](ที่อยู่ของเว็บเพจที่จะลิงก์ไป)

ตัวอย่างเช่น

[การเขียนเว็บเพจแบบ Markdown](https://www.gotoknow.org/wiki/pages/100)

ในกรณีที่เว็บเพจนั้นอยู่ในโดเมนเดียวกันก็ไม่จำเป็นต้องใส่โดเมนโดยจะใส่เพียงที่อยู่ของเว็บเพจในโดเมนนั้น ดังตัวอย่างนี้

[การเขียนเว็บเพจแบบ Markdown](/pages/100)

3.2 เน้นข้อความ

การเน้นข้อความด้วย Markdown สามารถทำได้ด้วยการใส่เครื่องหมาย * หรือ _ หน้าและหลังข้อความที่ต้องการเน้นนั้นแล้วข้อความนั้นจะแสดงผลเป็น_ตัวเอียง_ ดังนี้

*ข้อความสำคัญ*_ข้อความสำคัญ_

หากต้องการให้ข้อความเป็น__ตัวหนา__ ให้ใส่เครื่องหมายหน้าและหลังสองตัว ดังนี้

**ข้อความสำคัญตัวหนา**__ข้อความสำคัญตัวหนา__

3.3 โค้ต

การใส่โค้ตในข้อความนั้นสามารถทำได้โดยการใส่เครื่องหมายฟันหนูกลับหลัง (backtick quotes) ล้อมรอบข้อความนั้น ดังตัวอย่างนี้

This sentence has a `code`.

3.4 รูป

วิธีการใส่รูปในเว็บเพจด้วย Markdown นั้นจะเขียนดังนี้

![คำอธิบายภาพ](ที่อยู่ของรูป)

ตัวอย่างเช่น

![ภาพสนามเด็กเล่น](http://cdn.gotoknow.org/assets/files/001/default.jpg)

สังเกตว่าวิธีการเขียนใกล้เคียงกับการใส่ลิงก์มีข้อแตกต่างกันเพียงเล็กน้อย ได้แก่การมีเครื่องหมายอุทาน (!) นำหน้า ส่วนอื่นจะเหมือนกับการใส่ลิงก์

4. อื่นๆ

4.1 การเขียนตัวอักษรพิเศษ

Markdown ใช้ตัวอักษรพิเศษหลายตัวเพื่อการจัดรูปแบบของเว็บเพจ หากต้องการพิมพ์ตัวอักษรนั้นในเว็บเพจให้พิมพ์เครื่องหมาย backslash (\) หน้าเครื่องหมายนั้น ตัวอย่างเช่น

\\ backslash\` backtick\* asterisk\_ underscore\{\} curly braces\[\] square brackets\(\) parentheses\# hash mark\+ plus sign\- minus sign (hyphen)\. dot\! exclamation mark

4.2 การแปลงลิงก์ให้คลิกได้อัตโนมัติ

เอกสารที่เขียนแบบ Markdown สามารถเขียนที่อยู่ของเว็บเพจให้แปลงเป็นลิงก์อัตโนมัติโดยการใส่เครื่องหมายน้อยกว่า (<) และมากกว่า (>) ด้านหน้าและหลังที่อยู่ของเว็บเพจนั้น ดังตัวอย่างนี้

<https://www.gotoknow.org/wiki/pages/100>

อย่างไรก็ตามหากไม่ต้องการให้ที่อยู่ของเว็บเพจที่ลิงก์ไปแสดงออกมาด้วยก็ควรใส่ลิงก์ตามรูปแบบที่อธิบายแล้วข้างต้นในเว็บเพจนี้

5. ตาราง

ในขณะนี้ยังไม่มีวิธีการเขียนตารางแบบ Markdown ที่ใช้งานอย่างแพร่หลาย ดังนั้นจึงต้องใช้วิธีการเขียนตารางแบบ HTML ไปก่อน

6. อ่านเพิ่มเติม

เว็บเพจนี้สรุปจาก Daring Fireball: Markdown Syntax โดยในเว็บดังกล่าวมีรายละเอียดการใช้งานมากกว่าที่สรุปในเว็บเพจนี้ ผู้สนใจข้อมูลเพิ่มเติมควรอ่านเสริมด้วย

วิกิเพจหมายเลข: 100