Cara Memasang Syntax Highlighter Pada Postingan Blog

Daftar Isi [Tutup]

    Selain dapat memperindah tampilan kode pada postingan blog, adanya syntax higlighter juga dapat mempermudah pembaca mengenali jenis kode yang ditulis oleh author atau admin blog.


    Dengan menggunakan syntax highlighter juga dapat membuat pembaca blog menjadi lebih nyaman dalam memahami isi konten artikel. 


    Tentu hal ini juga dapat membuat kesan penulis atau admin blog menjadi lebih profesional dalam melakukan penyajian artikel-artikel pada blog yang dimiliki.



    Cara Memasang Syntax Highlighter


    Syntax Highlighter adalah fitur khusus untuk proses pemindahan kode bahasa pemrograman tertentu dengan tulisan, warna text, dan posisi sama persis dengan yang terdapat pada suatu kode bahasa pemrograman untuk dipindahkan ataupun di copy ke dalam bentuk tulisan lain agar lebih mudah dipahami, dibaca, dan dipraktekan.


    Cara kerja dari Syntax Highlighter hampir serupa dengan blockquote, namun yang membedakan adalah fitur blockquote warna teks yang mana hanya satu warna saja, dan untuk merubah warnanya perlu menggunakan settingan manual.


    Jadi dapat disimpulkan bahwa Syntax Highlighter adalah tempat untuk menulis kode pada blog atau website secara efektif dibandingkan dengan fitur blockquote.


    Maka, disini Cara Logis akan berbagi tutorial yaitu cara memasang syntax highlighter pada postingan blog, penasaran bagaimana cara mengaplikasikannya, yuk ketahui caranya.



    Cara Memasang Syntax Highlighter pada Tema Blog


    Pertama, silahkan login ke Blogger > Pilih Blog > Klik Menu Tema > dan Pilih Edit HTML > Selanjutnya tambahkan kode CSS berikut pada bagian sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

    Perhatikan, Syntax Highlighter akan berfungsi secara baik apabila blog sudah menambahkan library jquery. Berikut adalah contoh kode library jquery:

     

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


    <style type='text/css'>
    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>


    Berikutnya, tambahkan kode javascript berikut pada bagian sebelum tag </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>


    Setelah itu klik tombol Save atau Simpan Tema.


    Cara Menuliskan Kode Dengan Syntax Highlighter pada Postingan Blog


    Lalu bagaimana cara menuliskan kode dengan fitur Syntax Highlighter pada postingan blog?

    Berikut tahapan cara menggunakan fitur Syntax Highlighter pada blog.


    Setelah function Syntax Highlighter terpasang, selanjutnya adalah cara penulisan dalam postingan. Silahkan buat postingan baru pada blog Anda, Kemudian untuk penulisannya pilih pada opsi HTML (bukan compose).


    Tambahkan kode HTML berikut.


    <pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>


    Dan silahkan ganti kode yang ditandai pada kode diatas dengan CSS/HTML/JAVASCRIPT yang akan ditampilkan pada postingan blog. Jika Anda ingin memasukkan kode HTML/JAVASCRIPT silahkan lakukan parse terlebih dahulu pada HTML CONVERTER.


    Berikut adalah contoh penulisan kode HTML menggunakan Syntax Highlighter, kode HTML yang ditandai merupakan kode yang akan Anda tambahkan.


    <pre><code><h1>
    <span>C</span>
    <span>A</span>
    <span>R</span>
    <span>A</span>
    <span>L</span>
    <span>O</span>
    <span>G</span>
    <span>I</span>
    <span>S</span>
    </h1></code></pre>

    Penulisan tersebut juga berlaku untuk kode CSS dan Javascript.


    Demikianlah untuk tips kali ini yaitu Cara Memasang Syntax Highlighter pada Postingan Blog. Semoga Bermanfaat.

    Tinggalkan Komentar