WordPress: Show Code สวย ๆ

phunsanit

1 ปี ago

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

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

ความสัมพันธ์

หัวข้อ	SyntaxHighlighter	SyntaxHighlighter Evolved
ผู้สร้าง	Alex Gorbatchev	Alex Mills
รูปแบบ	JavaScript Library	WordPress Plugin
การใช้งาน	ต้องนำไฟล์ JS/CSS ไปติดตั้งและเขียนโค้ดเรียกใช้งานเอง	ติดตั้งผ่านหลังบ้าน WordPress และใช้งานผ่าน Shortcode หรือ Block ได้เลย

วิธีการใช้งานใน 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 กันนะครับ

เข้าไปที่ 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 ได้
- 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
กด บันทึกการเปลี่ยนแปลง ได้เลย
- เราจะเห็นตัวอย่างด้านล่าง ถ้าเปลี่ยนใจเลือก options ที่มีใหม่ได้เลย มันไม่กระทบกับเนื้อหา code ในบทความที่เราเคยเขียนไว้ จะเปลี่ยนแค่ style ให้ใหม่เท่านั้น

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