Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / BLOGGING

Cara Memasang Kotak Pembungkus Kode (Syntax Highlighter) pada Blogspot

Oleh Zef Posting Komentar
Syntax Highlighter adalah fitur khusus untuk memindahkan bahasa pemrograman dalam bentuk teks agar mudah dipahami dan dipelajari. Syntax Highlighter berfungsi membungkus kode HTML atau CSS untuk membedakannya dengan artikel yang ada di dalam sebuah postingan.

Selain itu, Syntax Highlighter juga akan memberikan efek yang baik terhadap blog yang memasangnya dikarenakan akan menambah ketertarikan pengunjung dalam membaca dan memberikan kesan yang Professional.

memasang syntax highlighter pada Viomagz


Cara Memasang Syntax Highlighter Pada Blog


Pertama bukalah Dasbor Blog sobat dan edit HTML

Kedua cari kode <head>, jika sudah ditemukan maka salin kode dibawah ini tepat dibawahnya, atau bisa juga ditempatkan dibawah </html>, terserah saja yang penting sudah terinstal didalam struktur HTML blog sobat.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>


Ketiga cari kode dan </head> lalu tambahkan kode dibawah ini tepat diatasnya

<style type='text/css'>

/* Highlighter */

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:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;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:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.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:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;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:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.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}

</style>


Ke empat cari kode </body> dan tambahkan kode dibawah ini sebelum </body>

<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/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>


Terakhir save.
Sejauh ini Syntax Highlighter sudah terpasang di Blog sobat. Eits tapi bagaimana cara pemasangannya pada postingan blog? Simak lanjutannya dibawah ini

Cara Penggunaan Syntax Highlighter pada Postingan Blog


Cara menggunakannya juga sangat mudah, saya sudah mempraktekannya pada blog saya yang menggunakan Template Viomagz ini. Yang harus dilakukan tulislah artikel seperti biasa, dan jika ingin menggunakan Syntax Highlighter maka gunakan mode HTML alih-alih Compose.

Caranya

<pre><code> …tulis kode HTML atau CSS disini… </code></pre>

Jika pemasangannya benar dan cara menggunakannya tepat, maka hasilnya bisa lihat seperti pada postingan saya ini.

Nah itu dia cara memasang dan menggunakan Syntax Highlighter pada blogspot. Semoga bermanfaat ya… 


Posting Komentar untuk "Cara Memasang Kotak Pembungkus Kode (Syntax Highlighter) pada Blogspot"

- Semua komentar akan dimoderasi, jadi tidak semua dipublikasikan
- Komentar menggunakan link aktif tidak akan di Moderasi
- Untuk mendapatkan pemberitahuan balasan dari Admin, silahkan centang Notife Me (Beri tahu saya)