Cara Memasang Syntax Highlighter di Postingan Blogger Terbaru
Blogger
Takon Blog - Halo semuanya, pada pertemuan kali ini kita akan membahas mengenai Cara Memasang Syntax Highlighter di Postingan Blogger Terbaru dengan mudah untuk kamu lakukan walupun seorang pemula seperti saya.
Mungkin teman-teman pernah melihat postingan blogger orang lain yang menampilkan kode kode script dari html, css, javascript atau pun php dengan tampilan yang keren kodenya warna warni, bagaimana cara membuatnya?
Tidak hanya saya saja yang membuat tutorial menggunakan cara ini, ada banyak para blogger yang mengesernya juga. Namun pada kesempatan kali ini saya akan memberikan panduan dengan menggunakan versi 9.15.10 dari highlight.js yang sudah terdapat beberapa modifikasi warna warni agar tidak terlihat terlalu sederhana.
Para pembaca : Caranya mana ini bang?
Ok para fans, tanpa banyak bicara lagi, langsung saja kita masuk ke pembahasan panduan cara memasang syntax hightlighter di postingan blogger dengan mudah :
Cara Memasang Syntax Highlighter di Postingan Blogger
1. Pertama kita masuk ke dashboard blogger kami terlebih dahulu, kemudian klik pada menu Tema.
2. Kemudian klik pada Edit HTML, cari kode ]]></b:skin> atau </style> dan kemudian silakan kamu copy pastekan kode dibawah ini tepat diatasnya.
/* Highlighter New */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:4px;background-color:#25282d;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#282829;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#64cdf9}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#2ed573}.post-body .hljs-string,.post-body .hljs-bullet{color:#90f790}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#00c4c0}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#ef6259}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#ffdf6f}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#beaaec}.post-body .hljs-meta{color:#f69a9a}.post-body .hljs-deletion{background-color:#f69a9a;color:#333}.post-body .hljs-addition{background-color:#90f790;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#fa4040;color:#fff;padding:1.5px 4px;border-radius:3px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
3. Selanjutnya cari kode </body> atau <!--</body>--></body> lalu copy pastekan kode dibawah ini tepat diatasnya.
<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/analisyuki/js@master/highlightnew.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
4. Lalu klik Save untuk menyimpan pembaruan yang kita lakukan.
Untuk cara pemasangan syntax hightlighter pada blogger sudah selesai, caranya sangat mudah sample bangetkan, tak serumit seperti yang kita pikirkan selama ini seperti hubungan dia dan kamu :v. Selanjutnya kita masuk ke cara penerapan pada postingan blog.
Cara Menerapakan Hightlighter Pada Postingan Blog Kita.
1. Pertama silakan kamu buat sebuah postingan, beri judul terlebih dahulu. Misalnya cara memasang kode CSS
2. Selanjutnya masuk ke Mode HTML, kemudian pastekan kode dibawah ini :
<pre><code>MASUKKAN KODE CSS/HTML/JAVASCRIPT DI SINI</code></pre>Jangan lupa ubah tulisan Kode Script dengan kode script yang ingin kamu tampilkan pada postingan blog kamu.
Cartatan : Kode Script Harus Sudah di Parse
Jika sudah siap semuanya kemudian publis postingan kamu, bangaimana mudahkan panduan cara memasang syngax hightlighter pada postingan blogger.
Sekian dari saya, diucapakan terimakasih telah berkunjung.