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

By @aunununn1/19/2018thai

https://steemitimages.com/DQmRYn37iXnnwnP9H4rYnoroMG4xwZ8EEKghDqJbG1Vc91N/kristian-seedorff-149478%20copy.jpg

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

หลายคนคงจะเคยเห็นว่า ทำไมบางคนเขียนจัดการเนื้อหาใน STEEMIT ได้หลากหลายแนว
ส่วนหนึ่งก็เพราะว่ามีการใช้ฟังก์ชันภาษาคอมพิวเตอร์ *Markdown* และ *HTML* ในการจัดตัวอักษร จัดบรรทัด คอลัมน์ ให้ดูสวยงาม และเป็นระเบียบเรียบร้อย ซึ่งวิธีใช้ฟังก์ชันต่างๆ ในเบื้องต้นทางเว็บ STEEMIT ได้มี [*Guide*](https://guides.github.com/features/mastering-markdown) บอกไว้แล้ว วันนี้ผมเลยจะรวมฟังก์ชัน ตั้งแต่ Basic ถึง Advance ให้ได้มากที่สุดเป็นภาษาไทยให้เลือกใช้ครับ

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

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


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

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

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

หัวข้อ

|
\# หัวข้อ
|
\

หัวข้อ\

หัวข้อ

|
\## หัวข้อ
|
\

หัวข้อ\

หัวข้อ

|
\### หัวข้อ
|
\

หัวข้อ\

หัวข้อ

|
\#### หัวข้อ
|
\

หัวข้อ\

หัวข้อ
|
\##### หัวข้อ
|
\
หัวข้อ\
หัวข้อ
|
\###### หัวข้อ
|
\
หัวข้อ\

 

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

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

ลักษณะ
|
วิธีเขียนโดยใช้ Markdown
|
วิธีเขียนโดยใช้ HTML
|
ผลลัพธ์ที่ได้
-| -| - | -
ตัวเอียง
|
\*ข้อความ\* หรือ \_ข้อความ\_
|
\ข้อความ\
|
*ข้อความ*
ตัวหนา
|
\*\*ข้อความ\*\* หรือ \_\_ข้อความ\_\_
|
\ข้อความ\
|
**ข้อความ**
ขีดเส้นทับ
|
\~~ขีดเส้นข้อความ\~~
|
\ขีดเส้นข้อความ\
|
~~ขีดเส้นข้อความ~~
ตัวยก
|
|
ข้อความ \ตัวยก\
|
ข้อความตัวยก
ตัวห้อย
|
|
ข้อความ \ตัวห้อย\
|
ข้อความตัวห้อย

 

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

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
|
ผลลัพธ์ที่ได้
-| -| -
\> ประโยคอ้างอิง
|
\
ประโยคอ้างอิง\
|
ประโยคอ้างอิง

 

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

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

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

 

  • การใส่ 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
-| -
ไม่มี
|
\
ข้อความ\

ผลลัพธ์ที่ได้

"นี่คือข้อความที่จัดอยู่ในตำแหน่งตรงกลางหน้ากระดาษ"
"นี่คือข้อความที่ไม่ได้จัดอยู่ในตำแหน่งตรงกลางหน้ากระดาษ"

 

  • เว้นบรรทัดใหม่

จะเห็นว่า ถ้าเราพยายามจะเว้นบรรทัดเปล่าๆ โดยการ 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 นะครับ
---
20

comments