Markdown Language
Markdown คืออะไร
เป็นเครื่องมือการแปลงไฟล์จาก text ให้เป็น html เหมาะสำหรับการใช้เขียน web ภาษาที่มี syntax ไม่ซับซ้อน สามารถเข้าใจและอ่านได้ง่าย1 โดยจะเป็นไฟล์นามสกุล .md
ทำไมต้องใช้ markdown?
จากโครงสร้างภาษาที่ไม่มีความซับซ้อนสามารถเข้าใจได้ง่าย เมื่อแปลงเป็นไฟล์ html จะมีการ render ออกมาเป็นลักษณะหน้าเว็บ เช่นตัวอย่าง Blog นี้เป็นต้นที่ใช้ไฟล์ .md มา render เป็น blog ต่างๆ
ลองเขียนกันเลย
ก่อนอื่น แนะนำ playground ที่สามารถนำไปลองใช้งานแล้ว render มาเป็นหน้าเว็บ เช่น Dillinger หรือเครื่องมืออื่นๆ สามารถ google ได้ตามสบาย พร้อมแล้วมาลอง syntax ต่างๆ กันได้เลย
Heading
เริ่มจาก การตั้งหัวข้อ โดยสามารถ ปรับขนาดตัวอักษรได้โดยใช้สัญลักษณ์ # สำหรับทำ Heading
ขนาดจะปรับตามจำนวน # ตามตัวอย่างด้านล่าง
ตัวอย่าง
# Heading 1
## Heading 2
### Heading 3ผลลัพธ์
ตัวอักษร
สามารถทำ ตัวหนา และ ตัวเอียง ได้อย่างง่ายดาย โดยใช้สัญลักษณ์ * หรือ _ ดังตัวอย่างข้างล่าง
ตัวอย่าง
*ตัวเอียง*
_ตัวเอียง_
**ตัวหนา**
__ตัวหนา__ผลลัพธ์
ตัวเอียง ตัวเอียง
ตัวหนา ตัวหนา
ถ้าต้องการแบบ ทั้งหนา และ เอียง ก็ต้องแบบนี้!
ตัวอย่าง
***ตัวหนาและเอียง***
___ตัวหนาและเอียง___ผลลัพธ์
ตัวหนาและเอียง ตัวหนาและเอียง
ข้อความที่ถูกขีดฆ่า ก็สร้างทำได้อย่างง่ายดาย โดยใช้ ~ เพียงแต่ใครที่ใช้ปุ่ม ` grave accent ในการเปลี่ยนภาษาอาจจะทำได้ยาก
ตัวอย่าง
~~ข้อความขีดฆ่า~~ผลลัพธ์
ข้อความขีดฆ่า
การสร้าง Link จะซับซ้อนขึ้นมาเล็กน้อย โดยมีรูปแบบโครงสร้างดังนี้ ใช้ [] ในการแสดงข้อความ และตามด้วย () เพื่อระบุ url
ตัวอย่าง
[wasin blog](https://www.wasin.me/)ผลลัพธ์
Listing
การทำ Listing แบบต่างๆ สามารถทำได้ง่ายมาก ไม่ว่าจะเป็นแบบ Ordering ใช้ตัวเลข ลักษณะไม่่มีลำดับ เป็น จุด ดังตัวอย่างด้านล่าง
ตัวอย่าง ตัวเลข (Ordering Listing)
1. ลำดับที่ 1
2. ลำดับที่ 2
3. ลำดับที่ 3ผลลัพธ์
- ลำดับที่ 1
- ลำดับที่ 2
- ลำดับที่ 3
ตัวอย่าง จุด (Non-ordering listing)
- ขีดที่ 1
- ขีดที่ 2
- ขีดที่ 3
* จุดที่ 1
* จุดที่ 2
* จุดที่ 3ผลลัพธ์
- จุดที่ 1
- จุดที่ 2
- จุดที่ 3
-
จุดที่ 1
-
จุดที่ 2
-
จุดที่ 3
นอกจากนี้ยังสามารถ ซ้อนเป็นลำดับชั้นได้ ดังตัวอย่าง
ตัวอย่าง x
- ขั้นที่ 1
- ขั้นที่ 2
- ขั้นที่ 3ผลลัพธ์
- ขั้นที่ 1
- ขั้นที่ 2
- ขั้นที่ 3
- ขั้นที่ 2
Task list
อีก 1 ความสามารถที่น่าสนใจคือการทำ task listing ให้เข้าใจง่ายๆ คือ ลักษณะคล้ายๆ to do list เขียนได้อย่างง่ายดายดังตัวอย่างดังนี้
ใช้ - [ ] สำหรับช่องที่ยังไม่ถูก check และเติม x ในช่องที่ check แล้ว - [x]
ตัวอย่าง
- [x] ทำแล้ว
- [ ] ยังไม่ทำ 1
- [ ] ยังไม่ทำ 2ผลลัพธ์
- ทำแล้ว
- ยังไม่ทำ 1
- ยังไม่ทำ 2
แทรกรูปภาพ
ในการจดโน้ตบางอย่าง ข้อความเพียงอย่างเดียวอาจจะอธิบาย หรือสื่อสารได้ยาก จำเป็นต้องมีการแทรกรูปภาพประกอบ การแทรกรูปภาพจะมีความซับซ้อน แต่จะคล้ายการทำ link เพียงแต่เพิ่มเครื่องหมาย ! ไปด้านหน้า
ตัวอย่าง
ผลลัพธ์
สร้างตาราง
สิ่งที่ยอดเยี่ยมคือสร้างตารางได้ด้วยการพิมพ์ แทบไม่ต้องจับ mouse หรือ แตะ touchpad เลย อาจจะต้องตั้งสติก่อนพิมพ์ แต่ถ้าเข้าใจแล้วจะสามารถทำได้ง่ายมาก
สามารถ ใช้ :- ในการจัดชิดซ้าย :-: กึ่งกลาง และ -: ชิดขวา ตามตัวอย่าง
ตัวอย่าง
| หัวตาราง 1 ชิดซ้าย | หัวตาราง 2 กึ่งกลาง| หัวตาราง 3 ชิดขวา |
|:- | :-: | -: |
| เนื้อความแถว 1 | เนื้อความแถว 1 | เนื้อความแถว 1 |
| เนื้อความแถว 2 | เนื้อความแถว 2 | เนื้อความแถว 2 |ผลลัพธ์
| หัวตาราง 1 ชิดซ้าย | หัวตาราง 2 กึ่งกลาง | หัวตาราง 3 ชิดขวา |
|---|---|---|
| เนื้อความแถว 1 | เนื้อความแถว 1 | เนื้อความแถว 1 |
| เนื้อความแถว 2 | เนื้อความแถว 2 | เนื้อความแถว 2 |