รายการไฮไลต์สำหรับวางและแสดงซอร์สโค้ดใน WordPress

2018 11 年月日 24

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

ประเภทห้องสมุด

ปากกาเน้นข้อความประเภทที่อัปโหลดไฟล์ไลบรารีที่ได้รับไปยังโฟลเดอร์ธีมย่อยและใช้งานมันเบากว่าปลั๊กอิน แต่ต้องใช้ความพยายามมากกว่าเล็กน้อยในการแนะนำ

ไฮไลท์.js

ไลบรารี JavaScript ชื่อ Highlight.js รองรับภาษาโปรแกรม 189 ภาษา และมีรูปแบบการแสดงผล 89 รูปแบบ (ข้อมูล ณ เดือนพฤศจิกายน 2018)ฟังก์ชั่นง่าย ๆ แค่ไฮไลท์โค้ดเบามาก.เป็นที่นิยม.

https://highlightjs.org/

ปริซึม js

ไลบรารี JavaScript ที่มีน้ำหนักเบารองรับ 153 ภาษาและ 8 รูปแบบการแสดงผล (ข้อมูล ณ เดือนพฤศจิกายน 2018)คุณสามารถเพิ่มหมายเลขบรรทัด การเน้นบรรทัดที่ระบุ การแสดงภาษา การติดตั้งปุ่มคัดลอก ฯลฯ เป็นฟังก์ชันส่วนขยายได้อย่างง่ายดายนี้ยังเป็นที่นิยม

https://prismjs.com/

Google โค้ด-prettify

เป็นไลบรารี JavaScript ที่พัฒนาโดย Google ตามชื่อ รองรับภาษาโปรแกรมหลักๆ เช่น C, Python, HTML, CSS, JavaScript, Makefile เป็นต้น แต่ภาษาย่อยต้องการส่วนขยายรูปแบบการแสดงผลมี 5 รูปแบบ (ข้อมูล ณ เดือนพฤศจิกายน 2018)นอกจากสองวิธีข้างต้นในการอัปโหลดไปยังโฟลเดอร์ WordPress และใช้งานแล้ว ยังมีวิธีง่ายๆ ในการติดตั้งโดยใช้ตัวโหลดอัตโนมัติข้อมูลภาษาญี่ปุ่นมีน้อยเนื่องจากมีผู้ใช้ไม่มากนัก

https://github.com/google/code-prettify

ประเภทปลั๊กอิน

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

รหัส WP Highlight.js

นี่เป็นเวอร์ชันปลั๊กอินของ Highlight.js ที่แนะนำในประเภทไลบรารี เข้ากันได้กับ SyntaxHighlighter, Prettify, CrayonSyntaxHighlighter คุณจึงสามารถโยกย้ายจากปากกาเน้นข้อความอื่นๆ ได้

https://ja.wordpress.org/plugins/wp-code-highlightjs/

ปากกาเน้นข้อความไวยากรณ์ปริซึม

เวอร์ชันปลั๊กอินของ Prism.js

https://ja.wordpress.org/plugins/ank-prism-for-wp/

รหัส Prettify

เดียวกัน.

https://ja.wordpress.org/plugins/code-prettify/

ปากกาเน้นข้อความไวยากรณ์ Crayon

ประทับใจที่มีผู้ใช้จำนวนมากและข้อมูลมากมายในการเปิดเป็นภาษาญี่ปุ่นแม้แต่ผู้เริ่มต้นก็สามารถเปลี่ยนขนาดฟอนต์และการออกแบบ เพิ่มหมายเลขบรรทัดและระบุการเน้น ฯลฯ ได้อย่างง่ายดาย และความสามารถในการปรับแต่งก็สูงมากมีรีวิวมากมายว่ามันหนักและการอัพเดทครั้งล่าสุดหยุดไปตั้งแต่ปี 2015 ซึ่งเป็นเรื่องที่น่ากังวล

https://ja.wordpress.org/plugins/crayon-syntax-highlighter/

เครื่องมือเน้นข้อความไวยากรณ์ Mivhak

รองรับภาษาโปรแกรมมากกว่า 130 ภาษาและมีธีม 36 ธีมซึ่งสมบูรณ์แบบตั้งแต่ CSS และ JS ที่มีน้ำหนักเบาไปจนถึงสคริปต์ภาษาและธีมที่โหลดได้ตามต้องการ ให้ความรู้สึกหนักพอๆ กับเครื่องมือเน้นข้อความ Crayon Syntaxคุณสามารถระบุขนาดฟอนต์สำหรับส่วนของโค้ดเท่านั้น

https://ja.wordpress.org/plugins/mivhak/

 

ฉันได้เปรียบเทียบผลกระทบของปลั๊กอินแต่ละตัวกับความเร็วในการแสดงเว็บไซต์ ดังนั้นโปรดอ้างอิงสิ่งนี้ด้วย

การเปรียบเทียบความเร็วการแสดงเว็บไซต์ของปลั๊กอิน Syntax Highlighter

 

 

ประเภทเว็บเซอร์วิส

เป็นปากกาเน้นข้อความประเภทหนึ่งที่แปลงซอร์สโค้ดบนเว็บเป็นแท็กสำหรับฝังและวางแท็กลงในโปรแกรมแก้ไขข้อความ Wordpress เพื่อเน้นแท็ก

ส่วนสำคัญ (บริการ GitHub)

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

https://gist.github.com/discover

srctohtml

คุณสามารถแปลงโค้ดเป็นแท็ก HTML สำหรับการฝังโดยไม่ต้องลงทะเบียนภาษาที่รองรับคือ JavaScript, C++ และ PHP ซึ่งน้อยกว่าเล็กน้อย

http://marginalsoft.com/tools/srctohtml/

อันไหนให้เลือก

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

ประเภทห้องสมุด เน้นความเบาของการทำงานและความเร็วในการแสดงผล
ประเภทปลั๊กอิน เน้นความง่ายในการแนะนำ
(ขึ้นอยู่กับปลั๊กอิน อาจไม่หนักขนาดนั้น)
ประเภทเว็บเซอร์วิส ผู้ที่มีความสนใจในฟังก์ชั่นการจัดการโค้ด ลงทะเบียนบน GitHub (Gist)
ผู้ที่ไม่มีโอกาสฝัง (srctohtml) มากนัก

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

การจัดการบล็อก,Wordpress,Plug-inบทความเปรียบเทียบ