Cara Membuat Syntax Highlighter di Blogger

Fernn.id - Pada kesempatan kali ini admin ingin berbagi lagi dan masih seputaran blogging, yaitu Cara Membuat Syntax Highlighter di Blogger yang sudah banyak sekali diminta oleh para member forum kami.

Keluhan yang sama sebelumnya juga pernah saya alami dan menjadi kendala, karena kurangnya pengetahuan di dunia coding. Tentunya masalah ini juga akan terjadi jika kalian menggunakan custom themes namun belum bisa menampilkan atau mendukung syntax highlighter.

Awalnya admin pernah mencoba tutorial ini di template linkmagz namun gagal, dan hal ini pun sama ketika saya menggunakan template Median UI namun di versi yang sebelumnya juga gagal. dan akhirnya saya memutuskan untuk mencari beberapa artikel yang membahas ini dan mendapatkan beberapa referensi yang salah satunya di blog mas Taufik Nurrohman yaitu DTE.

Perlu diketahui bahwa tutorial ini dibutuhkan javascript untuk menjalankannya, jadi silahkan di pertimbangkan dahulu sebelum memasangnya dikarenakan tentu akan mempengaruhi kecepatan blog kalian, dan apabila tetap ingin memasangnya bisa ikuti tutorial di artikel ini

Apa itu Syntax Highlighter?

Syntax Highlighter merupakan sebuah fitur di beberapa teks editor yang berguna untuk menyoroti source code dalam berbagai warna untuk mengkategorikan sebuah kode yang terdapat didalamnya.

Fungsinya ini sendiri untuk memudahkan penggunanya dalam menulis bahasa pemrograman atau markup, dan Syntax Highlighter menggunakan bahasa regular untuk melakukan parse terhadap teks.

Berikut ini mungkin bisa jadi bahan pertimbangan kalian untuk memasangnya ataupun tidak, karena semua tetap tergantung pada kalian selaku pemilik blog.

Kelebihan

  • Memudahkan penggunanya (pemilik blog) dalam menulis bahasa pemrograman / markup.
  • Terlihat professional apabila dipasang sesuai pada niche tutorial.
  • Memudahkan pembaca dalam mempresentasikan isi dari artikel terutama source code.

Kekurangan

  • Masih menggunakan javascript yang tentu akan membebani loading blog kalian.
  • Sangat tidak cocok jika dipasang pada blog bukan niche tutorial yang menyajikan source code.

Cara Membuat Syntax Highlighter

Sebelum lanjut alangkah baiknya kalian backup terlebih dahulu template yang saat ini digunakan untuk berjaga-jaga jika terjadi kesalahan pada saat penerapan.
  1. Silahkan masuk ke situs Blogger.com
  2. Pada dashboard, pilih menu Tema > Edit HTML
  3. Lalu masukkan CSS berikut ini ke dalam template, tepatnya diatas kode </head>
    <style>
    /* Syntax Highlighter Monokai Sublime */
    post-body pre code, .post-body code{font-family:Consolas,Monaco,&#39;Andale Mono&#39;,monospace;font-size:100%;font-weight:normal;}
    .post-body pre{padding:7px;border-radius:4px;background-color:#23241f;word-spacing:normal;word-break:normal;line-height:1.4em!important;}
      pre,pre code{white-space: pre-wrap;}
    .hljs {
      display: block;
      overflow-x: auto;
      padding:0 0.5em 0.5em;
    margin:0;
      background: #23241f;
    max-height:360px;
    }
    
    .hljs,
    .hljs-tag,
    .hljs-subst {
      color: #f8f8f2;
    }
    
    .hljs-strong,
    .hljs-emphasis {
      color: #a8a8a2;
    }
    
    .hljs-bullet,
    .hljs-quote,
    .hljs-number,
    .hljs-regexp,
    .hljs-literal,
    .hljs-link {
      color: #ae81ff;
    }
    
    .hljs-code,
    .hljs-title,
    .hljs-section,
    .hljs-selector-class {
      color: #a6e22e;
    }
    
    .hljs-strong {
      font-weight: bold;
    }
    
    .hljs-emphasis {
      font-style: italic;
    }
    
    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-name,
    .hljs-attr {
      color: #f92672;
    }
    
    .hljs-symbol,
    .hljs-attribute {
      color: #66d9ef;
    }
    
    .hljs-params,
    .hljs-class .hljs-title {
      color: #f8f8f2;
    }
    
    .hljs-string,
    .hljs-type,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-selector-id,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-addition,
    .hljs-variable,
    .hljs-template-variable {
      color: #e6db74;
    }
    
    .hljs-comment,
    .hljs-deletion,
    .hljs-meta {
      color: #75715e;
    }
    .hljs::-webkit-scrollbar{width:8px;height:25px;}
    .hljs::-webkit-scrollbar-thumb
    {border-radius:2px; background:rgba(255,255,255,.2)}
    </style>
  4. Kemudian klik Simpan Tema untuk menerapkan semua perubahan yang sudah dilakukan.

Cara Umum Menggunakan Syntax Highlighter di Postingan Blog

Pastikan kalian sudah didalam teks area HTML bukan Compose karena jika salah pada posisi peletakkan kode pemanggil, maka tidak akan berjalan.
<pre><code>

/* Letakkan kode HTML, CSS, JavaScript, atau PHP disini */

</code></pre>
Untuk meletakkan kode HTML / JS / CSS / PHP silahkan parse kodenya terlebih dahulu ke HTML Converter atau Parse HTML.

Cara Penulisan Lebih Lanjut

Cara ini sebenarnya sama seperti diatas, namun hanya saja lebih spesifik untuk membedakan antara kode CSS, HTML, JS, atau PHP dan cara penulisannya seperti ini.
<pre><code class="Javascript">

/* Letakkan kode kalian disini */

</code></pre>
Silahkan ubah kode yang admin block dengan tipe kode, contohnya HTML, CSS, PHP, atau Javascript

Kesimpulan

Syntax Highlighter ini tentu akan memberatkan loading blog kalian jika tertumpang tindih dengan javascript lain, tetapi sisi positifnya apabila anda seorang blogger yang mengelola blog niche tutorial terutama berbagi source code, tentu hal ini akan jauh lebih baik jika dipasang.

Tutorial ini hanya bentuk umum untuk pemasangannya, apabila ingin lebih rinci mengenai cara memasangnya di MedianUI yang sebelumnya sudah terpasang box script, silahkan bertanya melalui kolom komentar dibawah artikel ini atau melalui forum.

Mungkin sekian dulu artikel dari Cara Membuat Syntax Highlighter di Blogger, semoga selalu bermanfaat.
Terimakasih