• รวบรวมฟังก์ชันตกแต่ง STEEMIT ตั้งแต่ basic ถึง advance •
# รวบรวมฟังก์ชันตกแต่ง STEEMIT ตั้งแต่ basic ถึง advance
ในการจัดตัวอักษร จัดบรรทัด คอลัมน์ ให้ดูสวยงาม และเป็นระเบียบเรียบร้อย
ซึ่งวิธีใช้ฟังก์ชันต่างๆ ในเบื้องต้นทางเว็บ STEEMIT ได้มี Guide บอกไว้แล้ว
วันนี้ผมเลยจะรวมฟังก์ชัน ตั้งแต่ Basic ถึง Advance ให้ได้มากที่สุดเป็นภาษาไทยให้เลือกใช้ครับ
ก่อนอื่นต้องขออธิบายก่อนว่า
ภาษา Markdown เป็นการใช้ตัวอักษระพิเศษเช่น # * นำหน้าหรือตามหลังข้อความ
แต่ภาษา HTML จะใช้ <...> นำหน้า และ </...> ตามหลัง ข้อความ
ฟังก์ชันที่พิเศษมากๆ Markdown จะทำไมไ่ด้ เช่น แบ่งคอลัมน์ ตัวยก ตัวห้อย
ดังนั้นจึงต้องใช้ภาษา HTML เขียนเท่านั้นครับ
ปรับแต่งหัวข้อหลัก
หัวข้อ สร้างได้โดยใส่ # ไว้หน้าข้อความ หรือใส่ <h>..</h> คลุมข้อความที่ต้องการให้เป็นหัวข้อ
ซึ่งสามารถเลือกปรับขนาดได้ 6 ขนาด ตามจำนวน # หรือ ตัวเลขหลัง h ดังนี้
หัวข้อ | ||
หัวข้อ | ||
หัวข้อ | ||
หัวข้อ | ||
หัวข้อ | ||
หัวข้อ |
ปรับแต่งตัวอักษร
โดยใส่ข้อความให้อยู่ระหว่าง สัญลักษณ์ ต่างๆ ดังนี้
การใส่รูปภาพ
1.อัพโหลดรูปภาพจากเครื่องของเราได้โดยตรง
2.สามารถเอา URL รูปภาพจาก Website อื่นๆ โดยการนำลิงค์รูปภาพมาลงได้เลย
เช่น แค่พิมพ์ URL https://steemitimages.com/DQmSvDcy3Uq4Uj8dH2isTEhfa2FaXFhjQJUNGfxFP7edqvC/U5dtTe4CknMNtP84D4fX1UxmweaGReq_1680x8400.png
ลงไป จะได้รูปภาพนี้ขึ้นมาทันที
การใส่ Link
1.สามารถนำ URL มาแปะได้โดยตรง ระบบจะทำ Link ให้อัตโนมัติ
2.สร้าง Link จาก ข้อความ โดยการ พิมพ์ข้อความที่ต้องการใน [...] ตามด้วย URL website ใน (...)
ตัวอย่างเช่น [ข้อความ](http://steemit.com) จะได้ผลลัพธ์ดังนี้ ----> ข้อความ
3.สร้าง Link จาก รูปภาพ โดยการ ใส่ [<img src="URL รูปภาพในนี้">](Website Link ที่ต้องการ)
เช่น [<img src=" https://upload.wikimedia.org/wikipedia/commons/f/fa/Steemit-big.png
">](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>
แนะนำเพิ่มเติมว่า ถ้าเราใช้ Markdown และ HTML ร่วมกันปนๆกันไป อาจทำให้การแสดงผลไม่ถูกต้องได้ครับ หากจะใช้หลายๆฟังก์ชันร่วมกัน ควรใช้ Markdown หรือ HTML เพียวๆ ไปเลยครับ
ขอบคุณมากค่ะ มีประโยชน์มากๆ
ขอบคุณมากๆค่ะ
ยอดเยี่ยมมากค่ะ 👏🏼👏🏼👏🏼
ขอบคุณสำหรับข้อมูลดีๆคับ ผมยังใหม่อยู่จะค่อยๆศึกษาและนำมาใช้ดู
ว้าว ขอบคุณครับผม ขอแชร์ไว้ศึกษาด้วยนะครับผม ^^
This post is nominated as a high-quality post and will run into the Thai High-Quality Post Contest for week #1. Also, it has received the nominate Label on the behalf of @thaiteam. This Label can be added to this post by editing but not on another post as it is a Label of quality owned by @thaiteam. Good Work.
โพสต์นี้ได้รับการเสนอชื่อ เป็นโพสต์ที่มีคุณภาพสูง และได้เข้าร่วมการแข่งขัน โพสต์คุณภาพสูงสำหรับสัปดาห์ที่ #1 นอกจากนี้ ยังได้รับฉลากเสนอชื่อในนามของ @thaiteam ป้ายนี้สามารถเพิ่มในโพสต์นี้ได้ โดยการแก้ไข แต่ไม่ใช่อยู่ในโพสต์อื่น เนื่องจากเป็นป้ายกำกับคุณภาพของ @thaiteam. เยี่ยมมาก!
ขอบคุณมากค่ะช่วยได้เยอะเลยจริงๆโพสนี้
ชอบมากค่ะ :-)
ตุ๊กติ๊ก
ขอบคุณนะคะ เป็นข้อมูลที่มีประโยชน์มากเลยค่ะ
ขอบคุณสำหรับบทความดีๆ ค่ะ อยากตกแต่งเรื่องราวบน steemit ให้น่าอ่าน^^
ขอบคุณครับ กำลังงงเลยมือใหม่ครับ ช่วยได้มากมาย