kLAfYOEsUwKWcZE5EN4T8XHN0KE0jykePDkZX1nb
Cara Membuat Syntax Highlighter di Postingan Blog

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.
Baca Juga
SHARE

Related Posts

Subscribe to get free updates

Posting Komentar

Like Facebook Yuuari.Com

Ikuti fanpage facebook Yuuari.com dan dapatkan Informasi terupdate seputar link file Firmware handphone, Game PSP terbaru dan masih banyak lain nya. 'IKUTI FANPAGE'