วงแหวนเว็บ

จดบันทึกการใช้งาน Markdown ฉบับรวบรัด

จด syntax ของ Markdown ที่ใช้เขียนบทความบ่อยๆ

จดบันทึกการใช้งาน 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’); ```

สมมติว่า ต้องการฝังลิงค์ไปที่ข้อความตรง “ 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

![Image Alt](/path/to/image.jpg)

ถ้าแนบ link ของรูปด้วย

[![Image Alt](/path/to/image.jpg)](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/

https://pandao.github.io/editor.md/en.html#Editor.md

https://dev.to/stephencweiss/named-anchors-markdown-2hm5


Share Tweet Send
0 Comments
Loading...
You've successfully subscribed to Toupawa Blog
Great! Next, complete checkout for full access to Toupawa Blog
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.