Cara Membuat Syntax Highlighter di Postingan Blogger
Arsipbiru.com - Pernahkah Anda melihat sebuah situs atau blog yang memasang syntax highlighter yang keren dalam postingan blognya? Jika pernah, bagaimana kesan Anda tentang syntax highlighter tersebut? Keren bukan?
Biasanya orang yang memasang syntax highlighter pada sebuah blog adalah situs yang membahas tutorial seputar blog atau bahkan mungkin blog yang membagikan kode-kode, selain itu ada juga orang yang ingin menandai suatu tulisan dengan cara memasang syntax highlighter di postingan blog agar tulisan terlihat jelas dan berbeda dengan tulisan yang lainnya.
Apa itu Syntax Highlighter?
Syntax Highlighter adalah sebuah fitur khusus yang digunakan untuk menampilkan teks warna warni (highlight) sesuai dengan bahasa program yang ditulis. Fitur ini biasanya ada di blog atau website tutorial pemrograman, dan biasanya fitur ini harus ditambahkan terlebih dahulu baik di wordpress maupun di blogger.
Jika kalian pengguna wordpress, maka banyak sekali plugin yang bisa kalian gunakan untuk membuat fitur ini. Salah satunya adalah Crayon Syntax Highlighter. Sayangnya, pada kesempatan kali ini saya tidak akan membahas fitur tersebut di CMS wordpress.
Kita akan membuat fitur highlighter pada blogger. Dimana fitur tersebut tidak disediakan oleh blogger lewat widgetnya, sehingga kita perlu sedikit mengoprek tema dengan menambahkan beberapa script yang telah saya siapkan di bawah ini.
Fungsi Syntax Highlighter
Bagi blogger yang membahas tutorial berisi kode-kode di blognya, syntax highlighter ini sangat penting. Sebab dengan adanya syntax highlighter, kode-kode yang ditampilkan di postingan akan lebih enak dilihat.
Sehingga akan terlihat jelas perbedaan antara teks biasa dengan teks coding. Di samping itu, syntax highlighter ini biasanya juga dilengkapi dengan penomoran baris secara otomatis. Tampilan coding dengan baris di sampingnya akan sangat memudahkan dan nyaman dilihat seperti yang ada pada software teks editor.
Cara Membuat Syntax Highlighter di Blogger
Setelah tahu apa itu syntax highlighter beserta fungsinya. Tentu saja dalam benak ingin mencoba memasang syntax highlighter pada blog. Berikut ini saya akan memberikan tutorial terkait bagaimana cara membuat syntax highlighter pada blogger. Simak langkah-langkahnya dengan seksama.
- Masuk ke Blogger.com > Klik menu Template > lalu klik tombol Edit HTML.
- Cari kode ]]></b:skin> pada kotak pencarian. Caranya tekan Ctrl + F dan masukkan kode tersebut ke kotak pencarian dan klik Enter.
- Setelah ketemu, copy dan paste-kan kode di bawah ini tepat di bawah ]]></b:skin>. Lalu klik Simpan Template.
<link href='https://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='https://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'https://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>Jika tidak ada kesalahan dalam menambahkan coding tersebut, template dapat disimpan dengan mudah. Namun, jika terdapat kesalahan, maka secara otomatis Blogger akan menampilkan notifikasi error ketika tombol Simpan Template diklik.
Sekarang kita sudah berhasil memasang Syntax Highlighter di Blogger. Selanjutnya adalah bagaimana cara menggunakannya agar syntax coding dapat ditampilkan di postingan Blogger. Silahkan ikuti langkah-langkah berikut ini dengan seksama.
Cara Menggunakan Syntax Highlighter di Postingan Blogger
Biasanya, kalau kita ingin memasukkan kode di postingan, kita menggunakan kode/tag:
<pre>kodenya di sini</pre>Nah, cara penggunaan syntax highlighter yang sudah dipasang sebelumnya juga kurang lebih sama. Bedanya ada penambahan atribut class. Perhatikan contoh berikut:
<pre class="brush:html">
kodenya di sini
</pre>Kode di atas akan memberi highlight jenis kode yang disebutkan pada atribut class di atas. Untuk jenis kode yang disupport highlight di antaranya yaitu; CSS, HTML, Javascript, PHP, SQL, dan Python. Sehingga, untuk classnya menjadi brush:css, brush:html, brush:js, brush:php, brush:sql, dan brush:python.
Satu hal penting yang sangat perlu diperhatikan, yakni kode yang ingin ditampilkan di postingan harus diparser terlebih dahulu agar bisa muncul di postingan, bukan dibaca sebagai perintah/diterjemahkan oleh browser sebagai elemen HTML (web). Untuk tool parsernya, Anda bisa gunakan secara online pada alamat berikut https://www.freeformatter.com/html-escape.html.
Jika sudah diparser, pastikan coding tersebut tidak ada typo supaya bisa tampil tanpa ada kendala. Publish postingan tersebut dan perhatikan hasilnya. Kode tersebut akan tampil bagus di postingan.
Sekian tutorial mengenai cara membuat syntax highlighter di postingan blogger. Semoga panduan di atas bisa diikuti dengan mudah dan semoga bermanfaat.
Posting Komentar