วิธีแสดงตัวอย่างโค้ดที่ไฮไลต์บนไซต์ WordPress ของคุณ

เกือบทุกบล็อกเกอร์เทคโนโลยี ผู้สร้างเนื้อหา หรือนักพัฒนาจำเป็นต้องแสดงข้อมูลโค้ดที่ไฮไลต์ในบล็อกของตนในบางครั้ง ที่สามารถปวดหัวในตัวของมันเอง อย่างไรก็ตาม การเน้นเส้นหรือเส้นภายในข้อมูลโค้ดนั้นก็อาจมีความจำเป็นเช่นกัน และคุณลักษณะนั้นไม่ได้เป็นส่วนหนึ่งของการฝังโค้ดส่วนใหญ่ โชคดีที่มีปลั๊กอิน SyntaxHighlighter Evolved เราจะแสดงวิธีใช้งานเพื่อให้โค้ดสะอาดและอ่านง่ายที่สุด

สมัครสมาชิกช่อง Youtube ของเรา

SyntaxHighlighter Evolved

การติดตั้งและเปิดใช้งานปลั๊กอินนั้นตรงไปตรงมา คุณสามารถค้นหาได้ในที่เก็บปลั๊กอิน WP.org แต่ให้แน่ใจว่าคุณได้ทำสำเร็จโดย Alex Mills (Viper007Bond) มีปลั๊กอินจำนวนมากที่มีชื่อและคุณสมบัติคล้ายกัน แต่เรารู้ว่าปลั๊กอินนี้มีความน่าเชื่อถือและเป็นปัจจุบัน นอกจากนี้ บล็อกนี้ยังมาพร้อมกับบล็อกเฉพาะสำหรับตัวแก้ไข Gutenberg ไม่ต้องพูดถึงพารามิเตอร์จำนวนหนึ่งที่ให้คุณปรับแต่งประสบการณ์ของคุณซึ่งทำให้เป็นตัวเลือกของเราสำหรับงานประเภทนี้

ใต้เมนู การตั้งค่า ในแดชบอร์ด WordPress คุณจะพบรายการใหม่ที่ชื่อ SyntaxHighlighter ไปข้างหน้าและคลิกเข้าไป ที่นั่น คุณสามารถปรับเปลี่ยนทุกสิ่งเล็กน้อยเพื่อฝังข้อมูลโค้ดลงในไซต์ WordPress ของคุณได้

การตั้งค่าตัวเน้นไวยากรณ์

หน้าการตั้งค่าสำหรับปลั๊กอินค่อนข้างตรงไปตรงมา องค์ประกอบหนึ่งที่เราชอบเกี่ยวกับปลั๊กอินนี้คือ คุณได้รับการปรับแต่งจำนวนมากเกี่ยวกับวิธีการแสดงโค้ดบนไซต์ของคุณ คุณสามารถเพิ่มคลาส CSS ในการฝัง ปรับการเติมหมายเลขบรรทัด เลือกธีมสี ใช้แท็บอัจฉริยะและการตัดคำ และตัดสินใจว่าจะโหลดการเน้นภาษาเขียนโค้ดแต่ละรายการในระดับทั่วทั้งไซต์ได้อย่างไร

เราต้องการกล่าวถึงการตั้งค่าเฉพาะสามอย่างที่เราคิดว่าคนส่วนใหญ่ควรทราบ

เวอร์ชันปลั๊กอิน หมายเลขบรรทัด และขนาดแท็บ

อย่างแรกคือเวอร์ชันของปลั๊กอินที่คุณโหลด แม้ว่าตัวปลั๊กอินจะอัปเดตอยู่เสมอใน repo ทั้งนี้ขึ้นอยู่กับว่าคุณต้องการแสดงโค้ดของคุณอย่างไรให้ดีที่สุด คุณสามารถเลือกระหว่างเวอร์ชัน 2.x และ 3.x ของปลั๊กอิน ได้ ทั้งสองมีความปลอดภัย อย่างไรก็ตาม แต่ละคุณลักษณะเฉพาะที่อื่นไม่มี (อย่างน้อยในขณะที่เขียนบทความนี้)

หากผู้ใช้ที่คัดลอกโค้ดของคุณเป็นสิ่งสำคัญที่สุด เวอร์ชัน 3.x ก็ใช้งานได้ดี อย่างไรก็ตาม หากคุณใช้สำหรับการแสดงผลมากกว่ายูทิลิตี้จริง การตัดคำของเวอร์ชัน 2.x อาจเหมาะกับคุณมากกว่าเพราะไม่ต้องใช้แถบเลื่อนบนตัวอย่างโค้ดขนาดใหญ่

แล้วคุณมีว่าจะแสดงหมายเลขบรรทัดหรือไม่ สำหรับโค้ดและบทช่วยสอนจำนวนมาก หมายเลขบรรทัดมีค่ามาก อย่างไรก็ตาม เมื่อคุณมีข้อมูลโค้ดสั้นๆ คุณไม่จำเป็นต้องติดป้ายกำกับเป็นบรรทัดที่ 1 และ 2 อย่างต่อเนื่อง การลบข้อมูลเหล่านี้สามารถล้างรูปลักษณ์ของโค้ดได้ค่อนข้างมาก

แล้วก็มี ขนาดแท็บที่ ขัดแย้งกันตลอดเวลา ตัวเลือกมีค่าเริ่มต้นเป็น 4 แต่คุณสามารถเปลี่ยนเป็นตัวเลขใดก็ได้ที่คุณต้องการ รวมค่าที่ถูกต้องของ 2 (ใช่ เราตระหนักดีว่าไม่มีค่าที่ถูกต้อง เราแค่ชอบช่องว่าง 2 ช่องสำหรับแท็บ)

รหัสและรหัสย่อของคุณ

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

ในขณะที่บางคนไม่ใช่แฟนตัวยงของรหัสย่อเพราะพวกเขาสามารถผูกคุณกับปลั๊กอินบางตัวได้ แต่เราคิดว่าสิ่งเหล่านี้คุ้มค่าที่จะใช้เพราะมันฉลาดและง่ายต่อการจดจำ ถ้าไม่มีอะไรอื่น คุณต้องจำไว้สองสิ่ง จากนั้นปลั๊กอินจะทำงานอย่างดีที่สุดสำหรับคุณ

• หรือ

   or  or  or...well, you get it</li>
          <li>[highlight 5-9]</li>
  </ul>
  
  Or some variation thereof. If you can remember those, you're pretty solid for most things you will use the plugin for.
  
  While you can use the long-form language identifiers, the SyntaxHighlighter is built well enough to make things easy on you. Here on the ET blog, whenever you see a code snippet, we have a similar shortcode processor where we just use <strong>code written here

  และจัดรูปแบบและเน้น

  การใช้รหัสย่อ

  ทุกที่ที่คุณสามารถแสดงรหัสย่อ คุณสามารถใช้สิ่งเหล่านี้ได้ ใน Divi หรือตัวแก้ไขแบบคลาสสิก คุณสามารถใช้โมดูลข้อความหรือตัวแก้ไข TinyMCE และวางโค้ดระหว่างรหัสย่อได้ เราขอแนะนำเนื่องจากวิธีการทำงานของแท็บภาพที่คุณใช้แท็บ ข้อความ สำหรับสิ่งเหล่านี้เพื่อรักษาการจัดรูปแบบอักขระพิเศษ

  

  หากคุณเป็นผู้ใช้ Gutenberg/Block Editor สิ่งต่างๆ ก็ทำได้ง่ายๆ เช่นกัน คุณสามารถใช้บล็อกข้อความสำหรับสิ่งนี้ได้อีกครั้ง ง่ายกว่านั้นก็คือบล็อก HTML ที่กำหนดเอง เช่นเดียวกับด้านบน ให้วางโค้ดภายในแท็กรหัสสั้น

  

  อย่างไรก็ตาม ดีกว่านั้นก็คือ SyntaxHighlighter Evolved block เอง สิ่งที่รวมอยู่ในการติดตั้งปลั๊กอินคือ Gutenberg Block ของตัวเอง ดังนั้นหากคุณไม่ใช่คนที่ใช้รหัสย่อและไม่ต้องการเล่นซอกับพารามิเตอร์ คุณไม่จำเป็นต้องทำ เพียงค้นหาบล็อกภายใต้ การจัดรูปแบบ และแทรกลงในโพสต์หรือหน้าของคุณ

  

  ไม่ว่าคุณจะใส่โค้ดอย่างไร คุณจะเห็นการแสดงผลแบบเดียวกันที่ส่วนหน้าของไซต์ WordPress ของคุณ

  

  จบ

  มีเหตุผลมากมายที่คุณอาจต้องนำเสนอข้อมูลโค้ดแก่ผู้ชมของคุณ บางทีคุณอาจเขียนบทช่วยสอนหรือบางทีคุณอาจโพสต์การแก้ไขปัญหาทั่วไปเพื่อให้สาธารณชนนำไปใช้และใช้งานได้ตามต้องการ แต่บางครั้งการฝัง GitHub ก็ไม่ได้มอบประสบการณ์การใช้งานที่แน่นอนสำหรับผู้ใช้ที่คุณต้องการ นั่นคือเมื่อคุณต้องการปลั๊กอินเช่น SyntaxHighlighter Evolved ด้วยการคลิกเพียงไม่กี่ครั้ง การปรับแต่งเพียงเล็กน้อย และบล็อก Gutenberg หรือรหัสย่อ ผู้ชมของคุณจะสำรวจโค้ดของคุณโดยไม่มีปัญหา

  คุณใช้อะไรได้บ้างในไซต์ของคุณเพื่อเน้นโค้ดแบบนี้

  บทความภาพโดย Adil Bouyghajden / shutterstock.com