Cara Memasang Syntax Highlighter Keren dan Berwarna di Blog

Cara Memasang Syntax Highlighter Keren dan Berwarna di Blog

Ferisp.com - Halo semuanya, bagaimana kabarnya? Saya harap baik-baik saja ya kawan. Kali ini, saya akan kembali membahas tentang syntax highlighter. Sebelumnya, saya sebenarnya telah membuat artikel yang serupa dengan pembahasan kali ini, tapi artikel tersebut lebih dikhususkan bagi mereka yang ingin menggunakan syntax highlighter di template LinkMagz. Nah, artikel ini saya tulis dengan tujuan penggunaan yang universal, artinya bisa digunakan di semua jenis template.

Jika mengacu pada tampilan yang ada, syntax highlighter yang akan saya bagikan kali ini memiliki tampilan yang lebih menarik dipandang mata. Tampilan yang menarik tersebut seperti tulisan yang berwarna secara otomatis layaknya teks editor yang biasa digunakan.

Jika dilihat secara sekilas, berikut adalah tampilan dari syntax highlighter kali ini:

Cara Memasang Syntax Highlighter Keren dan Berwarna di Blog

Nah, bagaimana kawan? Keren tidak? Ingat, sebagai seorang penulis blog, kita semua wajib untuk memberikan tampilan halaman yang menarik kepada semua pembaca. Oke? Lanjut.

Cara Memasang Syntax Highlighter Keren dan Berwarna di Blog

  • Masuk ke BLOGGER
  • Pilih menu TEMA
  • Pilih ikon tanda panah
  • Pilih EDIT HTML
  • Tempel di atas </head>:
  • <!-- Syntax Highlighter by Ferisp -->
    <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>
  • Tempel di atas </body>:
  • <!-- Syntax Highlighter by Ferisp -->
    <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>
  • Pastikan template kawan-kawan sudah menggunakan script jQuery berikut ini:
  • <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'/>
  • Pilih SIMPAN
  • Selesai.

Catatan

  1. Jika di dalam template sudah ada script jQuery seperti di atas, Anda tidak perlu lagi untuk menambahkan agar tidak bentrok. Tapi jika belum, simpan script jQuery tersebut di atas kode </head>
  2. Silahkan atur gaya tampilan sesuai dengan keinginan Anda
  3. Untuk cara penggunaan di halaman penulisan sama seperti penulisan syntax highlighter pada umumya, yaitu:
    • Parse terlebih dahulu kode atau script yang akan digunakan
    • Bungkus kode atau script yang telah diparse dengan tag syntax highlighter berikut ini:
    • <pre><code>Script di sini...</code></pre>

Penutup

Bagaimana kawan? Sangat mudah bukan? Dengan tampilan syntax yang mirip dengan teks editor, tentu hal tersebut menambah kepercayaan diri dalam membagikan tulisan. Selain menambah kepercayaan diri, pembaca juga akan merasa lebih nyaman dalam membaca setiap kode atau script yang kita bagikan.

Oiya, selain menggunakan syntax highlighter, Anda juga bisa menggunakan kotak skrip atau script box keren untuk menampilkan kode atau script di setiap halaman. Dengan script box tersebut, tersedia banyak pilihan tampilan yang bisa Anda gunakan.

Mungkin sekian apa yang sempat saya bagikan kali ini, sampai jumpa di artikel selanjutnya.