Cara Mudah Membuat Syntax Highlighter Pada Postingan Blogger

Cara Mudah Menyisipkan Kode HTML Menggunakan Syntax Highlighter Pada Postingan Blogger

Pengalaman newbie menyisipkan Script HTML langsung di postingan blog, ada pengalaman yang bikin senyum-senyum sendiri. Kenapa saya sebodoh itu :v, saya pernah posting artikel blog yang berhubungan tentang script HTML. dengan kepolosan saya, saya tidak tahu kalau kode tersubut harus di posting dengan cara khusus, akhirnya script kode HTML tersebut malah menjadi tampilan yang ingin saya bagikan itu, bukan berbentuk kode-kodenya. Akhirnya saya cari tahu sendiri, kalau menyisipkan script HTML harus menggunakan Syntax Highlighter

Apa itu syntax highlighter, yaitu fitur editor berbentuk teks yang digunakan untuk menyoroti atau meyisipkan bergabai jenis bahas pemograman atau script seperti HTML, Javascript , CSS dan lainnya. Syntax highlighter biasanya menampilkan teks menjadi lebih enak dilihat dan lebih berwarna dengan kategori pemograman itu sendiri. Dengan demikian kode pemograman yang kita sisipkan lebih mudah dibaca dan di mengerti. Syntax Highlighter adalah tools pengganti blockquote, namun tampilan didalam blockquote sangatlah sederhana dan tidak mendukung warna-warni untuk tampilan kode script, maka jalan keluarnya ialah menggunakan Tools Syntax Highlighter ini.

Syntax Highlighter Biasanya digunakan blog dengan niche yang memnbahas tentang berbagai macam bahasa pemograman atau tutorial-tutorial yang berhubungan dengan script HTML. Blog yang terkenal sering membahas semacam itu di anataranta blog bungfrangky, igniel arlinadzgn dan kompiajaib. mereka sepertinya sama menggunakan cara ini untuk menyisipkan script HTML ke dalam postingannya.


Baca Juga : 5 Youtuber Dengan Kenaikan Subscriber Tercepat Di Indonesia


Cara Mudah Memasang Syntax Highlighter pada postingan Blogger

Cara ini sama halnya pada umumnya memasukan kode HTML ke dalam Tema blogger kita. Namun menurut saya cara ini paling mudah dan simple untuk dilakukan
1. LogIn Seperti Biasa Ke Blogger
2. Lalu Pilih Dashboard -> Tema -> Edit HTML
3. Cari kode berikut  </head> , Untuk lebih mudah mencarinya tekan ctrl + f
4. Paste kode dibawah ini Sebelum kode </head>

<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>

5. Cari kode berikut </body>
6. Lalu Tambahkan kode dibawah ini tepat di atas </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.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>

7. Kemudian Simpan Tema

Syntax Highlighter akan bekerja dengan optimal, apabila script kode jquery sudah terpasang di blog anda. Contoh sederhana dari script kode jquery adalah : <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/> 
. 

Baca Juga : Rekomendasi Hp Gaming 1 Jutaan Terbaik Tahun 2019


Cara Menggunakan Syntax Highlighter Kedalam Postingan

Untuk menggunakan atau menyisipkan Syntax Highlighter kedalam postingan, caranya seperti berikut:
1. Pilih Entri Baru
2. Pilih pada mode HTML
3. Masukan kode berikut pada postingan yang akan menampilkan script HTML

<pre><code>_Tambahkan Kode HTML/CSS/JAVASCRIPT Disini_</code></pre>

Silahkan ganti teks yang berwarna Hijau dengan kode HTML, Javascipt atau CSS yang akan masukan kedalam postingan

Jika Anda ingin menambahkan atau memasukan kode HTML seperti di atas sangat disarankan untuk parse dulu kode tersebut menggunakan tool Parse HTML. HTML Converter DISINI

4. Lakukan Pratinjau Terlebih dahulu untuk melihat Hasilnya, Selesai

Syntax Highlighter Lebih cocok untuk blog yang mengelola blog dengan niche Full Tutorial script kode html, css dan lainya. Dan tidak cocok Untuk blog yang hanya sekali-kali menyajikan tutorial seperti ini, untuk itu jangan berlebihan memasang script di blog kita karena akan sangat berpengarah terhadap loading blog.

Demikian Cara memasang Syntax Highlighter di blogger, semoga bisa digunakan ke dalam blog kita. (EP)