มารู้จักการเขียน Markdown กัน

มารู้จักการเขียน Markdown กัน

เพื่อนๆเคยได้ยินเกี่ยวกับ Markdown มาบ้างรึเปล่า ถ้าเคยแสดงว่าดีแล้ว 555

Markdown คืออะไร?

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

ย้อนกลับไปเมื่อปี 2004 John Gruber เขามีไอเดียหลังจากที่ต้องใช้เวลานานในการเขียน tag ของ HTML เพื่อให้บทความของเขาออกมาดี

John Gruber, the author of Markdown, puts it like this:

The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. While Markdown’s syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown’s syntax is the format of plain text email.

เหตุผลที่ว่าทำไมต้องใช้ Markdown

  • Markdown ง่ายที่จะเรียนรู้ มีตัวพิเศษน้อย ดังนั้นจะทำให้เขียน content ได้อย่างรวดเร็ว
  • ลดความผิดพลาดที่เกิดจาก syntax error เวลาเขียน html tag
  • เมื่อเขียนเสร็จผลที่ได้เหมือนกับการเขียนแบบ html เลย
  • สามารถเขียนที่ไหนก็ได้ โดยไม่จำเป็นต้องดูว่าเว็บจะเป็นแบบไหน
  • สามารถใช้ text editor ตัวไหนก็ได้เขียนเพราะเป็นแค่ text ผมใช้ VS Code
  • ใช้แล้วเขียน content สนุกขึ้นเยอะเลย

ในบทความนี้ผมจะแนะแนวทางการเขียน Document โดยบทความนี้ใช้ markdown syntax ทั้งหมดเลย

เนื้อหาที่ผมจะมาสอนในวันนี้

  • Headings ขนาดของหัวข้อ
  • Paragraphs เขียนย่อหน้า
  • Horizontal Line เส้นคั่นหน้า
  • Comments คอมเม้นท์
  • Styling text ตัวหนา ตัวเอียง ตัวขีดฆ่า
  • Quoting text ข้อมูลอ้างอิง กล่องคำพูด
  • Quoting code กล่องข้อความ Code
  • Links รูปภาพ/url
  • Lists สร้างรายการ
  • Tables ตาราง
  • Extras ตัวอักษรพิเศษอื่นๆ

Headings ขนาดของหัวข้อ

การเขียน Heading หรือหัวข้อนั้นสามารถเขียนได้โดยการใช้เครื่องหมาย # ไว้ที่ต้นบรรทัด ตั้งแต่ 1-6 ตัว โดยจำนวนตัวของ # นั้นจะแสดงถึงความใหญ่ของหัวข้อที่เราเขียน ซึ่งมีอยู่ทั้งหมด 6 ระดับ

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

Paragraphs เขียนย่อหน้า

เราสามารถขั้นย่อหน้าได้โดยการกด Enter 2 ครั้ง หรือเว้นเอาไว้ 1 บรรทัด

เศรษฐีคนหนึ่งชอบใจลูกสาวชาวนายากไร้ผู้หนึ่ง
เขาเชิญชาวนากับลูกสาวไปที่สวนในคฤหาสน์ของเขาเป็นกรวดกว้างใหญ่
ที่มีแต่กรวดสีดำกับสีขาวเศรษฐีบอกชาวนาว่า
“ท่านเป็นหนี้ข้าจำนวนหนึ่ง แต่หากท่านยกลูกสาวให้ ข้าจะยกหนีสินให้ทั้งหมด” ชาวนาไม่ตกลง

เศรษฐีบอกว่า “ถ้าเช่นนั้นเรามาพนันกันดีไหม ข้าจะหยิบกรวดสองก้อนขึ้นมาใส่ในถุงผ้านี้
ก้อนหนึ่งสีดำ ก้อนหนึ่งสีขาว ให้ลูกสาวของท่านหยิบก้อนกรวดจากถุงนี้
หากนางหยิบได้ก้อนสีขาว ข้าจะยกหนี้สินให้ท่าน
และนางไม่ต้องแต่งงานกับข้า แต่หากนางหยิบได้ก้อนสีดำ นางต้องแต่งงานกับข้า
และแน่นอนข้าจะยกหนี้ให้ท่านด้วย”ชาวนาตกลงเศรษฐีหยิบกรวดสองก้นใส่ในถุงผ้า

เศรษฐีคนหนึ่งชอบใจลูกสาวชาวนายากไร้ผู้หนึ่ง
เขาเชิญชาวนากับลูกสาวไปที่สวนในคฤหาสน์ของเขาเป็นกรวดกว้างใหญ่
ที่มีแต่กรวดสีดำกับสีขาวเศรษฐีบอกชาวนาว่า
“ท่านเป็นหนี้ข้าจำนวนหนึ่ง แต่หากท่านยกลูกสาวให้ ข้าจะยกหนีสินให้ทั้งหมด” ชาวนาไม่ตกลง

เศรษฐีบอกว่า “ถ้าเช่นนั้นเรามาพนันกันดีไหม ข้าจะหยิบกรวดสองก้อนขึ้นมาใส่ในถุงผ้านี้
ก้อนหนึ่งสีดำ ก้อนหนึ่งสีขาว ให้ลูกสาวของท่านหยิบก้อนกรวดจากถุงนี้
หากนางหยิบได้ก้อนสีขาว ข้าจะยกหนี้สินให้ท่าน
และนางไม่ต้องแต่งงานกับข้า แต่หากนางหยิบได้ก้อนสีดำ นางต้องแต่งงานกับข้า
และแน่นอนข้าจะยกหนี้ให้ท่านด้วย”ชาวนาตกลงเศรษฐีหยิบกรวดสองก้นใส่ในถุงผ้า


Horizontal Line เส้นคั่นหน้า

ใช้สำหรับในการแบ่งเนื้อหาออกเป็นส่วนๆ

*** ดอกจัน ติดกัน 3 ตัว
--- เครื่องหมายลบ ติดกัน 3 ตัว
___ Undersocres ติดกัน 3 ตัว

Comments

เขียนคอมเม้นท์เอาไว้อ่านเองทีหลังได้

<!--นี่คือคอมเม้นของไฟล์นี้-->


Styling text รูปแบบของข้อความ

หากต้องการเขียนข้อความแล้วมีคำที่ต้องการ เน้น ก็สามารถเขียนได้โดย

รูปแบบ วิธีเขียน ตัวอย่าง ผลที่ได้
ตัวหนา ** ** **ข้อความตัวหนา** ข้อความตัวหนา
ตัวเอียง * * *ข้อความตัวเอียง* ข้อความตัวเอียง
ตัวขีดฆ่า ~~ ~~ ~~ข้อความโดนขีดฆ่า~~ ~~ข้อความโดนขีดฆ่า~~
ตัวหนา,เอียง ** **,* * **ข้อความ*สำคัญ*** ข้อความสำคัญ

สามารถที่จะเขียนผสมกันได้นะครับ


Quoting text ข้อความที่ใช้อ้างอิง

สามารถเขียนได้โดยใช้ > อยู่ด้านหน้าสุดของบรรทัด

กฏ 3 ข้อของหุ่นยนต์ ถูกตั้งขึ้นโดย ไอแซค อสิมอฟ เพื่อใช้กับหุ่นยนต์ในนิยายของเขา ว่า

> 1 หุ่นยนต์ห้ามทำอันตรายแก่มนุษย์ หรือปล่อยให้มนุษย์เป็นอันตราย
>
> 2 หุ่นยนต์ต้องเชื่อฟังคำสั่งของมนุษย์ ยกเว้นถ้าคำสั่งนั้นขัดแย้งกับกฏข้อแรก
>
> 3 หุ่นยนต์ต้องปกป้องความมีตัวตนเอาไว้ เท่าที่ไม่ได้ขัดกับกฏข้อแรกหรือกฏข้อสอง

กฏ 3 ข้อของหุ่นยนต์ ถูกตั้งขึ้นโดย ไอแซค อสิมอฟ เพื่อใช้กับหุ่นยนต์ในนิยายของเขา ว่า

1 หุ่นยนต์ห้ามทำอันตรายแก่มนุษย์ หรือปล่อยให้มนุษย์เป็นอันตราย

2 หุ่นยนต์ต้องเชื่อฟังคำสั่งของมนุษย์ ยกเว้นถ้าคำสั่งนั้นขัดแย้งกับกฏข้อแรก

3 หุ่นยนต์ต้องปกป้องความมีตัวตนเอาไว้ เท่าที่ไม่ได้ขัดกับกฏข้อแรกหรือกฏข้อสอง


Code and Syntax Highlighting

Inline code

เราสามารถเขียนคำสั่งหรือ code ในข้อความของเราได้โดยการใส่ backticks หรือ backquote ( ` ) อยู่ตรงปุ่มตัวหนอน ซึ่งข้อความที่อยู่ภายในตัวนี้จะไม่โดนเปลี่ยนรูปแบบ

ผมต้องการเขียนวิธีใช้**ตัวหนา**ให้เพื่อนๆดู ก็จะเขียนได้แบบนี้ `**นี่คือตัวหนา**` เขียนแบบนี้นะ

ผมต้องการเขียนวิธีใช้ตัวหนาให้เพื่อนๆดู ก็จะเขียนได้แบบนี้ **นี่คือตัวหนา** เขียนแบบนี้นะ

Block code

หากต้องการจะเขียน code ก็สามารถเขียนได้โดยใช้ backquote 3 ตัว

นี่คือตัวอย่างโปรแกรมภาษา Python
``` python
print("Hello World"
```

นี่คือตัวอย่างโปรแกรมภาษา C
``` c
#include 
int main(){
    printf("Hello World")
    return 0;
}
```

นี่คือตัวอย่างโปรแกรมภาษา Python

print("Hello World",i)

นี่คือตัวอย่างโปรแกรมภาษา C

#include <stdio.h>
int main(){
    printf("Hello World");
    return 0;
}

Links การใส่ รูปภาพ และ ลิ้งค์หน้าเว็บ

เราสามารถใส่ลิ้งค์ให้กับข้อความที่เราต้องการได้

Normal link

เป็นการเขียนลิ้งค์แบบปกติโดยใช้ “

บทความนี้ผมก็นั่งอ่านข้อมูลจาก  ซึ่งเป็นต้นตำหรับ markdown

บทความนี้ผมก็นั่งอ่านข้อมูลจาก ซึ่งเป็นต้นตำหรับ markdown

Link แบบมี alt text

เป็นการเขียนแบบมีข้อความมาแทนที่ [alt text](url)

การเขียน markdown นั้นสามารถนำไปใช้กับเว็บ [GitHub](https://www.github.com/) ได้

การเขียน markdown นั้นสามารถนำไปใช้กับเว็บ GitHub ได้

Image link

เป็นการใส่รูปภาพจาก url โดยการใช้ ![alt text](url) สังเกตว่าวิธีการนั้นจะเหมือนกับการใส่ลิ้งค์เลย แต่มีข้อแตกต่างคือ รูปภาพ นั้นจะมี ! นำหน้าอยู่

ผมหารูปฟรีสวยๆมาใส่บทความเห็นรูปนี้แล้วชอบมาก![Github Desktop](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCZze_2ihfOzglP9-1dzqkdDS8RKaCBYkhUamDIL5D5HO-pLt_ZQ)

ผมหารูปฟรีสวยๆมาใส่บทความเห็นรูปนี้แล้วชอบมาก
Github Desktop

Link ref

หากต้องการใช้หลายๆที่ ก็อาจจะเขียนเป็น ref ไปแทน

[Google][1]
[Facebook][2]
[GitHub][3]

[1]: https://www.google.co.th/
[2]: https://www.facebook.com/
[3]: https://www.github.com/

Google
Facebook
GitHub


Lists ลิสรายการ

Unorder list หรือก็คือแบบไม่มีลำดับ

เราสามารถสร้างรายการแบบไม่สนใจลำดับได้โดยการใส่ * เอาไว้ข้างหน้า

* ผลไม้
    * กล้วย
    * ส้มโอ
    * แตงโม
* อาหาร
    * ข้าวขาหมู
    * ข้าวมันไก่
        * ไก่ทอด
        * ไก่ต้ม
* สัตว์
    * เต่า
    * กระต่าย
  • ผลไม้
    • กล้วย
    • ส้มโอ
    • แตงโม
  • อาหาร
    • ข้าวขาหมู
    • ข้าวมันไก่
    • ไก่ทอด
    • ไก่ต้ม
  • สัตว์
    • เต่า
    • กระต่าย

Order list หรือก็คือแบบมีลำดับ

เราสามารถสร้างรายการแบบมีลำดับบอกได้โดยการใส่ 1. เอาไว้ข้างหน้ามันจะจัดการลำดับให้เรา

1. ซักผ้า
    1. แยกผ้าขาว
    1. แยกผ้าสี
    1. ใส่เครื่องซักผ้า
        1. ใส่ผงซักฟอก
        1. ใส่น้ำยาปรับผ้านุ่ม
1. ตากผ้า
    1. เรียกน้องมาตาก
1. รีดผ้า
    1. บอกให้แม่รีด
  1. ซักผ้า
    1. แยกผ้าขาว
    2. แยกผ้าสี
    3. ใส่เครื่องซักผ้า
      1. ใส่ผงซักฟอก
      2. ใส่น้ำยาปรับผ้านุ่ม
  2. ตากผ้า
    1. เรียกน้องมาตาก
  3. รีดผ้า
    1. บอกให้แม่รีด

Task list

เราสามารถเขียนได้โดยการเขียน * [ ] หรือ * [x] เอาไว้ข้างหน้ารายการได้

* [x] ทำน้ำแข็งใส่ตู้เย็น
* [x] จ่ายค่าโทรศัพท์
* [ ] จ่ายค่าอินเตอร์เน็ต
* [ ] ทำการบ้าน
* [ ] อ่านหนังสือสอบ
* [x] บอกแม่ให้จ่ายค่าเทอม
  • [x] ทำน้ำแข็งใส่ตู้เย็น
  • [x] จ่ายค่าโทรศัพท์
  • [ ] จ่ายค่าอินเตอร์เน็ต
  • [ ] ทำการบ้าน
  • [ ] อ่านหนังสือสอบ
  • [x] บอกแม่ให้จ่ายค่าเทอม

Tables ตาราง

| คำศัพท์ | จัดชิดขอบข้าย | จัดกึ่งกลาง | จัดชิดขอบขวา |
| ----- | :------ | :----: | -------: |
| Ant | มด | มด | มด |
| Bat | ค้างคาว | ค้างคาว | ค้างคาว |
| Cat | แมว | แมว | แมว |
คำศัพท์ จัดชิดขอบข้าย จัดกึ่งกลาง จัดชิดขอบขวา
Ant มด มด มด
Bat ค้างคาว ค้างคาว ค้างคาว
Cat แมว แมว แมว

Extras ตัวอักษรพิเศษอื่นๆ

Markdown นั้นจะใช้ตัวอักษรพิเศษต่างๆเพื่อการจัดรูปแบบของเว็บเพจ หากเราต้องการเขียนตัวอักษรพิเศษ ให้เขียนเครื่องหมาย \ นำหน้าเครื่องหมายที่เราต้องการ

ชื่อ สัญลักษณ์ วิธีเขียน
backslash \ \\
asterisk * \*
underscore _ \_
curly brackets { } \{ \}
square brackets [ ] \[ \]
parenthese ( ) \(\)
hash mask # \#
plus sign + \+
minus sign - \-
dot . \.
exclamation ! \!
backqoute ` `

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s