Skip to main content
YUUARI

follow us

Cara Membuat Syntax Highlighter di Postingan Blog

Membuat atau memasang Syntax Highlighter di blog bisa menjadi mempercantik tampilan dan mempermudah pembaca mengenali kode yang di berikan oleh penulis.

Syntax Highlighter sebuah fitur khusus untuk kode bahasa pemograman tertentu dengan warna teks, tulisan, dan posisi sama dengan sebuah kode bahasa untuk di pindah maupun di salin kedalam bentuk tulisan lain, sepuya mudah di pahami dan di pelajari pembaca.

Cara Menambahkan Syntax Highlighter ke Dalam Tema

1. Buka Blog [blogger] kalian.
2. Pilih menu Tema.
3. Pilih Edit HTML.
4. Salin kode CSS di bawah ini sebelum atau di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; [Untuk mempermudah pencarian kode, tekan CTRL + F pada keyboard]
Informasi, kode yang mimin bagikan di postingan ini akan bekerja dengan baik, bila blog kalian sudah menambahkan jquery library. Bila belum, bisa kalian tambahkan jquery library di atas kode <head> Berikut contoh jquery library :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
<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. Tambahkan kode di bawah ini sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;
<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>

6. Bila sudah klik Simpan Tema.

Cara Penulisan Syntax Highlighter di Dalam Postingan Blog

Setelah menambahkan kode yang di butuhkan ke dalam template blog, selanjutnya cara penulisan kode Syntax Highlighter di dalam postingan. Buka postingan baru atau edit postingan yang sudah ada, untuk penulisan salin kode di bawah ini kedalam postingan dengan mode penulisan HTML [bukan Compose].


<pre><code>__SALIN KODE CSS/HTML/JAVASCRIPT KALIAN DI SINI__</code></pre>

Ganti tulisan yang di tandai di atas dengan CSS/HTML/JAVASCRIPT yang kalian inginkan. Khusus untuk kode HTML/JAVASCRIPT kalian harus memparsenya terlebih dahulu biar tidak berubah kodenya. Kalian bisa memparse kode di situs blogcrowds.

Berikut contoh penulisan di dalam postingan, tulisan yang mimin tandai adalah tulisan yang kalian ganti sesui keinginan kalian.

<code><pre>Cara Membuat Syntax Highlighter di Postingan Blog</code></pre>

Sama halnya bila ingin menggunakan atau menambahkan kode CSS/HTML/JAVASCRIPT cara penulisannya sama dengan di atas, tapi ingat untuk memparsenya terlebih dahulu.

Demikian tutorial Cara Membuat Syntax Highlighter di Postingan Blog. Semoga bermanfaat dan bisa kalian ikuti langkah-langkah pembuatanya.

You Might Also Like:

Comment Policy: Tinggalkan jejak tuliskan anda di komentar yang sesuai dengan topik postingan halaman ini. Komentar yang terdapat link tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar