Cara Memasang Syntax Highlighter di Postingan Blog

bloggergratisann

Cara Membuat Syntax Highlighter - Halo sobat pada Kali ini saya ingin memberikan sebuah tutorial Cara Memasang Syntax Highlighter. Biasanya Syntax digunakan oleh seorang Programer tetapi berjalannya waktu kini Syntax Highlighter bisa digunakan oleh para publisher Blogger.

Syntax Highlighter sendiri digunakan untuk merapihkan kode-kode Programer (html,java script, CCS dan lainnya) agar terlihat rapih pada sebuah sebuah blog. 

Sebelum kita masuk pada Cara Membuat Syntax Highlighter kita lihat terlebih dahulu perbandingan antara menggunakan Syntax dan tidak.

Sebelum Menggunakan Syntax Highlighter

Sesudah Menggunakan Syntax Highlighter

Bisa kalian lihat gambar diatas ? Gambar kedua adalah contoh sebuah penulisan Html Yang sudah menggunakan Syntax Highlighter, dan yang pertama adalah contoh penulisan yang belum menggunakan Syntax Highlighter.

Baiklah kita langsung Saja ke pembahasannya yaitu Cara Memasang Syntax Highlighter Dipostingan Blog.
Untuk memasang Syntax Highlighter langsung kedalam Tema Bukan pada widget.

Cara Memasang Syntax Highlighter Didalam Tema


  • Pertama silahkan kalian buka/login ke Dalam Blog Yang akan menggunakan Syntax Highlighter.
  • Pada dashboard blog kalian klik menu Tema => Edit Html.
  • Selanjutnya kalian tekan Ctrl + F (bagi yang menggunakan PC/Laptop) Kali kalian ketikan </head> lalu letakan Kode dibawah ini tepat diatas 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> 

  • Selanjutnya cari Kode </body> dan letakan kode dibawah ini tepat diatas kode </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>

Cara Menggunakan Menggunakan Syntax Highlighter

  • Nah tahap pemasangan kode Syntax Highlighter kedalam tema sudah selesai sekarang kita ke tahap pemanggilan kode Syntax Highlighter pada saat penulisan. 
  • Pada saat kalian membuat post/artikel kalian pada artikel tersebut terdapat Kode html dll Dan kalian ingin menggunakan Syntax Highlighter agar Kode html terlihat rapih kalian perlu memanggil kode Syntax Highlighter.
  • Silahkan kalian ganti terlebih dahulu mode penulisan artikel ke HTML Bukan Compose yah.
  • Kalian cukup menambahkan awalan <pre><code> tepat Di depan Kode htmlnya, Dan gunakan juga Kode </code></pre> pada akhiran Kode html. Contoh;
<pre><code> html kalian disini </code></pre>

Alngkah baiknya template sobat sudah terdapat Kode jQuery library seperti ini;


 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/> 

Dan kode script seperti Css, JavaScript, jQuery tidak bisa langsung digunakan kalian perlu parshe terlebih dahulu setelah bisa kalian gunakan. Gunakan Tools Parshe Html.

Sumber: 

https://github.com/isagalaev/highlight.js

Berlangganan update artikel terbaru via email:

Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Cara Memasang Syntax Highlighter di Postingan Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel