WordPress: Show Code สวย ๆ

การที่เขียน blog เกี่ยวกับการ programming เป็นหลักหนีไม่พ้นที่จะต้องแสดง code ตัวอย่าง แต่ว่าการใส่ code ใน WordPress โดยการพิมพ์ธรรมดา ๆ ให้ถูก syntax ยากแถมมันจะจัดให้สวยยาก และอ้างอิงยาก อย่างที่จะบอกคนอ่านว่าอยู่ บรรทัดไหนลำบากเป็นต้น จึงแนะนำให้ลง plugin อย่าง SyntaxHighlighter ( Original by Alex Gorbatchev ) หรือ SyntaxHighlighter Evolved แล้วจะติดตั้งมันเอาตัวไหนดี

• SyntaxHighlighter ( Alex Gorbatchev ): คือ “หัวใจ” หรือ Library ภาษา JavaScript ต้นฉบับที่ Alex เขียนขึ้นมาเพื่อใช้แสดงผลโค้ดให้สวยงามบนเว็บไซต์ทั่วไป
• SyntaxHighlighter Evolved: คือ “ปลั๊กอิน WordPress” ( สร้างโดย Alex Mills ) ที่นำเอา Library ของ Alex Gorbatchev มาดัดแปลงและทำให้ใช้งานง่ายขึ้นบนระบบ WordPress โดยเฉพาะ

ความสัมพันธ์ ( Relationship )

วิธีการใช้งานใน WordPress

• SyntaxHighlighter Evolved: ออกแบบมาให้ “ลงแล้วใช้ได้เลย” รองรับทั้งระบบ Block Editor (Gutenberg) และ Classic Editor คุณสามารถใช้ Shortcode ง่ายๆ อย่าง [ php ] code... [/php ] หรือ [ code language="javascript" ] ... [ /code ] ได้ทันที ( จริง ๆ มันเขียนติดกัน ดูตัวอย่างได้จากข้างล่าง )
• Alex Gorbatchev’s Original: หากคุณต้องการใช้ตัวต้นฉบับ คุณอาจต้องเขียนโค้ดเพื่อ Load สคริปต์ในธีมเอง ซึ่งยุ่งยากกว่าสำหรับผู้ใช้ทั่วไป

ฟีเจอร์ที่เพิ่มเติมมาในเวอร์ชัน “Evolved”

ปลั๊กอินเวอร์ชัน Evolved มีการปรับปรุงเพื่อให้เข้ากับ WordPress มากขึ้น เช่น

• Settings Page: มีหน้าตั้งค่าใน Admin ให้เลือก Theme (สีของโค้ด), เปิด / ปิดเลขบรรทัด หรือตั้งค่าให้คลิก URL ได้
• Compatibility: ปรับแต่งมาเพื่อไม่ให้โค้ดของคุณถูกระบบตัวแก้คำผิด (Auto-format) ของ WordPress มาเปลี่ยนเครื่องหมายคำพูด (Quotes) หรือจัดย่อหน้าจนโค้ดพัง
• Shortcode Attributes: รองรับ parameter เพิ่มเติม เช่น highlight="10,12-15" เพื่อเน้นบรรทัดที่ต้องการ

ปรับแต่ง Settings ของ SyntaxHighlighter Evolved

จากที่เขียนมาคนที่รักความง่าย คงจะเลือกติดตั้ง plugin SyntaxHighlighter Evolved กันนะครับ ( me too )

1. เข้าไปที่ wp-admin > plugin > SyntaxHighlighter Evolved > Settings
   • Highlighter Version:
     • Version 2.x ช่วยให้สามารถตัดบรรทัดได้ ซึ่งเป็นคุณสมบัติที่เวอร์ชัน 3 ยังทำแทนไม่ได้
     • Version 3.x ช่วยให้ผู้เข้าชมสามารถไฮไลต์ส่วนต่างๆ ของโค้ดของคุณได้ง่าย ๆ ด้วยเมาส์ ( โดยการลากหรือดับเบิ้ลคลิก ) และคัดลอกไปยังคลิปบอร์ดได้ ไม่จำเป็นต้องมีแถบเครื่องมือที่มีปุ่มที่ใช้ Flash
   • Color Theme: อันนี้ตามชอบ อย่าง Emacs  มันสวยดี
   • Load All Brushes: ใช้ <pre> shortcodes
   • Miscellaneous:
     • Display line numbers นี่ละที่ต้องการการบอก บรรทัดที่ ได้นี่ง่ายกว่าเยอะเลย
     • Display the toolbar
     • Automatically make URLs clickable
     • Collapse code boxes หดมันไว้ก่อน เหมาะกับตัวอย่างยาว ๆ ที่ไม่ต้องอ่านตอนนั้น
     • Use the light display mode, best for single lines of code อันนี้ไม่แนะนำให้เลือก ถ้าจะใช้แสดง code บรรทัดเดียว ไปใช้ code ใน editor ปกติเถอะ แถมมันมีผลข้างเคียง
       • Display line numbers จะโดนทับไม่แสดงเลขบรรทัด
     • Use smart tabs allowing tabs being used for alignment
     • Wrap long lines (v2.x only, disabling this will make a scrollbar show instead) อันนี้เป็นส่วนเดียวที่ Version 2.x ดีกว่า
     • Enable edit mode on double click (v3.x only) ใครก็ double click แล้ว copy แก้ code ได้ ( ไม่save ทับของเรานะ )
   • Additional CSS Class(es) ใช้ css ของเราเองได้
   • Starting Line Number โดยปกติจะเป็น 1 แต่จะใส่ 0 เพื่อให้ตรงกับบางภาษาก็ได้นะ
   • Line Number Padding ระยะห่างเลขบรรทัดกับ code หรือจะให้เรียกตรง ๆ ว่า เลขบรรทัดมีกี่หลัก แนะนำว่า Automatic ให้มันนับเองดีที่สุด
   • Tab Size ปกติคือ 4 space แทน 1 tab
   • Title ชื่อ code block เช่น ตัวอย่าง code
2. กด บันทึกการเปลี่ยนแปลง ได้เลย
   • เราจะเห็นตัวอย่างด้านล่าง ถ้าเปลี่ยนใจเลือก options ที่มีใหม่ได้เลย มันไม่กระทบกับเนื้อหา code ในบทความที่เราเคยเขียนไว้ จะเปลี่ยนแค่ style ให้ใหม่เท่านั้น

อ่านเพิ่มเติม

• ลง WordPress ง่าย ๆ
• MySQL VS MariaDB
• MySql: Basic Config โดย MySQLTuner