จดบันทึกการใช้งาน Markdown ฉบับรวบรัด
บทความนี้จะเป็นการบันทึกความรู้เรื่องการใช้ Makdown ในการเขียนบทความลงในเว็บ โดยสรุปเป็นหัวข้อย่อยๆ เน้นที่ใช้งานบ่อยๆ เพื่อสะดวกในการจดจำและนำไปใช้ ดังนั้นขอสรุปข้อปลีกย่อยออกมาเป็นดังนี้
การสร้างหัวข้อ
# H1 Header
## H2 Header
### H3 Header
#### H4 Header
##### H5 Header
Source Code
ใช้ ` ครอบหัว-ท้าย สำหรับโค้ดบรรทัดเดียว
ใช้ ``` ครอบหัว-ท้าย สำหรับโค้ดหลายๆบรรทัด
` Inline code `
```Multi-line code```
สามารถเพิ่ม comment ได้ด้วย
```comment
Multi-line code with comment ```
ยกตัวอย่าง
```Javascript
console.log(‘Hello World’); ```
การสร้าง Link
สมมติว่า ต้องการฝังลิงค์ไปที่ข้อความตรง “ description of link” ให้เขียน syntax แบบนี้
Text for description of link [description of link](http://…...)
จะมีค่าเท่ากับ syntax ของ HTML ดังนี้
Text for <a href=’http://…….’>description of link</a>
Anchor
Anchor คือ ลิงค์ที่ใช้เชื่อมโยงเข้ากับส่วนข้อความใดๆที่อยู่บนหน้าเว็บ
การใช้ Anchor เพื่อสร้าง link เชื่อมโยงไปหาข้อความที่ต้องการ
At URL http://yourwebsite.com
...
### <a name="title-text"></a>Title Text
...
And then later, I want to go to [title](#title-text), you create a link, just like any other.
จะได้ Link <http://yourwebsite.com#title-text> หน้าหัวข้อ Title Text สามารถเอาลิงค์ไปแปะที่ส่วนอื่นๆของหน้าเว็บ เช่น [title](#title-text)
สามารถทดสอบการทำงานโดย
กด ตรงนี้ เพื่อไปยังหัวข้อ anchor
Images
การแนบรูปภาพใน Markdown ก็ทำได้เช่นกัน
แบบไม่มี link
ถ้าแนบ link ของรูปด้วย
[](http://........)
Escape
การยกเว้นการแสดงผลของสัญลักษณ์ใน Markdown ด้วยการใช้ \
\*Just a simple text\*
จะได้
*Just a simple text*
นอกจาก \ ยังมีเครื่องหมายอื่นๆอีกที่สามารถทำได้ ดูเพิ่มเติม
Tables
สามารถสร้างตารางได้ โดยใช้ | column และใช้ --- คั่นระหว่าง Header กับ Content และใช้ : สำหรับปรับ Align
ใช้ | ปิดหัว-ท้ายหรือไม่ก็ได้
แบบเปิด
First Header | Second Header
------------- | -------------
Content Cell | Content Cell
Content Cell | Content Cell
แบบปิด
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
ถ้าต้องการปรับ Align
| Left-Aligned | Center Aligned | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is | some wordy text | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
Table of Contents
สร้าง List แสดงหัวข้อรายการบนบทความเราได้ เพื่ออำนวยความสะดวกให้กับผู้อ่านได้เลือกหัวข้ออ่าน โดยไม่ต้อง scroll mouse ลงมา มี 2 แบบ คือ
แบบ Drop down
[TOCM]
แบบ List แสดงหัวข้อหลัก หัวข้อย่อย เรียงตามลำดับเนื้อหา
[TOC]
ทั้งหมดนี้เป็นเพียงส่วนหนึ่งที่ใช้บ่อยๆในงานเขียนบทความของผมเท่านั้น ซึ่ง Markdown เป็นเครื่องมือที่เหมาะสมกับงานเขียนมาก เพราะไม่ต้องพะวงกับการใช้ tag และ Attribute ต่างๆเหมือน HTML เพียงทำงานเหมือนโปรแกรมเอกสารทั่วไป เช่น MS-Word และฝึกการใช้ syntax เล็กน้อยก็สามารถผลิตบทความออกมาได้แล้วครับ
Ref :
https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#links
https://www.markdownguide.org/basic-syntax/
