Cara Gampang Memasang Syntax Highlighter Pada Postingan Di Blogger
Syntax Highlighter yaitu sebuah fitur unik yang difungsikan untuk mempermudah penempatan arahan pemrograman kedalam sebuah postingan blog.
Dengan adanya Syntax Highlighter ini pula arahan pemrograman yang ditempatkan pada post blog akan lebih menarik dan terlihat profesional. Sebab Syntax Highlighter ini akan menyeleksi warna secara otomatis sesuai dengan arahan pemrograman yang anda tempatkan.
Kaprikornus suatu misal anda memasukkan arahan HTML kedalam post blog anda, maka nanti arahan HTML tersebut akan ditandai dengan warna tertentu yang membedakan dengan arahan pemrograman lain. Begitu pula dengan arahan pemrograman lainnya menyerupai CSS dan Javascript.
Hal ini tentu akan mempermudah pengunjung blog memahami isi dari script arahan pemrograman yang anda bagikan.
Penggunaan Syntax Highlighter ini tentunya akan sangat cocok bagi anda yang sering menciptakan post berupa tutorial pemrograman. Selain efektif, penggunaan Syntax Highlighter ini juga akan menciptakan pengunjung blog lebih merasa bahagia dan betah berada di blog anda.
Dari sekian banyak manfaat yang didapat dari penggunaan Syntax Highlighter, ternyata untuk membuatnya pun tidak terlalu sulit. Anda hanya perlu memasukkan beberapa arahan pelengkap kedalam tema blog anda, dan kemudian anda bebas memakai Syntax Highlighter ini.
Nah untuk sanggup memakai Syntax Highlighter ini anda harus melewati dua tahap. Tahap pertama yaitu memasang script arahan Syntax Highlighter, dan tahap kedua yaitu cara mengunakan Syntax Highlighter pada post blog.
Baiklah untuk anda yang sudah menanti bagaimana cara memasang Syntax Highlighter ini, silahkan ikuti saja panduan berikut:
Tahap I : Memasang Syntax Highlighter Pada Tema Blog
Catatan:1. Login ke blogger.com
Syntax Highlighter akan bekerja secara optimal, apabila script arahan jquery sudah terpasang di blog anda. Contoh sederhana dari script arahan jquery yaitu : <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
2. Pada dashboard blogger pilih Tema>>Edit HTML
3. Copy arahan berikut, dan pastekan sebelum kode </head> atau </head><!--<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><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>Tahap II : Cara Menggunakan Syntax Highlighter Pada Postingan
1. Pada dashboard blogger pilih Postingan>>Entri Baru
2. Masuk pada mode "HTML" (bukan "Compose")
3. Masukkan arahan berikut pada tab HTML tersebut
<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre> Catatan:
Ganti goresan pena yang bertanda Merah dengan arahan Html, Css, atau Javascript anda.
Catatan:4. Lakukan "Pratinjau" untuk mengetahui hasilnya
Silahkan Parse terlebih dahulu arahan Html, Css atau Javascript yang akan anda masukkan. Di HTML Converter
5. Selesai.
Catatan:Sedikit isu saja bagi yang belum tahu menyerupai apa sih bentuk dari Syntax Highlighter. Anda sanggup melihatnya pada gambar berikut ini:
Untuk penggunaan arahan pemrograman lain menyerupai CSS, Javascript, Php, dan sebagainya. Cara penggunaannya sama saja, tidak ada perbedaan.
Penutup
Oke saya rasa anda sudah mulai paham bagaimana cara memakai Syntax Highlighter didalam postingan blog. Untuk selebihnya anda sanggup berkreasi sendiri ya.Oh ya, sedikit isu saja bahwa Syntax Highlighter ini tidak akan memberatkan loading blog anda. Kaprikornus aman-aman saja untuk digunakan.
Itu saja yang sanggup saya sampaikan, kurang lebihnya mohon maaf, dan selesai kata saya ucapkan terimakasih.
