Plugin Syntax Highlighter Terbaik untuk Mempercantik Tampilan Kode pada WordPress

Apakah kamu pernah melihat kode yang saya tampilkan pada blog ini? Ada seorang teman blogger yang bertanya, bagaimana cara menampilkan kode dengan tampilan seperti itu? Untuk kamu yang juga penasaran, saya hanya menggunakan plugin syntax highlighter atau code enlighter. Pada artikel kali ini, saya akan menunjukan 9 plugin syntax highlighter terbaik yang bisa kamu gunakan untuk mempercantik kode pada WordPress.

Fungsi utama dari sebuah blog adalah sebagai tempat untuk saling berbagi, baik berupa ilmu, pengalaman, solusi, ataupun ide. Seperti contoh blog ini di mana saya sering berbagi pengetahuan dalam penggunaan platform blogging.

Dan beberapa tutorial yang sering saya bagi di sini kadang mengharuskan kamu untuk mengubah beberapa baris kode.

Untuk menampilkan kode agar dapat terlihat bagus, mudah dibaca, serta dikopi, saya membutuhkan tools yang dapat membantu saya. Semua fungsi tersebut dapat saya temukan pada sebuah syntax highlighter.

Tujuan dari penggunaan syntax highlighter adalah untuk membedakan elemen pada sebuah kode dengan warna tertentu agar user dapat dengan mudah membacanya.

Hal ini akan sangat berguna bila kamu bekerja dengan kode yang sangat banyak. Selain itu, untuk kamu yang sering berkutat dengan kode, adanya syntax highlighter pada editor pos tentu akan membuat WordPress terasa familiar karena fitur ini sangat lumrah ada pada code editor seperti Visual Studio Code, Brackets, atau Atom.

Untungnya pada WordPress, banyak sekali plugin berkualitas yang dapat kita gunakan secara cuma-cuma. Bahasa pemograman yang disupport pun ada bermacam-macam.

Berikut adalah beberapa koleksi plugin syntax highlighter terbaik yang kami rekomendasikan.

Plugin syntax highlighter terbaik pilihan Bisablog, Englighter – Customizable Syntax Highlighter

Ini adalah plugin yang saya gunakan untuk website ini setelah sebelumnya saya menggunakan prism.js.

Sesuai dengan namanya, plugin ini menggunakan enlighter.js untuk mempercantik tampilan kode pada WordPress. Plugin ini sendiri memiliki dukungan terhadap lebih dari 30 bahasa termasuk bahasa populer seperti markup language, Markdown, Python, Ruby, dll.

Selain itu, plugin ini juga dilengkapi banyak fitur yang bisa dimanfaatkan oleh coder berpengalaman namun tetap dapat dengan mudah digunakan untuk kamu yang masih awam dengan koding.

Beberapa hal keren yang bisa kamu lakukan dengan plugin ini antara lain:

• Menampilkan kode berupa inline code atau code blocks.
• Plugin dapat dengan mudah digunakan langsung dari editor pos atau menggunakan shortcode.
• Memiliki banyak tema yang bisa kamu pilih dan kamu ubah sesuai selera.
• Memberi judul pada baris kode yang kamu tampilkan.
• Menghighlight baris penting dari sebuah kode.
• Menampilkan beberapa kode yang berbeda sekaligus dalam bentuk tab.
• dll.

Nilai plus lain dari plugin ini adalah adanya built-in cache dan penggunaan CDN (Content Delivery Network) yang memungkinkan kode ditampilkan dengan cepat.

Untuk kamu yang ingin melihat langsung aksi Enlighter, kamu bisa melihat contoh kode di bawah ini.

[codegroup]
[html tab=”HTML”]

[/html]

[css tab=”CSS”]
#myelement{
color: #cc2222;
padding: 15px;
font-size: 20px;
text-align: center;
}
[/css]

[js tab=”Javascript”]
window.addEvent(‘domready’, function(){
// display string on console
console.info(‘Hello Enlighter’);

// show element
$(‘#myelement’).show();
});
[/js]
[/codegroup]

CATATAN: Memberi label ‘Terbaik’ pada plugin ini mungkin sedikit berlebihan. Tapi bagi kami, plugin ini memiliki semua fitur yang kami butuhkan, memiliki tampilan yang bagus dan ukuran yang ringan, serta bisa menampilkan kode dengan cepat.

Crayon Syntax Highlighter

Ini adalah plugin yang paling banyak direkomendasikan bila kamu mencari plugin syntax highlighter terbaik. Dengan lebih dari 50,000 instalasi aktif menunjukan plugin ini begitu dipercaya banyak pengguna WordPress untuk mempercantik tampilan kode mereka.

Hal ini sendiri bukan tanpa alasan karena plugin ini memang dipersenjatai dengan berbagai macam fitur. Plugin ini mendukung lebih dari 50+ bahasa pemograman, memiliki pilihan tema yang sangat melimpah, dan menu pengaturan yang lebih lengkap dibandingkan plugin lainnya yang sejenis.

Namun banyaknya pilihan yang ada pada plugin ini mungkin akan terlalu berlebihan, terutama untuk kamu yang hanya ingin sekedar menampilkan kode saja tanpa harus repot. Selain itu ukurannya yang cukup besar juga mungkin bisa menjadi pertimbangan kamu sebelum menggunakan plugin ini.

Code Snippets CPT

Salah satu fitur unik dari plugin ini adalah adanya tempat khusus untuk menyimpan semua kode yang kamu buat.

Kode yang disimpan dalam library tersebut dapat dikategorikan dan diberikan tag tertentu serta memiliki URL masing-masing. Dengan begitu kamu dapat dengan mudah mencari kode yang kamu maksud.

Untuk menampilkannya pada sebuah pos, kamu dapat menggunakan shortcode atau langsung memasukan kode yang sudah kamu buat melalui pos editor.

Plugin ini mendukung lebih dari 100+ bahasa pemograman dan belasan tema yang dapat kamu pilih agar bisa sesuai dengan tema yang kamu gunakan.

Sayangnya tidak banyak pengaturan lainnya yang dapat kamu lakukan, terutama pada tampilan kode kecuali kamu mengutak-atiknya sendiri menggunakan CSS.

PastaCode

PastaCode adalah plugin yang menggunakan prism.js untuk mempercantik tampilan sebuah kode.

Ada tiga cara untuk memasukan kode pada editor pos.

• Kamu bisa mengetiknya atau menyalinnya secara manual.
• Menggunakan URL dari beberapa layanan seperti Github, Gist,  atau Bitbucket.
• Mengupload file berisi kode yang ingin kamu tampilkan.

Plugin ini juga bisa kamu gunakan pada area komentar atau bbpress.

Syntax Highlighter Evolved

Ini adalah plugin buatan Automattic berbasis SyntaxHighlighter buatan Alex Gorbatchev.

Plugin ini memiliki dukungan lebih dari 30+ bahasa, termasuk beberapa bahasa yang populer seperti CSS, JavaScript, PHP, XML, Python, C#, hingga Java.

Plugin ini akan secara otomatis mengubah tampilan kode yang berada pada tag <pre> atau <code>. Bila kamu ingin merujuk pada bahasa tertentu, kamu bisa menulis kode dalam format,

[code lang="js"]Masukan kode kamu di sini[/code]

atau langsung saja menggunakan tag sesuai dengan bahasa yang kamu gunakan seperti [js]kode kamu[/js].

Untuk menambahkan fungsi lainnya, ada juga tag lain yang bisa kamu gunakan dalam shortcode seperti .

• highlight – Untuk menghighlight beberapa baris tertentu.
• toolbar – Menampilkan toolbar dengan nilai true atau false.
• firstline – Untuk mengatur letak nomor pertama bila kamu menggunakan penomoran.
• classname – Untuk menambahkan class CSS pada kode.
• dll.

Beberapa plugin syntax highlighter lainnya juga memiliki fitur seperti ini di mana setiap kode yang berada pada tag <pre> atau <code> akan secara otomatis dirubah tampilannya. Contohnya antara lain:

• Prismatic – Plugin ini dibangun dengan fokus untuk memberikan performa terbaik sehingga tidak heran bila plugin ini cukup ringan dan cepat. Dengan plugin ini, kamu bisa memilih untuk menggunakan prism.js, highlight.js, atau custom style untuk memproses tampilan kode. Bila kamu memilih prism.js atau highlight.js, kamu bisa menggunakan hampir semua fiturnya melalui plugin ini.
• WP-Syntax – Ini adalah plugin syntah highlighting yang cukup populer berbasis GeSHi (General Syntax Highlighting) yang mendukung puluhan bahasa pemograman populer.
• My Syntax Highlighter – Ini adalah plugin buatan Arthur Gareginyan yang juga membuat plugin sejenis agar kamu bisa menggunakan syntax highlighter pada editor text/HTML dan editor file WordPress. Mekipun hanya mendukung 14 bahasa saja, namun sudah cukup untuk kamu yang hanya ingin membagikan kode seputar pemograman website.
• Code Prettify – Plugin sederhana berbasis Google Code Prettify yang akan menghighlight semua kode dalam tag <pre> dan <code>.

Penutup

Memilih plugin syntax highlighter terbaik untuk kamu gunakan pada WordPress ternyata bukan perkara yang mudah. Ada begitu banyak pilihan dan semua plugin yang disebutkan di atas hanya sebagian yang saya rekomendasikan.

Setiap plugin memiliki kelebihan dan kekurangannya masing-masing. Jadi pastikan kamu memilih plugin terbaik yang sesuai dengan kebutuhan kamu.

Apakah kamu memiliki plugin syntax highlighter terbaik pilihanmu sendiri? Jangan segan untuk memberitahukannya pada kolom komentar di bawah ini yah!