Wednesday, January 15, 2020

Membuat Syntax Highlighter Pada Blog Menggunakan CSS

Your Ads Here

Membuat Syntax Highlighter Pada Blog Menggunakan CSS
Paijem
Your Ads Here

Syntax Highlighter Merupakan kotak script text editor yang dapat memuat kode - kode pada halaman web. Pada umumya Syntax ini biasa di temukan di kalangan para blogger yang membahas tentang Tutorial dan web design.

Membuat Syntax Highlighter Pada Blog Menggunakan CSS

Fungsi dari Syntax Highlighter sendiri adalah sebagai pembeda dari berbagai script seperti CSS, Javascript, HTML karna terdapat awalan kode dan warna berbeda pada setiap script tersebut. Nah untuk kali ini admin akan memberikan tutorialnya cara memasang pada blog kalian.

Di sini admin memiliki 2 kode yaitu,

  1. Script hanya menggunakan CSS saja, lebih ringan. Namun tidak memiliki warna pembeda pada setiap kode.
  2. Script menggunakan Javascript saja, berbeda dengan yang mengunakan CSS, script ini lumayan berat. Namun terdapat warna pembeda dari setiap script kode nya.

A. Script Menggunakan CSS

Cara Pemasangan

1. Silahkan masuk ke akun blogger kalian masing - masing.

2. Selanjutnya pilih Tema ~ Edit HTML

3. Paste kode CSS di bawah tepat di atas kode ]]></b:skin> atau </style>.

  .post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #008c5f; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

4. Selesai simpan tema.

B. Script Menggunakan Javascript

Cara Pemasangan

1. Masuk ke Tema ~ Edit HTML, pastikan sudah login ke blogger kalian

2. Cari kode </head>, dan pastekan kode JS dibawah ini tepat di atas tag </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. Selanjutnya cari lagi kode </body>, dan letakkan kode JS dibawah ini tepat di atas tag </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.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>

4. Selesai Simpan Tema.

Perhatikan baik - baik cara pemasangan kode nya, ketika membuat artikel dan mau memasukkan script highlighter kalian masuk ke menu HTML bukan Compose, lalu pastekan kode di bawah ini.
<pre><code> <!-- Masukkan semua kode CSS, HTML atau Javascript disini --> </code></pre>

Satu Lagi, harus di ingat Ketika hendak memasukkan kode kedalam syntax highlighter selain kode CSS, misalkan HTML, JS, JQuery dll. harus di parse terlibih dahulu sebelum memasukkan ke dalam syntax highlighter. Untuk cara parse kode silahkan kunjungi website di bawah ini. Dan pastekan kode nya di sana lalu klik parse.

http://www.blogcrowds.com/resources/parse_html.php

Nah cukup sekian untuk cara Membuat Syntax Highlighter Pada Blog Menggunakan CSS semoga bermanfaat terimakasih.

Jika masih kesulitan atau bingung silahkan tinggalkan pesan di kolom komentar nanti saya bantu sebisa saya.

Blog ini adalah tempat untuk penyedia berbagai macam tutorial, tips, dan info menarik lainnya. Admin berharap pengunjung dapat lebih mudah mencari apa yang di inginkan dan mendapatkan informasi yang menarik di blog ini.