Membuat Syntax Highlighter Otomatis Terbaru di Blogger / blogspot

Membuat Syntax Highlighter Otomatis Terbaru di Blogger / blogspot

hallo teman-teman kembali lagi dengan idetips , so kali ini idetips mau berbagi bagaimana sih membuat Syntax Highlighter pada postingan blogger ? , salah satu fungsi Syntax Highlighter ini adalah untuk mempercantik code-code yang anda share di postingan anda , jadi warna warni gitu , untuk demo-nya klik saja link dibawah ini .

lihat pada bagian bawah postingan

Syntax Highlighter yaitu suatu code yang kita gunakan di blog atau web kita yang nantinya akan membuat code yang kita post menjadi berwarna – warni . biasanya Syntax Highlighter digunakan oleh web yang membagikan tutorial coding sehingga jika blog tersebut memuat atau meletakkan seperti code css , html , javascript nantinya warna dari code itu akan berwarna – warni . jika kalian biasa menggunakan text editor mungkin sudah sering melihat hal seperti ini .

Pengunaan umum Syntax Highlighter adalah untuk mempercantik barisan kode yang ada pada postingan web , tapi ada efek lainya yang bagus juga dalam pengunaan Syntax Highlighter ini , salah satunya adalah pengujung blog kita jadi mudah untuk membaca dan mengetahui jenis code yang ada , pengunjung merasa nyaman saat membaca postingan kita dan membuat website kita menjadi lebih professional .

untuk itu disarankan sekali Syntax Highlighter ini digunakan untuk blogger yang memuat niche tentang tutorial yang menyajikan banyak code – code pemprograman . untuk Syntax Highlighter yang kita gunakan di blogger ini adalah sebagai pengganti blockquote , karena jika kita menggunakan blockquote untuk barisan kode , tidak ada perubahan warna pada code yang kita posting , jadi kurang menarik menurut saya .

Cara memasang Syntax Highlighter di blogger / blogspot

Step /Langkah 1 :

silahkan login ke blogger anda , klik “tema” pada sidebar dan klik “edit html” .
cari code </head> atau &lt;/head&gt;&lt;!–<head/>–&gt;
gunakan CTRL + F untuk mempermudah pencarian .
letakkan kode dibawah ini tepat diatasnya .

<script type=’text/javascript’>
//<![CDATA[
function loadCSS(e, t, n) { “use strict”; var i = window.document.createElement(“link”); var o = t || window.document.getElementsByTagName(“script”)[0]; i.rel = “stylesheet”; i.href = e; i.media = “only x”; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || “all” }) };loadCSS(“//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/googlecode.min.css“);
//]]>
</script>

Perhatian :

pada potongan code diatas yang saya tandai dengan background kuning adalah style highlight.js , disini saya menggunakan googlecode , jadi anda bisa ganti sesuai yang anda suka silahkan CEK DISINI untuk yang lainnya .

contoh : saya merubah googlecode.min.css dengan github-gist.min.css

Step /Langkah 2 :

Selanjutnya cari code </body> atau &lt;!–</body>–&gt;&lt;/body&gt; (gunakan CTRL + F untuk mempermudah ) letakkan code dibawah ini tepat diatasnya .

<b:if cond=’data:view.isPost’>
<script src=’https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js’ type=’text/javascript’/>
<script type=’text/javascript’>
//<![CDATA[
hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$(“div.code”).each(function(e,t){hljs.highlightBlock(t)});
//]]>
</script>
</b:if>

Step /Langkah 3 :

untuk langkah ke 3 ini hanya mengantisipasi saja , supaya saat JavaScript dan highlight.js yang kita pasang tadi belum terload , code pada postingan kita tidak berantakan .
letakkan code dibawah ini tepat diatas code </style>

/* Highlight CSS */
code,pre,pre code{font-family:Consolas,Monaco,’Andale Mono’,monospace;word-spacing:normal;font-size:14px;line-height:1.3em;}
pre code{padding:20px!important;margin:20px auto 50px;background-color:#fff!important;box-shadow:0 9px 19px 7px rgba(0,0,0,.04),0 10px 17px -2px rgba(0,0,0,.070);border-top:1px solid rgba(0,0,0,0.02);}
.post-body code{color:#e20d58}

jika sudah silahkan simpan tema .

Pengunaan Syntax Highlighter pada postingan blogger .

untuk mengunakan syntax highlighter tadi silahkan buat postingan baru / buka postingan lama dan tambahkan code dibawah ini , pastikan anda menambahkanya pada mode HTML bukan compose

<pre><code>
Kode JavaScript, jQuery atau CSS masukkan disini
</pre></code>

bisa juga anda gunakan syntax highlighter pada comentar blogger , tinggal copy paste saja code dibawah ini :

<i rel=”pre”> kode disini </i>

jadi seperti itulah tutorial Membuat Syntax Highlighter Otomatis Terbaru di Blogger / blogspot , semoga bisa dimengerti , jika kurang paham silahkan tinggalkan commentar , thanks

Leave a Reply

Your email address will not be published. Required fields are marked *