Cara Membuat Syntax Highlighter di Blog

Syntax Highlighter adalah salah satu script yang dapat merubah warna sebuah tulisan atau kode menjadi warna warni seperti pelangi. Biasanya yang menggunakan syntax highlighter adalah blog atau wordpress yang membahas tentang tutorial, dan juga blog yang membahas tentang script-script atau kode-kode tertentu. Seperti script berjenis HTML, PHP, JS (Java Script), JQuery dan lainnya.

Manfaat syntax highlighter adalah dapat mempercantik blog, dan juga dapat mempermudah pembaca untuk membedakan jenis-jenis dari kode yang dibacanya. Dengan memasang syntax highlighter diharapkan dapat membuat pengunjung nyaman ketika membacanya.

Jadi manfaat syntax highlighter adalah:

1. Mempercantik tampilan blog.
2. Membuat pengunjung menjadi nyaman ketika sedang membaca.
3. Dapat mempermudah pengujung agar dapat membedakan jenis kode yang dibacanya.

*Baca juga: Meta tag keywords ala mas sugeng

Membuat Syntax Highlighter Warna-warni di Blog

Membuat Syntax Highlighter di Blog

Saya sarankan bagi blogger yang menggunakan syntax highlighter ini adalah blog yang membahas tentang tutorial atau blog yang membagikan script-script tertenu. Sangat tidak disarankan penggunakan script warna-warni ini untuk blog yang membahas lebih dari satu niche (blog gado-gado) atau blog yang membahas berita, politik, kecantikan, kesehatan ataupun sejenisnya. Berikut ini adalah cara membuat dan memasang syntax highlighter di blog

*Baca juga: Cara Membuat Meta Tag SEO Friendly di Blog

1. Login kedalam akun blogger. Buka dashboard dan kemudian pilih menu tema > klik edit HTML.

2. Cari kode </style> atau kode ]]></b:skin>. Jika sudah ketemu, letakkan kode dibawah ini tepat sebelum kode yang dicari tadi.

/* CSS Syntax Highlighting */
.hljs{display:block;overflow-x:auto;padding:0.5em;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:#222}
.hljs-addition{background-color:#a2fca2;color:#222}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}

3. Jika cara kedua telah selesai, selanjutnya adalah masukkan kode JS dibawah ini sebelum kode </body>.

<script type="text/javascript">
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Cara menggunakan syntax highlighter warna-warni di blog

Untuk cara menggunakannya cukup mudah, anda hanya perlu menambahkan kode <pre><code>Masukkan kodenya disini</pre></code>.

Masukkan kode yang ingin ditampilkan ditengah-tengah tulisan yang berwarna biru itu. Untuk penulisan sangat dianjurkan untuk menulis kode dalam mode HTML yang terdapat di pembuatan artikel.