Cara Membuat Syntax Highlighter di Blogger
Mengapa syntax highlighter ini sangat penting di pasang di blogger. Bagi para blogger yang membahas tutorial blogging atau coding di blog atau website, syntax highlighter ini sangat penting.
Karena dengan adanya syntax highlighter yang di tampilkan akan lebih enak di pandang dan lebih profesional, sehingga akan jelas terlihat perbedaannya antara teks biasa dengan teks coding.
Fungsi Syntax Highlighter
Selain itu, syntax highlighter ini biasanya juga di lengkapi dengan penomoran baris secara otomatis. Tampilan coding dengan baris di sampingnya akan sangat memudahkan dan nyaman di lihat.
Berikut cara dan langkah-langkah pemasangannya Syntax highlighter di blogger.
Membuat syntax highlighter di blogger
- Masuk Menu > Theme > Edit HTML
- Backup dahulu jika di perlukan
- Cari kode
]]></b:skin>untuk mempercepat pencarian tekan CTRL+F - Salin kode dibawah ini, pastekan tepat dibawah
]]></b:skin>
<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>
- Terakhir simpan.
Template akan mudah di simpan jika Anda memodifikasinya dengan benar sesuai tutorial, dan sistem blogger akan memberikan notifikasi pemberitahuan jika terjadi error pada template.
Menggunakan syntax highlighter di blogger
Memasukan kode di postingan biasanya Anda akan menggunakan kode atau tag seperti <pre>kode di sini</pre>.
Cara penggunaan Syntax Highlighter pada umumnya sama, bedanya pada tutorial disini ada penambahan atribut class. Perhatikan contoh berikut:
<pre class="brush:html">kode di sini</pre>Kode di atas akan memberi Highlight jenis kode yang disebutkan pada atribut class diatas. Untuk jenis kode yang di support highlight diantaranya 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.
Sebelum menggunakan syntax highlighter di postingan, parser terlebih dahulu. Untuk tool parsernya Anda bisa gunakan secara online disini.
Post a Comment