Markdown คืออะไร ทำความรู้จัก Markdown

Markdown คืออะไร ทำความรู้จัก Markdown

Markdown เป็นเครื่องมือ ที่คล้ายๆกับ WYSIWYG (เครื่องมือที่หน้าตาเหมือน Microsoft Word นั่นแหล่ะ แต่ว่ามาอยู่บน Online) ทีนี้ปัญหาก็คือ เวลาที่คนเขียนเนื้อหากำลังอินกับสิ่งที่ตัวเองเขียน แล้วต้องการทำตัวหนา หรือตัวเอียงหรือสร้าง Bullet ก็พบว่า เค้าต้องละมือออกจาก Keyboard เพื่อไปจับเม้าส์คลิกเลือกตัวหนา แล้วค่อยพิมพ์ แล้วเมื่อจบ ก็ต้องคลิกอีกครั้งเพื่อยกเลิกตัวหนาแล้วพิมพ์ต่อ บางครั้ง ก็แก้ปัญหาด้วยการเขียนแบบธรรมดาไปทั้งหมดเลย แล้วค่อยมาเน้นตัวหนาเอาทีหลัง สิ่งที่พบก็คือ ลืม! เมื่อก่อนผมเองมีปัญหานี้บ่อยมาก

จนในที่สุด ก็มีคนพัฒนา Markdown ขึ้นมา เพื่อช่วยอำนวยความสะดวกเวลาเขียน ให้เขียนไปพร้อมกับการจัดหน้าได้ ด้วยโค้ดคำสั่งแบบง่ายๆได้ไม่ยาก

ตัวอย่าง เวลาเราขึ้นย่อหน้าใหม่ ก็กด Enter สองทีก็จะหมายความว่าเป็นการขึ้นย่อหน้าใหม่ (ถ้าใน HTML code ก็คือ paragraph นั่นแหล่ะ)

อีกตัวอย่าง ก็คือเวลาที่เราต้องการเขียน h1 เราก็แค่ใส่ # ข้างหน้าบรรทัด ก็จะกลายเป็น h1 โดยทันที เช่น

# หัวข้อ

หรือว่าถ้าเราต้องการแสดง quote ข้อความ ก็ทำได้ด้วยการใส่เครื่องหมาย > ที่ด้านหน้าบรรทัด เช่น

> ข้อความที่ยกมาเป็นตัวอย่าง
> quote ต่อเนื่องกันไปเลย
ถ้ายังนึกภาพไม่ออก อยากเห็น Markdown แบบเห็นภาพมากกว่านี้ ลองเข้าเว็บ hackmd.io แล้วลองทำความเข้าใจดูครับ จอฝั่งซ้าย ก็คือ โค้ด Markdown ที่เราเขียนเข้าไป จอฝั่งขวาก็คือ ผลลัพท์ที่เราได้ออกมา ซึ่งถ้าเรา Publish เราก็จะได้ HTML version ออกมาทันทีเลย

ทดสอบเขียน markdown

ถ้าอยากลองของจริงแบบวัยรุ่นใจร้อน ก็ ลองเขียน markdown หรือว่าจะลองสร้างเอกสารใหม่ก็ได้เลยเช่นกัน เขียนอะไรที่ฝั่งซ้าย ก็จะแสดงผลตัวอย่างที่ฝั่งขวาทันที

จะเห็นได้ว่า Markdown ทำให้เราสามารถเขียนเนื้อหาได้อย่างต่อเนื่องโดยที่ไม่จำเป็นต้องละมือออก จาก Keyboard เลย ทำให้การเขียนสนุกขึ้นอีกเยอะมาก โดยเฉพาะคนที่สมองกำลังไหลได้ที่ รับรองว่าสนุกสุดๆ

นอกจากที่เห็นนี้ Markdown ก็ได้รับความนิยมมากขึ้นเรื่อยๆ โปรแกรมต่างๆก็เริ่มรองรับการเขียน markdown มากขึ้นเรื่อยๆ รวมทั้งโปรแกรมที่แปลง Text หลายตัวก็รองรับ markdown แล้วทำให้ตอนนี้สะดวกมากขึ้นไปอีก

ปกติผมจะเขียนบทความผ่านเครื่องมือ WYSIWYG ที่หลังบ้าน หรือว่าจะเขียนผ่าน Notepad เอาไว้ก่อนเพราะว่ามันเร็วดี แต่ว่าบทความที่กำลังอ่านนี้ผมเขียนผ่าน Markdown ของ hackmd.io เลยครับ เพื่อเป็นการทดสอบประสิทธิภาพด้วย เมื่อเขียนเสร็จ ก็กด publish ที่ขวามือออกมา ก็จะได้ HTML version เอามา Parse ลงเว็บแล้ว save ได้เลย ง่ายมาก

เครื่องมือ Online สำหรับการเขียน markdown

มีมากมายหลายเว็บเลย นอกเหนือจาก hackmd.io ก็ยังมี dillinger.io, stackedit.io, markable.in และอื่นๆอีกมากมาย นี่เป็นเพียงตัวอย่างบางส่วนเท่านั้น เราแทบไม่ต้องทำอะไรมากมาย เค้ามีให้เราเสร็จสรรพหมด เราก็มีหน้าที่เป็นผู้ใช้อย่างเดียวได้เลย เสร็จแล้วก็เอา HTML version ที่ได้มาแปะหน้าเว็บเป็นอันจบ

ถ้าอยากเอา Markdown ไปแปะที่หลังบ้านเว็บของเราเอง

เพราะไม่อยากไปเขียนที่เว็บอื่นก่อน อยากให้จบที่หลังบ้านเราเองเลย แบบนี้จะเริ่มยุ่งยากแล้ว เพราะว่าการทำงานของ markdown ทำงานสองส่วน ส่วนแรก คือส่วน Editor ถ้าอยากให้มีสองหน้าจอ แบบตัวอย่างที่เล่าไปข้างต้น ก็จะต้องเอาตัว parser มาวางไว้เพื่อให้ทำงานแบบ real time จากนั้น ไปที่ส่วนหน้าบ้าน ก็ต้องมีตัว parser วางไว้เพื่อแปลงจาก Text ให้เป็น HTML code ด้วยเช่นกัน โดยตอนนี้ ผมยังไม่รู้จะใช้ตัวไหนดีเพราะว่ามีหลายตัวเหลือเกินแต่ที่แน่ๆ ตอนนี้ผมก็ใช้ผ่านผู้ให้บริการข้างต้นไปก่อน จะได้ไม่เสียเวลาทำเอง 555

mobile device ก็ใช้ markdown ได้

ด้วยความเรียบง่าบของมันนี่แหล่ะ ทำให้เราสามารถเขียนบทความได้ แม้ว่าจะใช้ Mobile device เพราะว่าปกติหากเราใช้ WYSIWYG บน mobile device มันจะทำงานช้ามาก เพราะว่า Javascript ที่หนักมากนั่นเอง

เขียน markdown ที่ไหนก็ได้

พอเราเปลี่ยนมาเขียนเนื้อหา หรือว่าบทความแล้ว เราจะใช้ markdown ที่ไหนก็ได้ Notepad ก็ได้ หรือว่าโปรแกรม note ในมือถือเราก็ได้ เรียบง่ายและเร็วมาก จากนั้นเวลาจะใช้งานจริง เราก็เอาสิ่งที่เขียนทั้งหมด ไปผ่านเว็บแปลงต่าง ก็จะได้ HTML ออกมา หรือว่าถ้าเราออกแบบเว็บให้เก็บเป็น markdown ไว้แล้ว เราก็แค่เอาตัว parser ติดหน้าเว็บเป็นอันจบเลย

markdown กับ SEO

พูดถึงกรณีที่ไม่ได้แปลง markdown ให้เป็น HTML version ก่อนแสดงผลที่หน้าเว็บ โดยแสดง markdown ที่หน้าเว็บ แล้วใช้ javascript + css ในการ parse ให้เป็นการแสดงผลที่สวยงาม อันนี้ยังเป็นเรื่องที่คาใจผมอยู่ เพราะว่า Markdown ทำให้ Semantic HTML นั้นเสียไป เนื่องจาก มันไม่ได้มี html syntag ปะปนเหมือนอย่างปกติ ตัวอย่าง เวลาเราต้องการขึ้นย่อหน้าใหม่ เราจะใช้ <p> แบบนี้ robot ก็จะเข้าใจว่าเป็นคนละย่อหน้า แต่พอ markdown แล้วมันจะมองว่าเป็น Text ยาวพรื้ดเดียวเลย และแถมด้วย เครื่องหมายต่างๆปะปนอีกเล็กน้อย แต่ถ้าให้ผมพิจารณาแล้ว ถ้าเราเน้นน้ำหนักเรื่อง SEO อยากให้แปลงเป็น HTML version ให้เสร็จก่อนแสดงหน้าเว็บ จะดีกว่า ก็คือ เก็บ markdown version , HTML version เอาไว้ เวลาทำงานหลังบ้านก็โหลด markdown ขึ้นมาแก้ไข เวลา save ก็ parse เป็น HTML แล้วบันทึก HTML เอาไว้เวลาแสดงหน้าเว็บ ก็เอา HTML มาแสดงผลอย่างเดียว อาจจะคู่กับ CSS เพื่อจัดรูปแบบหน้าให้สวยงามก็ได้

ขอให้สนุกกับการเขียน(พิมพ์)นะครับ

Create: Modify : 2015-07-15 11:07:41 Read : 3846 URL :