Bismillah... Alhamdulillah... Hari ini penulis sebenarnya agak galau untuk menentukan materi artikel. Tadinya mau membahas yang umum-umum saja, layaknya penulis blog lain, namun hati ini tergerak untuk membahas hal-hal yang berhubungan dengan kode-kode web. Walau masih ragu tapi ya dicoba lagi untuk menulis kode-kode njlimet yang terkadang tak dimengerti manusia normal. Artikel kali ini boleh dikatakan terpaksa ditulis, yaitu tentang Syntax Highlighter...
Apa itu Syntax Highlighter?
Syntax Highlighter adalah fitur teks editor yang digunakan untuk bahasa pemrograman, penulisan kode, atau bahasa markup, seperti HTML. Fitur ini menampilkan teks, terutama kode sumber, dalam berbagai warna dan jenis font sesuai dengan kategori istilah. Digunakan Syntax Highlighter sebenarnya hanya untuk pembeda, mana artikel dan mana kode-kode yang diceritakan pada artikel. Tanpa Syntax Highlighter sebenarnya bisa saja, namun terasa kurang nyaman, kurang indah, dan tidak menarik. Selain itu penggunaan Syntax Highlighter untuk mempermudah pemahaman tentang kode-kode yang dibagikan pada halaman web.
Apa Syntax Highlighter yang terbaik?
Kalau pertanyaan seperti ini cukup membingungkan untuk dijawab, karena kreatifitas para penulis kode didunia desain web sungguh luar biasa. Akhirnya bermunculan Syntax Highlighter yang sangat banyak dari yang sederhana gratis hingga yang bagus dan berbayar. Namun pertanyaan tersebut tetap harus dijawab, dan penulis hanya akan menyertakan beberapa Syntax Highlighter yang paling populer dan banyak digunakan.
1. Crayon Syntax Highlighter
Crayon Syntax Highlighter merupakan salah satu Syntax Highlighter terbaik dan paling banyak digunakan terutama oleh para penulis blog dengan platform WordPress hal ini karena Crayon Syntax Highlighter mendukung berbagai bahasa, tema, dan jenis font. Crayon Syntax Highlighter memungkinkan penggunanya untuk mengubah berbagai konfigurasi dan pengaturan. Crayon Syntax Highlighter pada paltform WordPress merupakan plugin yang proses installasinya sangat mudah. Setelah terinstal, pengguna dapat menyesuaikan pengaturan karena memiliki tema editor yang terintegrasi. Crayon Syntax Highlighter juga kompatibel pada mode visual editor & HTML. Selain itu pengguna juga dapat menyorot (memberi warna khusus) pada URL, atau teks posting dan atau untuk menandai baris-baris penting.
2. SyntaxHighlighter Alex Gorbatchev
Alex Gorbatchev sebagai pembuat kodenya, tidak memberikan nama spesifik seperti halnya yang lain, ia hanya memberi nama SyntaxHighlighter tanpa spasi, jadi dibaca sebagai satu suku kata bukan dua kata. Entah apa maksudnya? SyntaxHighlighter sangat populer bahkan lebih populer dari Crayon Syntax Highlighter karena sifatnya yang universal, tidak spesifik mendukung salah satu platform saja. Hal ini menjadikan SyntaxHighlighter sebagai rujukan untuk para pengembangan Syntax Highlighter yang lebih fleksibel dan spesifik. Namun sayang, SyntaxHighlighter sepertinya sudah tidak diperhatikan dengan baik oleh sang pembuatnya, karena update terakhir tahun 2014 jika dilihat dari websitenya.
3. Google Code Prettify
Bukan Google namanya kalau memberikan nama yang biasa. Ketika para pengembang lain mengikuti pakem dengan memberi nama Syntax Highlighter atau yang sejenis, Google justru memberi nama Prettify. Kalau dilihat dari sisi fungsi sebenarnya sama saja dengan yang lain, namun Google lebih suka hal yang tidak umum (mungkin). Google Code Prettify merupakan bentuk kepedulian Google kepada para penulis blog yang mau membagikan kode-kode didalam halaman web-nya. Pada awalnya Prettify hanya digunakan oleh Google untuk halaman-halaman support mereka yang didalamnya mengandung kode-kode, tapi kemudian di buka dan dibagikan kepada siapa saja yang ingin menggunakan Prettify. Google Code Prettify masih terus diupdate dan disimpan pada repository GitHub yang pada awalnya tersimpan di Google Code. Namun karena satu dan lain hal, proyek Google Code ditutup, kemudian file tersebut ditransfer ke GitHub.
4. Prismjs
Prismjs atau dalam bahasa Indonesia bisa dibaca Prisma Javascript. Ini merupakan Syntax Highlighter yang ringan, namun keunikannya bukan pada ringan dan kemudahan dalam penggunaannya, tetapi karena sang pembuatnya itu seorang perempuan cantik yang bernama Lea Verou. Penasaran? Buka halaman About pada blog Lea Verou, terus lirik kesebelah kanan, ada wanita cantik berkacamata. Kalau kurang Close-Up, klik saja gambarnya. Kenapa jadi bahas Lea Verou?
Prismjs merupakan salah satu Syntax Highlighter berikutnya yang banyak digunakan, hal ini karena Prismjs itu mudah dalam integrasi pada halaman web, loading ringan dan tersedia banyak pilihan tema-nya.
5. Highlight.js
Ini satu lagi Syntax Highlighter yang hingga hari ini masih aktif dikembangkan. Sifatnya yang terbuka dan gratis membuat banyak pengembang ikut membantu memperbaiki dan mengembangkannya. Highlightjs ini ringan, mendukung 185 bahasa dan terdapat 85 tema atau gaya. Hal inilah yang menobatkan Highlight.js paling kaya sumber daya dan pengembang, update terakhir saja (pada saat tulisan ini dibuat) yaitu tanggal 31-01-2019 dan memasuki versi 9.14.2.
Membahas 5 saja ya, karena jika terlalu banyak maka artikelnya jadi panjang, nanti ada yang protes "ini artikel apa skripsi?"
Kenapa Memilih Google Code Prettify?
Nah kalau ini pertanyaan mudah, karena hubungannya dengan kebiasaan dan kesukaan. Namanya suka setiap individu itu berbeda-beda, dalam artian penulis tidak mengajak atau mempengaruhi pembaca untuk menggunakan Google Code Prettify, penggunaan Syntax Highlighter yang satu ini murni karena terbiasa bukan karena faktor cepat, ringan, mudah dalam penggunaan atau karena sang pembuat kodenya cantik. Namun karena faktor kebiasaan selama beberapa tahun terakhir.
Menurut penulis Google Code Prettify ini mudah dalam proses integrasinya pada blog berplatform BlogSpot. Kita tahu sendiri, namanya juga platform gratisan, ya banyak sekali keterbatasan. Bukan berarti blog ini tidak ingin menggunakan Syntax Highlighter yang mantap, tapi karena Google Code Prettify itu yang termudah baik dalam integrasi maupun dalam penggunaan didalam artikel. Itu sajah alasan-nyah...
Bagaimana Integrasi Google Code Prettify?
Penulis tidak akan menjelaskan secara detail proses integrasi Google Code Prettify didalam template Blogger, karena jujur saja, penulis belum siap membuat artikel yang membahas detail tentang modifikasi platform BlogSpot atau yang berhubungan dengan kode-kode web.
Untuk integrasi Prettify pada template, buka saja diarea edit HTML, kemudian masukan script Auto Loader Prettify dibawah ini tepat diatas kode </head>:
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
Bagaimana Menggunakan Google Code Prettify pada Editor Artikel?
Setelah proses integrasi selesai maka kita bisa menggunakan Prettify pada artikel blog yang kita kelola dengan menambahkah kode dibawah ini pada baris yang akan ditampilkan sebagai Syntax Highlighter:
<pre class="prettyprint">...</pre>Atau
<pre class="prettyprint"><code>...</code></pre>Penambahan kode pada text editor harus pada mode "HTML" bukan pada mode "Compose"
Bagaimana Cara Mengubah Tema Prettify?
Untuk mengubah tema atau gaya Google Code Prettify tambahkan beberapa script Auto Loader sehingga menjadi seperti dibawah ini (ingat! Tepat diatas </head>):
<script src="https://rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer=""></script>Contoh diatas, penulis menggunakan tema Sons-Of-Obsidian, sedangkan untuk pilihan tema, anda bisa memilihnya pada situs-situs dibawah ini:
- Galeri Resmi : https://rawgit.com/google/code-prettify/master/styles/index.html
- jmblog : https://jmblog.github.io/color-themes-for-google-code-prettify/
- raphaelddl : http://raphaelddl.github.io/google-prettify-monokai-theme/
Bagaimana Menentukan Bahasa Kode yang Spesifik?
Sebenarnya kita tidak perlu menambahkan kode bahasa secara spesifik, karena Prettify akan menebak bahasa yang kita gunakan. Namun jika anda ingin tetap menentukan bahasa kode yang spesifik kita bisa menambahkan kode dibawah ini pada kode di artikel blog:
<pre class="prettyprint lang-html">...</pre>Jika ingin menambahkan angka baris gunakan kode dibawah ini:
<pre class="prettyprint linenums lang-html">...</pre>
Sedangkan bahasa kode yang dikenali Prettify seperti dibawah ini, dan dalam penggunaannya cukup masukan kode lang-* (asterik atau bintang diganti dengan ektensi dibawah ini):
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java","js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml","xsl"
Kesimpulan
Penggunaan Syntax Highlighter bukanlah hal wajib, hanya sekedar tambahan untuk mempercatik tampilan. Sedangkan bagi para penulis non tutorial web, penggunaan Syntax Highlighter menjadi tidak bermanfaat. Toh tidak akan pernah membagikan kode, ngerti kode juga engga...? Selamat mencoba dan semoga berhasil... Sampai jumpa diartikel berikutnya... Terus belajar dan belajar lagi...
Comments
Post a Comment