• รวบรวมฟังก์ชันตกแต่ง STEEMIT ตั้งแต่ basic ถึง advance •

in #thai7 years ago

# รวบรวมฟังก์ชันตกแต่ง STEEMIT ตั้งแต่ basic ถึง advance

หลายคนคงจะเคยเห็นว่า ทำไมบางคนเขียนจัดการเนื้อหาใน STEEMIT ได้หลากหลายแนว

ส่วนหนึ่งก็เพราะว่ามีการใช้ฟังก์ชันภาษาคอมพิวเตอร์ Markdown และ HTML
ในการจัดตัวอักษร จัดบรรทัด คอลัมน์ ให้ดูสวยงาม และเป็นระเบียบเรียบร้อย
ซึ่งวิธีใช้ฟังก์ชันต่างๆ ในเบื้องต้นทางเว็บ STEEMIT ได้มี Guide บอกไว้แล้ว
วันนี้ผมเลยจะรวมฟังก์ชัน ตั้งแต่ Basic ถึง Advance ให้ได้มากที่สุดเป็นภาษาไทยให้เลือกใช้ครับ

ก่อนอื่นต้องขออธิบายก่อนว่า
ภาษา Markdown เป็นการใช้ตัวอักษระพิเศษเช่น # * นำหน้าหรือตามหลังข้อความ
แต่ภาษา HTML จะใช้ <...> นำหน้า และ </...> ตามหลัง ข้อความ

ฟังก์ชันที่พิเศษมากๆ Markdown จะทำไมไ่ด้ เช่น แบ่งคอลัมน์ ตัวยก ตัวห้อย
ดังนั้นจึงต้องใช้ภาษา HTML เขียนเท่านั้นครับ


  • ปรับแต่งหัวข้อหลัก

หัวข้อ สร้างได้โดยใส่ # ไว้หน้าข้อความ หรือใส่ <h>..</h> คลุมข้อความที่ต้องการให้เป็นหัวข้อ
ซึ่งสามารถเลือกปรับขนาดได้ 6 ขนาด ตามจำนวน # หรือ ตัวเลขหลัง h ดังนี้

ขนาดหัวข้อ
วิธีเขียนโดยใช้ Markdown
วิธีเขียนโดยใช้ HTML

หัวข้อ

# หัวข้อ
<h1>หัวข้อ</h1>

หัวข้อ

## หัวข้อ
<h2>หัวข้อ</h2>

หัวข้อ

### หัวข้อ
<h3>หัวข้อ</h3>

หัวข้อ

#### หัวข้อ
<h4>หัวข้อ</h4>
หัวข้อ
##### หัวข้อ
<h5>หัวข้อ</h5>
หัวข้อ
###### หัวข้อ
<h6>หัวข้อ</h6>

 

  • ปรับแต่งตัวอักษร

โดยใส่ข้อความให้อยู่ระหว่าง สัญลักษณ์ ต่างๆ ดังนี้

ลักษณะ
วิธีเขียนโดยใช้ Markdown
วิธีเขียนโดยใช้ HTML
ผลลัพธ์ที่ได้
ตัวเอียง
*ข้อความ* หรือ _ข้อความ_
<i>ข้อความ</i>
ข้อความ
ตัวหนา
**ข้อความ** หรือ __ข้อความ__
<b>ข้อความ</b>
ข้อความ
ขีดเส้นทับ
~~ขีดเส้นข้อความ~~
<del>ขีดเส้นข้อความ</del>
ขีดเส้นข้อความ
ตัวยก
ข้อความ <sup>ตัวยก</sup>
ข้อความตัวยก
ตัวห้อย
ข้อความ <sub>ตัวห้อย</sub>
ข้อความตัวห้อย

 

  • การใส่รูปภาพ

1.อัพโหลดรูปภาพจากเครื่องของเราได้โดยตรง
2.สามารถเอา URL รูปภาพจาก Website อื่นๆ โดยการนำลิงค์รูปภาพมาลงได้เลย
เช่น แค่พิมพ์ URL https://steemitimages.com/DQmSvDcy3Uq4Uj8dH2isTEhfa2FaXFhjQJUNGfxFP7edqvC/U5dtTe4CknMNtP84D4fX1UxmweaGReq_1680x8400.png ลงไป จะได้รูปภาพนี้ขึ้นมาทันที


รูปจาก website ต้องเป็นรูปที่นำมาใช้ได้อย่างถูกลิขสิทธิ์ และเจ้าของอนุญาติเท่านั้น

 

  • การใส่ 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> ระหว่างข้อความ เช่น

วิธีเขียนโดยใช้ Markdown
วิธีเขียนโดยใช้ HTML
ผลลัพธ์ที่ได้
> ประโยคอ้างอิง
<blockquote>ประโยคอ้างอิง</blockquote>
ประโยคอ้างอิง

 

  • การใส่กล่องข้อความ

ทำได้โดยการ ใส่ `...` หรือ <code>...</code> ระหว่างข้อความ เช่น

วิธีเขียนโดยใช้ Markdown
วิธีเขียนโดยใช้ HTML
ผลลัพธ์ที่ได้
`กล่องข้อความ`
<code>กล่องข้อความ</code>
กล่องข้อความ

 

  • การใส่ List รายการต่างๆ

ทำได้โดยการพิมพ์ 1. 2. 3. ลงไปหน้าข้อความรายการต่างๆ
ผลลัพธ์ที่ได้จะจัดหน้ากระดาษให้อัตโนมัติ ดังนี้

  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>

วิธีเขียนโดยใช้ Markdown
วิธีเขียนโดยใช้ HTML
ไม่มี
<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>

 

อันนี้รวบรวมอันที่น่าจะมีประโยชน์แต่อาจจะยังไม่ครบทุกฟังก์ชันนะครับ อย่างไรก็ลองเอาไปใช้ดูกันก่อนเพื่อทำให้ Blog STEEMIT ของเราดูดี และน่าอ่านกันนะครับ
แนะนำเพิ่มเติมว่า ถ้าเราใช้ Markdown และ HTML ร่วมกันปนๆกันไป อาจทำให้การแสดงผลไม่ถูกต้องได้ครับ หากจะใช้หลายๆฟังก์ชันร่วมกัน ควรใช้ Markdown หรือ HTML เพียวๆ ไปเลยครับ


ถ้าชื่นชอบถูกใจ อยากสนับสนุน กด upvote กดติดตาม ได้ที่ @aunununn นะครับ

Sort:  

ขอบคุณมากค่ะ มีประโยชน์มากๆ

ขอบคุณมากๆค่ะ

ยอดเยี่ยมมากค่ะ 👏🏼👏🏼👏🏼

ขอบคุณสำหรับข้อมูลดีๆคับ ผมยังใหม่อยู่จะค่อยๆศึกษาและนำมาใช้ดู

ว้าว ขอบคุณครับผม ขอแชร์ไว้ศึกษาด้วยนะครับผม ^^

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.

thai line (1).png

โพสต์นี้ได้รับการเสนอชื่อ เป็นโพสต์ที่มีคุณภาพสูง และได้เข้าร่วมการแข่งขัน โพสต์คุณภาพสูงสำหรับสัปดาห์ที่ #1 นอกจากนี้ ยังได้รับฉลากเสนอชื่อในนามของ @thaiteam ป้ายนี้สามารถเพิ่มในโพสต์นี้ได้ โดยการแก้ไข แต่ไม่ใช่อยู่ในโพสต์อื่น เนื่องจากเป็นป้ายกำกับคุณภาพของ @thaiteam. เยี่ยมมาก!

nominate work very small.png

Good Work.

@thaiteam

ขอบคุณมากค่ะช่วยได้เยอะเลยจริงๆโพสนี้
ชอบมากค่ะ :-)
ตุ๊กติ๊ก

ขอบคุณนะคะ เป็นข้อมูลที่มีประโยชน์มากเลยค่ะ

ขอบคุณสำหรับบทความดีๆ ค่ะ อยากตกแต่งเรื่องราวบน steemit ให้น่าอ่าน^^

ขอบคุณครับ กำลังงงเลยมือใหม่ครับ ช่วยได้มากมาย