Cara Membuat Syntax Highlighter Berwarna di Blogger

Cara Membuat Syntax Highlighter Berwarna di Blogger – Mungkin sudah menjadi hal yang wajib bagi seorang blogger untuk terus melakkan hal-hal yang dapat membuat blognya disukai oleh pengunjung. Dan salah satu cara yang dapat dilakukan ialah dengan membuat postingan atau artikel yang dibaca pengunjung menjadi semenarik mungkin untuk dibaca.

Banyak hal yang dapat membuat sebuah postingan menjadi menarik diantaranya adalah pertama penulisan judul, kemudian isi dan yang paling terakhir adalah dari tampilan halaman artikel yang dibuat senyaman untuk dibaca seperti pemilihan font tulisan, warna dan juga penambahan element lainnya yang dapat mempercantik tampilan halaman postingan sehingga pengunjung bisa betah untuk berlama-lama di blog yang kita punya.

Dan salah satu cara untuk mempercatik tampilan blog kita adalah penggunaan Sysntax Highlighter terutama pada artikel atau postingan yang membahas kode-kode program.

Apa Itu Syntax Highlighter ?

Syntax highlighter merupakan fitur teks editor yang digunakan untuk menyortir berbagai jenis bahasa pemrograman, skrip, atau markup, seperti HTML, CSS, JavaScript dan sebagainya.

Umumnya syntax highlighter dapat ditemukan pada blog yang berniche tutorial yang sering menyisipkan kode di dalam postingan.

Kelebihan Memasang Syantax Highlighter

• Memudahkan pengguna dalam menyortir kode yang ditulis
• Postingan terlihat lebih rapih dan profesional
• Memudahkan pengunjung melihat dan menyalin kode yang telah di bagikan

Kekurangan

kekurangan syntax highlighter ini hanya 1 yaitu loading blog akan terbebani karena menggunakan javascript internal dan external, jadi buat kalian yang ingin memasangkan sebaiknya di pertimbangkan matang-matang terlebih dahulu.

Baca Juga :

• Cara Membuat Halaman Partner Site
• Cara Mengecek Broken Link Blog

Cara Memasang Syntax Highlighter

• Login ke Blogger
• Pilih menu Tema
• Pilih Edit HTML
• Salin code berikut ini dan tempelkan tepat berada diatas ]]></b:skin>

  /* CSS Highlighter */
  .hljs{display:block;overflow-x:auto;padding:0.9em 1.3em;background:#222;color:white}
  .hljs-name,.hljs-strong{font-weight:bold}
  .hljs-code,.hljs-emphasis{font-style:italic}
  .hljs-tag{color:#62c8f3}
  .hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
  .hljs-string,.hljs-bullet{color:#a2fca2}
  .hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
  .hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
  .hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
  .hljs-comment,.hljs-deletion,.hljs-code{color:#888}
  .hljs-regexp,.hljs-link{color:#c6b4f0}
  .hljs-meta{color:#fc9b9b}
  .hljs-deletion{background-color:#fc9b9b;color:#333}
  .hljs-addition{background-color:#a2fca2;color:#333}
  .hljs a{color:inherit}
  .hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
  #related-post .news-text{display:none}
  .BLOG_mobile_video_class{display:none!important;}

• Salin code berikut ini dan tempelkan tepat berada diatas </head>

  <!--[ Syntax Highlighter JS ]-->
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js'/>
  <script>hljs.initHighlightingOnLoad();</script>

Cara Penggunaan

• Parse terlebih dahulu kode atau skrip yang akan digunakan
• Bungkus kode atau skrip yang telah diparse dengan tag syntax highlighter berikut ini:

<pre><code>Skrip di sini...</code></pre>

Penutup

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 skrip yang kita bagikan.

Demikianlah tutorial kali ini, semoga dapat bermanfaat bagi teman-teman sekalian, akhir kata saya ucapkan Terima Kasih