ใส่โค้ดในเพจด้วย Enlighter – Customizable Syntax Highlighter

Syntax Highlighter

คือ การแสดงโค้ดโค้ดภาษาต่างๆ โดยมี highlight แสดง syntax หรือ tag ในภาษาต่างๆ ที่ต่างกันออกไป เช่น html, css, php, java script ต่างก็มี syntax ที่ต่างกัน การใช้แท็ก pre ในการแสดงโค้ดนั้นก็ได้อยู่ เพียงแต่นักพัฒนาส่วนใหญ่จะชินกับการใช้งานโปรแกรมจำพวก text editor หรือ IDE ต่างๆ ที่จะมีไฮไลท์ในโค้ดด้วย เช่น Sublime Text

Sublime Text

Sublime Text

Enlighter

คือ ปลั๊กอินที่ช่วยอำนวยความสะดวกให้เราในการแทรกโค้ดเหล่านี้ให้แสดงบนเว็บเพจของเราได้อย่างสวยงาม โดยไม่จำเป็นต้องพึ่งแท็ก pre แต่อย่างเดียว สามารถใช้งานได้กับหลายภาษาโปรแกรมที่เป็นที่นิยม มีคุณสมบัติหลายอย่างที่เหมือนกับที่ปลั๊กอินตัวอื่นๆ มี เช่น มีธีมให้เลือกหลายแบบ  (Demo) แสดงบรรทัด, เปิดป๊อปอัพที่แสดงเฉพาะโค้ด, แสดงแบบ inline ได้, แสดงแบบ Group ได้ จากที่ผู้เขียนก็เคยลองใช้ตัวดังๆ ที่คนโหลดใช้เยอะมากๆ สุดท้ายก็มาพบตัวนี้และรู้สึกว่าใช้งานได้ดีกว่าและสะดวกกว่าด้วยค่ะ

ภาษาโปรแกรมที่รองรับ

  • AVR Assembler
  • C
  • CSS
  • C#
  • C++
  • Diff
  • Generic
  • HTML
  • Ini
  • JSON
  • Java
  • Javascript
  • MarkDown
  • Matlab
  • NSIS
  • PHP
  • Python
  • RAW
  • Ruby
  • Rust
  • SQL
  • Shell
  • VHDL
  • XML

download

การใช้งาน

หลังจากติดตั้งปลั๊กอินแล้ว เราสามารถใช้งานได้ทั้งโดยการใช้ Shortcode หรือใช้วิธีการกดปุ่มแทรกโค้ด Enlighter บนแถบเครื่องมือก็ได้ค่ะ

enlighter-button

วางโค้ดที่ต้องการลงในช่อง Sourcecode

put-code

Language เลือกภาษาของโค้ดที่เราวางในลิสต์

Mode เลือกโหมดการแสดงผลระหว่าง Block-Code จะเป็นการแสดงผลเป็นชุดเหมาะกับโค้ดยาวๆ ที่แยกเป็นชุดโค้ด และ Inline-Code ที่จะแสดงโค้ดในบรรทัด เหมาะกับการแสดงโค้ดที่ไม่ยาว และแสดงข้อความต่อในแถวโดยไม่จำเป็นต้องขึ้นบรรทัดใหม่

inline-and-block-code

Surround with spaces แนะนำให้ติ๊กตัวนี้ไว้ด้วยค่ะ เพราะจะเป็นการเพิ่มพื้นที่รอบๆ หรือเหมือนกับเรากด Enter ไว้ล่วงหน้า ทำให้เราสามารถเขียนต่อได้เลย ไม่เช่นนั้น เวลาเรา Enter มันก็จะเป็นการเพิ่มบรรทัด หรือพิมพ์ต่อไปในช่องของโค้ดแทน

จะได้ช่องโค้ดหน้าตาแบบนี้ สามารถคลิกเพื่อตั้งค่า Settings

after-put-code

Settings สามารถให้เรามากำหนดค่าเพิ่มเติมได้ เช่น เปลี่ยนภาษา เลือกธีมที่จะใช้กับโค้ดชุดนี้ แสดงหรือซ่อน Linenumbers เป็นต้น

settings-code

การแทรกโค้ดอีกวิธีหนึ่งก็คือ การคลุมดำข้อความหรือโค้ดที่เราเขียนหรือวางไว้ก่อน แล้วเลือกประเภทของ Code และภาษาที่ต้องการจากเมนู Format

enlighter-format

ส่วนการใช้ shortcode ก็ทำได้ง่ายๆ ด้วยการใช้แท็ก [language] .... [/language] โดย language คือภาษาของโค้ดที่เราจะแทรก สามารถใช้ได้ทั้งแบบ Inline-Code และ Block-Code

Code-Groups

นอกจากแสดงโค้ดแบบทั่วไปแล้ว เรายังสามารถที่จะแสดง Code-Groups ได้ด้วย ถ้าใครเคยเห็นโค้ดของ codepen.io ก็จะให้อารมณ์คล้ายๆ กันค่ะ คือแสดงแท็บของโค้ดในกลุ่มเดียวกันแต่แยกเป็นคนละภาษาได้ เช่น  แท็บ html, css, java script, php ที่มักมาด้วยกัน

code-groups-example

การสร้าง Code-Groups นี้ก็ง่ายๆ ค่ะ เพียงแค่แทรกโค้ดชุดต่างๆ ลงไปก่อน แล้วคลิกที่โค้ดแต่ละชุดเพื่อทำการ Settings จากนั้นในช่อง ก็ให้กำหนดชื่อกรุ๊ปเป็นกรุ๊ปเดียวกันสำหรับโค้ดที่จะแสดงด้วยกันในช่อง Codegroup Identifier แล้วในช่อง Title ก็ใส่เป็น ชื่อภาษา เป็นต้น โค้ดที่ตั้งเป็นกรุ๊ปเดียวกันก็จะถูกนำมาแสดงด้วยกันตามลำดับที่เราได้วางไว้ค่ะ

Identifier = ตั้งเหมือนกัน
Title = ชื่อใครชื่อมัน

code-group-settings

Global Settings คือ การกำหนดค่าพื้นฐานให้กับ Enlighter เช่น ธีม, ภาษา, การโชว์ตัวเลข และการตอบสนองอื่นๆ ลองตั้งค่าแล้วดูการเปลี่ยนแปลงค่ะ เดาได้ไม่ยาก โดยการไปที่เมนู Settings > Enlighter ในแท็บ Appeaance

global-setting-enlighter

Button Tooble กำหนดปุ่มให้กับโค้ดเมื่อแสดงผลบนเว็บเพจ ในตัวอย่างด้านบน เราเลือกที่จะแสดงปุ่ม Raw-Codebutton ปุ่มแสดงเฉพาะโค้ดแบบไม่มีเลขบรรทัด และปุ่ม Window-button (แสดงโค้ดในหน้าต่างป๊อปอัพ) เราก็จะได้การแสดงผลรูปร่างหน้าตาแบบด้านล่างนี้ โดยถ้าคลิกที่ปุ่มที่เม้าส์ชี้อยู่ ก็จะแสดงแบบไม่มีเลขบรรทัดค่ะ