บล็อกเกอร์และผู้สร้างเกือบทั้งหมด เนื้อหา หรือนักพัฒนาเทคโนโลยีบางครั้งจำเป็นต้องแสดงตัวอย่างโค้ดที่ไฮไลต์บนบล็อกของตน นี่อาจทำให้เกิดอาการปวดหัวในตัวเองได้ อย่างไรก็ตาม อาจจำเป็นต้องเน้นอย่างน้อยหนึ่งบรรทัดในตัวอย่างข้อมูลนี้ และฟังก์ชันนี้ไม่ได้เป็นส่วนหนึ่งของการผสานรวมโค้ดส่วนใหญ่ โชคดีที่มีปลั๊กอิน SyntaxHighlighter Evolved อยู่ เราจะแสดงวิธีใช้เพื่อรักษาโค้ดให้สะอาดและอ่านง่ายที่สุด
SyntaxHighlighter Evolved
การติดตั้งและเปิดใช้งานปลั๊กอินนั้นง่ายมาก คุณสามารถค้นหาได้ในที่เก็บปลั๊กอิน WP.org แต่ให้แน่ใจว่ามันทำได้ดีโดย Alex Mills (Viper007Bond)เพราะแน่นอนว่ามีผลลัพธ์มากมาย อย่างไรก็ตามเราทราบว่ามีความน่าเชื่อถือและเป็นปัจจุบัน ยิ่งไปกว่านั้นบล็อกนี้มาพร้อมกับบล็อกพิเศษสำหรับโปรแกรมแก้ไข Gutenberg ไม่ต้องพูดถึงพารามิเตอร์จำนวนหนึ่งที่ช่วยให้คุณปรับแต่งประสบการณ์ของคุณได้ซึ่งทำให้เราเป็นตัวเลือกสำหรับงานประเภทนี้
ในเมนู การตั้งค่าโหมด จากแผงควบคุม WordPress ของคุณคุณจะพบรายการใหม่ที่เรียกว่า SyntaxHighlighter . คลิกเลย คุณสามารถปรับเปลี่ยนทุกสิ่งเล็กน้อยที่คุณจะต้องฝังตัวอย่างข้อมูลลงในไซต์ WordPress ของคุณ
การตั้งค่า SyntaxHighlighter
หน้าการตั้งค่าสำหรับปลั๊กอินนั้นค่อนข้างง่าย องค์ประกอบหนึ่งที่เราชอบเกี่ยวกับปลั๊กอินนี้คือคุณได้รับการปรับแต่งจำนวนมากเกี่ยวกับวิธีแสดงโค้ดบนไซต์ของคุณ คุณสามารถเพิ่มคลาส CSS ในการฝัง ปรับการเติมหมายเลขบรรทัด เลือก ธีม สี ใช้สมาร์ทแท็บและตัวแบ่งบรรทัด และตัดสินใจว่าจะโหลดการเน้นภาษาการเขียนโค้ดทั่วทั้งไซต์แต่ละรายการอย่างไร
เราต้องการกำหนดพารามิเตอร์เฉพาะสามประการที่คนส่วนใหญ่ควรรู้
รุ่นปลั๊กอิน, หมายเลขบรรทัดและขนาดแท็บ
อย่างแรกคือปลั๊กอินเวอร์ชันที่คุณกำลังโหลด แม้ว่าปลั๊กอินจะยังคงเป็นเวอร์ชันล่าสุดในที่เก็บ คุณสามารถเลือกระหว่างปลั๊กอินเวอร์ชัน 2.x และ 3.x ขึ้นอยู่กับว่าคุณต้องการแสดงรหัสของคุณอย่างไร อย่างไรก็ตามทั้งสองอย่างมีความปลอดภัย แต่แต่ละข้อเสนอคุณสมบัติเฉพาะที่ไม่มี (ในขณะที่เขียน)
หากผู้ใช้คัดลอกรหัสของคุณสำคัญที่สุดเวอร์ชัน 3.x จะทำ อย่างไรก็ตามหากของคุณมีประโยชน์ในการแสดงผลมากกว่ายูทิลิตี้จริงการขึ้นบรรทัดใหม่ในเวอร์ชัน 2.x อาจดีกว่าสำหรับคุณเนื่องจากไม่จำเป็นต้องใช้แถบเลื่อน สำหรับข้อมูลโค้ดขนาดใหญ่
จากนั้นคุณต้องแสดงหรือไม่แสดงหมายเลขบรรทัด สำหรับโค้ดและแบบฝึกหัดจำนวนมากหมายเลขบรรทัดเป็นสิ่งที่ประเมินค่าไม่ได้ อย่างไรก็ตามเมื่อคุณมีข้อมูลโค้ดสั้น ๆ ไม่จำเป็นต้องติดป้ายถาวรเป็นบรรทัดที่ 1 และ 2 การลบออกอาจช่วยปรับปรุงลักษณะที่ปรากฏของโค้ดได้อย่างมาก
แล้วมี ขนาดแท็บ ยังคงเป็นที่ถกเถียงกันอยู่ ตัวเลือกเริ่มต้นคือ 4 แต่คุณสามารถเปลี่ยนเป็นหมายเลขใดก็ได้ที่คุณต้องการ รวมถึงค่าที่ถูกต้องของ 2 (ใช่เรารู้ว่าไม่มีค่าที่ถูกต้องเราชอบช่องว่าง 2 ช่องสำหรับแท็บ)
รหัสและรหัสย่อของคุณ
หากคุณเลื่อนไปที่ด้านล่างสุดของหน้า การตั้งค่าโหมด คุณจะเห็นตัวอย่างโค้ดขนาดใหญ่รวมถึงพารามิเตอร์รหัสย่อจำนวนมาก เวลาของคุณจะถูกใช้ไปอย่างดีเพื่อดูว่าปลั๊กอินทั้งหมดทำอะไรได้บ้างเพื่อแสดงตัวอย่างข้อมูลของคุณ นอกจากนี้การเปลี่ยนแปลงใด ๆ ที่คุณทำข้างต้นกับการแสดงรหัสในการตั้งค่าด้านบนจะแสดงที่นี่ ดังนั้นอย่าลืมกดบันทึกหลังจากเปลี่ยนตัวเลือกใด ๆ
ในขณะที่บางคนไม่ใช่แฟนตัวยงของรหัสย่อเพราะสามารถเชื่อมโยงคุณกับปลั๊กอินบางตัวได้ แต่เราคิดว่าสิ่งเหล่านี้คุ้มค่าที่จะใช้เพราะฉลาดและจำง่าย หากไม่มีอะไรอื่นคุณต้องจำสองสิ่งจากนั้นปลั๊กอินจะทำงานได้ดีที่สุดสำหรับคุณ
ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>
หรือบางรูปแบบ หากคุณจำได้คุณจะมั่นใจในสิ่งต่าง ๆ ที่คุณสามารถทำได้ด้วยปลั๊กอินนี้ ในขณะที่คุณสามารถใช้ตัวระบุแบบยาวได้ปลั๊กอิน SyntaxHighlighter ถูกสร้างขึ้นอย่างดีพอที่จะทำให้งานของคุณง่ายขึ้น
ใช้รหัสย่อ
ทุกที่ที่คุณสามารถแสดงรหัสย่อ คุณสามารถใช้มันได้ ใน Divi หรือตัวแก้ไขแบบคลาสสิก คุณสามารถใช้โมดูลข้อความหรือตัวแก้ไข TinyMCE และวางโค้ดระหว่างรหัสย่อได้ เนื่องจากวิธีการทำงานของแท็บ Visual เราจึงขอแนะนำให้ใช้แท็บ ตำรา เพื่อรักษาการจัดรูปแบบอักขระพิเศษเหล่านี้
หากคุณเป็นผู้ใช้ Gutenberg / Block Editor สิ่งต่างๆนั้นง่ายมาก คุณสามารถใช้บล็อกข้อความสำหรับสิ่งนี้ได้อีกครั้ง บล็อก HTML ที่กำหนดเองได้ง่ายยิ่งขึ้น ข้างต้นวางรหัสลงในแท็กรหัสย่อ
ยังดีกว่าบล็อก SyntaxHighlighter Evolved นั้นเอง การติดตั้งปลั๊กอินมีบล็อก Gutenberg ของตัวเอง ดังนั้นหากคุณไม่ใช่รหัสย่อและไม่ต้องการยุ่งกับการตั้งค่าคุณก็ไม่จำเป็นต้องทำ เพียงแค่ค้นหาบล็อกด้านล่าง การจัดรูปแบบ และใส่ลงในข้อความหรือหน้าของคุณ
ไม่ว่าคุณจะแทรกรหัสอย่างไรคุณจะเห็นการแสดงผลแบบเดียวกันที่ส่วนหน้าของไซต์ WordPress ของคุณ
เพื่อสรุป
คุณอาจต้องนำเสนอตัวอย่างข้อมูลแก่ผู้ชมของคุณด้วยเหตุผลหลายประการ บางทีคุณอาจเขียนบทแนะนำหรือโพสต์วิธีแก้ปัญหาทั่วไปที่ผู้ชมสามารถนำไปใช้ได้ตามต้องการ แต่บางครั้งการผสานรวม GitHub ก็ไม่ได้ให้ประสบการณ์ที่คุณต้องการสำหรับผู้ใช้ของคุณ นี่คือเวลาที่คุณต้องการปลั๊กอินเช่น SyntaxHighlighter Evolved
ด้วยการคลิกเพียงไม่กี่ครั้งด้วยการปรับแต่งเล็กน้อยและบล็อก Gutenberg หรือรหัสย่อผู้ชมของคุณจะสำรวจรหัสของคุณโดยไม่มีปัญหา
