Cara Paling Mudah Memasang Kode Sintax Highlighter di Blogger


winartoajisaputro.com - Sintax Highlighter merupakan sebuah kotak yang berisikan bermacam kode seperti HTML, CSS, JavaScript dan lainnya. Sintax Highlighter sangat cocok bagi blog yang membahas mengenai tutorial maupun pemprograman karena sebagian besar menampilkan kode sintax agar beda dengan tulisan biasa.

Berbeda dengan fitur Blokquotes, Sintax Highlighter mempunyai berbagai varian warna serta tulisan didalam sebuah kotak hitam yang membuat tampilan postingan blog menjadi lebih enak dipandang. Hal ini tentu menambah nilai tambah pada blog tersebut. 

Manfaat bagi pengunjung tentu akan sangat mudah membedakan kode dengan tulisan biasa yang membuat tingkat kenyamanan dalam membaca sangat tinggi. 

Cara Memasang Sintax Highlighter di Dalam Postingan Blog

1. Buka Blogger.com > menu 'edit HTML'

2. Tambahkan kode di bawah ini tepat di atas 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>
3. Agar kode berjalan dengan baik, tambahkan kode di bawah ini tepat di atas </style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
4. Tambahkan juga kode di bawah 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>

5. Simpan Tema

Cara Menulis Kode Sintax Highlighter di Postingan Blog

Setelah selesai memasang kode Sintax Highlighter di dalam Template blog, sekarang anda pahami cara menulis kode sintax agar muncul di dalam postingan. Silahkan anda simak langkah-langkah yang saya buat berikut ini.

Masuk ke blogger.com > menu 'Postingan' > klik menu 'Mode HTML', lalu awali dengan menambahkan kode <pre><code>kode sintax anda</code></pre>

<pre><code>kode sintax anda</code></pre>.

untuk tampilan Sintax Highlighter berbeda-beda tergantung template yang anda pasang. dengan adanya fitur tersebut sangat mudah dalam menulis kode CSS, Javascript dan lainnya untuk membedakan dengan tulisan biasa.

Mudah bukan? Cara Membuat dan Memasang Sintax Highlighter di blog berhasil terpasang, semoga artikel kali ini bisa bermanfaat untuk Anda. 

Next Post Previous Post
No Comment
Add Comment
comment url