
# รวบรวมฟังก์ชันตกแต่ง STEEMIT ตั้งแต่ basic ถึง advance
ก่อนอื่นต้องขออธิบายก่อนว่า
ภาษา Markdown เป็นการใช้ตัวอักษระพิเศษเช่น # * นำหน้าหรือตามหลังข้อความ
แต่ภาษา HTML จะใช้ <...> นำหน้า และ </...> ตามหลัง ข้อความ
ฟังก์ชันที่พิเศษมากๆ Markdown จะทำไมไ่ด้ เช่น แบ่งคอลัมน์ ตัวยก ตัวห้อย
ดังนั้นจึงต้องใช้ภาษา HTML เขียนเท่านั้นครับ
ปรับแต่งหัวข้อหลัก
หัวข้อ สร้างได้โดยใส่ # ไว้หน้าข้อความ หรือใส่ <h>..</h> คลุมข้อความที่ต้องการให้เป็นหัวข้อ
ซึ่งสามารถเลือกปรับขนาดได้ 6 ขนาด ตามจำนวน # หรือ ตัวเลขหลัง h ดังนี้
หัวข้อ
หัวข้อ\
หัวข้อ
หัวข้อ\
หัวข้อ
หัวข้อ\
หัวข้อ
หัวข้อ\
หัวข้อ
หัวข้อ\
หัวข้อ
หัวข้อ\
ปรับแต่งตัวอักษร
โดยใส่ข้อความให้อยู่ระหว่าง สัญลักษณ์ ต่างๆ ดังนี้
การใส่รูปภาพ
1.อัพโหลดรูปภาพจากเครื่องของเราได้โดยตรง
2.สามารถเอา URL รูปภาพจาก Website อื่นๆ โดยการนำลิงค์รูปภาพมาลงได้เลย
เช่น แค่พิมพ์ URL ลงไป จะได้รูปภาพนี้ขึ้นมาทันที
การใส่ Link
1.สามารถนำ URL มาแปะได้โดยตรง ระบบจะทำ Link ให้อัตโนมัติ
2.สร้าง Link จาก ข้อความ โดยการ พิมพ์ข้อความที่ต้องการใน [...] ตามด้วย URL website ใน (...)
ตัวอย่างเช่น [ข้อความ](http://steemit.com\) จะได้ผลลัพธ์ดังนี้ ----> ข้อความ
3.สร้าง Link จาก รูปภาพ โดยการ ใส่ [<img src="URL รูปภาพในนี้">](Website Link ที่ต้องการ)
เช่น [<img src=" ">](
http://steemit.com) จะได้รูปนี้
การใส่ Quote หรือ ประโยคอ้างอิงต่างๆ
ทำได้โดยการ ใส่ > หน้าข้อความ หรือ <blockquote>...</blockquote> ระหว่างข้อความ เช่น
ประโยคอ้างอิง\
ประโยคอ้างอิง
การใส่กล่องข้อความ
ทำได้โดยการ ใส่ `...` หรือ <code>...</code> ระหว่างข้อความ เช่น
กล่องข้อความ\กล่องข้อความ
การใส่ List รายการต่างๆ
ทำได้โดยการพิมพ์ 1. 2. 3. ลงไปหน้าข้อความรายการต่างๆ
ผลลัพธ์ที่ได้จะจัดหน้ากระดาษให้อัตโนมัติ ดังนี้
- ข้อความ
- ข้อความ
- ข้อความ
หรือพิมพ์ * หรือ + หรือ - ลงไปหน้าข้อความรายการ
และสามารถทำรายการย่อยซ้อนกันได้อีก โดยการ เคาะ Spacebar 2 ครั้ง ตามด้วย * หรือ + หรือ -
ผลลัพธ์ที่ได้จะจัดหน้ากระดาษให้อัตโนมัติ ดังนี้
- ข้อความ
- ข้อความ
- ข้อความย่อย
- ข้อความย่อย
การสร้างตาราง
หัวข้อที่ 1 | หัวข้อที่ 2 | หัวข้อที่ 3 | หัวข้อที่ 4
------ | ------ | ------ | ------
ข้อความ | ข้อความ | ข้อความ | ข้อความ
ข้อความ | ข้อความ | ข้อความ | ข้อความ
| หัวข้อที่ 1 | หัวข้อที่ 2 | หัวข้อที่ 3 | หัวข้อที่ 4 |
|---|---|---|---|
| ข้อความ | ข้อความ | ข้อความ | ข้อความ |
| ข้อความ | ข้อความ | ข้อความ | ข้อความ |
การแบ่งคอลัมน์
<div class=pull-left>
ข้อความในคอลัมน์ฝั่งซ้าย
</div>
<div class=pull-right>
ข้อความในคอลัมน์ฝั่งขวา
</div>
แบ่งเส้นคั่นหน้า
สามารถ พิมพ์ --- หรือ === หรือ ___ หรือ <hr> เพื่อสร้างเส้นคั่นหน้าได้
จัดข้อความให้อยู่ตรงกลาง
การจัดตำแหน่งข้อความหรือรูป ให้อยู่ตรงกลาง ทำได้โดยการพิม <center>ข้อความ</center>
ผลลัพธ์ที่ได้
"นี่คือข้อความที่จัดอยู่ในตำแหน่งตรงกลางหน้ากระดาษ" "นี่คือข้อความที่ไม่ได้จัดอยู่ในตำแหน่งตรงกลางหน้ากระดาษ"
เว้นบรรทัดใหม่
จะเห็นว่า ถ้าเราพยายามจะเว้นบรรทัดเปล่าๆ โดยการ Enter เฉยๆ เราจะเว้นได้แค่ 1 บรรทัดเท่านั้น
แต่สามารถเว้นบรรทัดใหม่หลายๆ บรรทัด ได้โดยโดยการ <br/> ลงไป ตามจำนวนบรรทัดที่เราต้องการ
ต้องการเว้นช่องไฟห่างๆ (เคาะ spacebar หลายครั้ง)
จะเห็นว่า ถ้าเราพยายามจะเว้นช่องไฟห่าง โดยการ spacebar หลายๆครั้ง เราจะเว้นได้แค่ 1 ช่อง spacebar เท่านั้น
หากต้องการเว้นหลายๆ ช่อง ให้พิมพ์ <pre>.....</pre> คลุมข้อความนั้น
ตัวอย่างผลลัพธ์ที่ได้
เว้นช่องไฟ 1 ช่อง 2 ช่อง 3 ช่อง 4 ช่อง 5 ช่อง 6 ช่อง 7 ช่อง 8 ช่อง
พิมพ์ตัวอักษรพิเศษ
อยากพิมพ์ตัวอักษร พิเศษ ลงไป เช่น * # แต่ระบบจะนึกว่าเราต้องการเขียนฟังก์ชัน Markdown
ดังนั้นให้ ใส่เครื่องหมาย \ นำหน้าตัวอักษรพิเศษ เช่น \* หรือ \# จะทำให้พิมพ์ * # ได้
การเขียนเชิงอรรถ
ทำได้โดยการพิมพ์ [^1] [^2] [^3] ไว้หลังข้อความ
และพิมพ์ [^1]:เชิงอรรถที่จะใช้อ้างอิงนั้นๆ ตามหลังบทความ
การย่อรูปภาพ
ยังไม่สามารถ ย่อรูปภาพได้โดยตรง ทำได้แค่ นำรูปมาใส่ ในคอลัมน์ จะทำให้ขนาดรูปเล็กลง 50%
ซึ่งสามารถ นำคอลัมน์ซ้อนคอลัมน์ เพื่อให้ขนาดภาพลดลงเหลือ 25% จากขนาดปกติ
<div class=pull-left>
https://upload.wikimedia.org/wikipedia/commons/f/fa/Steemit-big.png
<div class=pull-left>
https://upload.wikimedia.org/wikipedia/commons/f/fa/Steemit-big.png
<div class=pull-left>
https://upload.wikimedia.org/wikipedia/commons/f/fa/Steemit-big.png
</div>
</div>
</div>