Tutorial Cara Memasang Syntaxt Highlighter di Postingan Blogger

Tutorial Cara Memasang Syntaxt Highlighter di Postingan Blogger
Isat Tekno ~ Jika berbicara masalah Syntax Highlighter maka kita akan berpikir tentang sebuah barisan kode yang memiliki warna yang beragam. Jika kalian pernah melihat sebuah blog tutorial yang menampilkan kode warna-warni yang beragam.

Kode – kode tersebut menjadi berwarna sehingga kita melihatnya juga tidak terlalu pusing kemudian nilai plusnya adalah postingan kita juga terlihat lebih hidup dengan Syntax Highlighter ini. Kode – kode yang dapat ditampilkan dengan menggunakan Syntax Highlighter ini adalah berupa kode berupa HTML, CSS, PHP, JavaScript atau yang lainnya dalam bentuk kode dengan warna-warni dan dengan susunan karakter yang tersusun rapi.

Penggunaan Syntax Highlighter ini juga dapat membuat pengunjung betah berlama – lama di blog kita. Dan juga membuat pengunjung menegenali kode yang kita tulis sehingga tidak membingungkan pengunjung bila menemukan kode – kode yang harus dipasang.

Untuk kesempatan kali ini akan dibahas tentang cara memasang Syntax Highlighter di blog berplatform Blogger. Tutor ini saya ambil dari blog milik mbak Arlina dan saya juga sudah dites diblog dan berhasil. Berikut Cara Memasang Syntaxt Highlighter di Postingan Blogger. Let’s Chek it out.

Cara Memasang Syntaxt Highlighter di Postingan Blogger

Pertama, kalian login ke blogger kalian >> klik menu Tema >> Klik Edit Html >> Cari Kode </head>  >> Tempelkan kode dibawah ini 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>

Kemudian cari kode </body> lalu tempelkan kode berikut 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.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
Kemudian klik Simpan Tema.

Cara Penulisan di Postingan Blog

Nah untuk tahap edit html blog sudah selesai sekarang kita akan mencoba memposting sebuah artikel yang berisi kode - kode program yang akan berwarna warni jika berhasil. Coba kalian tes untuk memposting kode - kode program tetapi sebelum memasukkan kode jangan lupa kode-kode tersebut harus diparse terlebih dahulu.

Buatlah postingan baru kemudian jika ingin menampilkan kode script maka kalian tinggal menambahkan script berikut. Tambahkan di HTML bukan di Compose ya
 
<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>

Ganti kode yang ditandai dengan kode script yang akan kalian tampilkan di postingan blog. Seperti ini contohnya.
<pre><code><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></code></pre>
Selanjutnya kalian bisa dilihat dipostingan kalian jika kode yang ditampilkan berwarna warni maka langkah - langkh yang kalian lakukan benar. Selamat Mencoba

Penutup

Demikian sedikit postingan tentang "Tutorial Cara Memasang Syntaxt Highlighter di Postingan Blogger Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Semoga postingan ini dapat bermanfaat.

Berlangganan update artikel terbaru via email:

0 Response to "Tutorial Cara Memasang Syntaxt Highlighter di Postingan Blogger"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel