tokoria.id – Pada artikel ini tokoria.idblog akan memberikan tutorial bagaimana cara membuat syntax highlighter di blog. Dan disini kita juga akan membahas, apa itu syntax highlighter? – Kenapa syntax highlighter penting dipasang? Berikut pembahasan lengkapnya.
Pengertian Syntax Highlighter
Syntax Highlighter adalah fitur teks editor untuk yang berguna untuk menampilkan teks (Terutama Source Code) dalam berbagai warna,gaya dan font sesuai dengan istilah kategori.
Ide yang terdapat dalam pembuatan Syntax Highlighter adalah untuk memungkinkan penyisipan potongan kode pada halaman web tanpa bergantung pada sisi script server. Syntax Highlighter menggunakan bahasa reguler untuk melakukan parse terhadap text.
Fungsi Syntax Highlighter
Ketika kamu mampir di blog yang membahas seputar programing atau intinya yang di tengah-tengah artikel blog nya berisi kodingan, biasanya mereka akan menggunakan syntax highlighter ini supaya code yang mereka pasang di dalam sebuah postingannya lebih rapi dan enak diliat. Itulah mengapa syntax highlighter ini begitu penting.
Dengan menggunakan syntax highlighter akan mudah dan jelas perbedaan antara teks biasa dengan teks code. Di sisi lain, syntax highlighter biasanyan akan dilengkapi dengan penomoran baris secara otomatis dan teratur. Sehingga Tampilan code dengan baris di sampingnya akan terlihat sangat rapi dan nyaman dilihat.
Sekarang kita lanjut ke cara membuat syntax highlighter di platform blogger? Simak tutorial lengkapnya berikut ini:
Cara membuat syntax highlighter di blog
- Silahkan kamu login akun Blogger.com > di bagian menu kamu pilih tema > lalu klik tombol Edit HTML.
- Saya saranin buat jaga-jaga, backup dulu templatenya.
- Cari kode ]]></b:skin>.. Supaya lebih cepat, tekan Ctrl + F lalu ketik kode tersebut di kotak pencarian.
- Copy lalu 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>
Pastikan kamu tidak menghapus apapun saat memasang code Syntax highlighter. Jika tidak ada kesalahan, silahkan kamu simpan template yang sudah kamu tambahkan code Syntax highlighter.
Sekarang kamu sudah berhasil memasang syntax highlighter di blogger. Selanjutnya yang jadi pertanyaannya adalah bagaimana cara menggunakannya? Bagaimana supaya kita bisa menampilan syntax coding di postingan blogger? Silakan ikuti langkah-langkah berikut ini.
Cara masang syntax highlighter di postingan blogger
Nah, cara penggunaan syntax highlighter yang sudah dipasang sebelumnya juga kurang lebih sama kek umumnya. Bedanya disini kita penambahan atribut class. Perhatikan contoh berikut:
<pre class=”brush:html”> kode HTML yang sudah di parse </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 tools parsernya, kamu bisa menggunakan tools parse online di google.