Pembahasan AneIqbal kali ini yaitu bagaimana cara membuat syntax highlighter di blog, dalam hal ini blogger. Mengapa syntax highlighter ini penting dipasang? Nanti akan dibahas juga. Berikut pembahasan selengkapnya.
Fungsi syntax highlighter
Bagi blogger yang membahas tutorial berisi kodingan di blognya, syntax highlighter ini sangat penting. Karena dengan adanya syntax highlighter, kodingan 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. Ya mirip-mirip di software teks editor seperti Notepad++.
Nah, bagaimanakah proses pemasangannya untuk di platform blogger? Simak tutorial selengkapnya berikut ini.
Simak juga: cara membuat copyright blogger
Cara membuat syntax highlighter di blog
- Masuk ke Blogger.com > menu Template > lalu klik tombol Edit HTML.
- Buat jaga-jaga, backup dulu templatenya. Nggak juga nggak masalah karena kita cuma menambahkan beberapa baris kode, nggak ngoprek-ngoprek banget.
- Cari kode ]]></b:skin>.. Supaya lebih cepat, tekan Ctrl + F lalu ketik kode tersebut di kotak pencarian.
- 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>
Kalau sudah ditambahkan, maka akan terlihat seperti berikut.
Syntax highlighter sudah ditambahkan. Jika tidak ada kesalahan atau typo, template dapat disimpan dengan mudah. Namun jika ada kesalahan typo dan lainnya, maka blogger akan menampilkan notifikasi eror ketika tombol Simpan template diklik.
Sekarang kita sudah berhasil memasang syntax highlighter di blogger. Selanjutnya adalah bagaimana cara menggunakannya? Bagaimana supaya kita bisa menampilan syntax coding di postingan blogger? Silakan ikuti langkah-langkah berikut ini.
Cara menggunakan syntax highlighter 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. Kode yang ingin ditampilkan di postingan harus diparser terlebih dahulu agar bisa muncul di postingan, bukan dibaca sebagai perintah/diterjemahkan oleh browser sebagai element HTML (web). Perhatikan gambar berikut.
Gambar di atas menunjukkan cara menggunakan syntax highlighter di postingan. Tepatnya di sebelah kanan dan kiri tag_pembuka atau di sebelah kiri ini.
Kode yang ingin ditampilkan di postingan sudah diparser terlebih dulu. Untuk tool parsernya, Anda bisa gunakan secara online pada alamat berikut https://www.freeformatter.com/html-escape.html.
Simak juga: cara membuat favicon blogger
Jika sudah diparser, pastikan codingan tidak ada typo supaya bisa tampil tanpa ada kendala. Publish postingan tersebut dan hasilnya kode akan tampil bagus di postingan.
Bagaimana? Syntax highlighter sudah berhasil dipasang di blog Anda? Semoga berhasil tanpa ada kendala ya. Dengan begitu, Anda bisa menampilkan codingan secara cantik dan bagus di postingan blog Anda.
Sekian pembahasan kita kali ini mengenai cara membuat syntax highlighter di blog. Semoga panduan di atas bisa diikuti dengan mudah dan semoga bisa bermanfaat.
