✓ Cara Membuat Syntax Highlighter di Blogger Valid AMP / Non AMP

Selamat datang di Repick.net, pada artikel kali ini saya akan membagikan hal yang sangat menarik, yaitu cara mudah membuat syntax highlighter di blogger tentunya hanya dengan menggunakan CSS, Mengapa saya membuat tutorial ini dengan hanya menggunkan CSS tanpa menambahkan Script? 

Ya, saya rasa dengan hanya menggunakan CSS sudah pasti loading blog tidak akan terhambat oleh beratnya suatu script, karena kita tahu sendiri yang paling banyak mempengaruhi kecepatan blog adalah script.

Sebelumnya saya akan menjelaskan terlebih dahulu, Syntax Highlighter adalah pembungkus kode di dalam artikel blog agar terlihat rapi tanpa menggangu penglihatan pengunjung blog. Biasanya syntax highlighter ini berupa sebuah kotak yang didalamnya berisi kode kode.

Untuk menggunakan / memanggil syntax highlighter anda harus menggunakan kode berikut 

<pre><code> KODE YANG AKAN DIMASUKKAN </code></pre>

Biasanya saya menggunakannya dengan cara mempaste kode diatas pada Tampilan HTML, kemudian beralih lagi ke Tampilan Menulis dan memasukkan kodenya.

Cukup ribet memang, tapi tenang saja disini saya akan membagikan solusinya, saya sudah membuat kan tool Parse Koding Post, bisa anda coba untuk mempercepat pembuatan kode di dalam artikel anda. 

Pada dasarnya syntax highlighter ini memembuat tampilan sebuah kode menjadi berwarna warni seperti punya Arlina Code, namun disini saya hanya membuatkan satu warna saja, agar terlihat minimalis.

Bagi anda yang memiliki blog/website bertemakan tutorial seperti saya ini, maka tidak ada ruginya membuat syntax highlighter menggunakan CSS ini.

Cara Memasang Syntax Highlighter Keren di Blogger

Jika di template yang anda gunakan sudah memakai .post-body pre dan .post-body pre code, silahkan hapus terlebih dahulu agar tidak berbenturan dan terjadi error dengan kode yang akan dipasang nanti, kemudian tambahkan kode di bawah ini tepat diatas kode </style> atau ]]></b:skin>

.post-body pre {

  background-color: #292E34; /* warna background */

  border-left: 5px solid #026061; /* variasi border kiri */

  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none

}

.post-body pre code {

  color: #BFBF90; /* warna huruf */

  font-size: 12px; /* ukuran huruf */ 

  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text

}

Kemudian klik simpan tema, Oh iya cara ini juga bisa digunakan di template blog valid AMP loh, karena kode ini tidak menggunakan Javascript sama sekali.

Cara Menggunakan Syntax Highlighter di Blogger

Untuk menggunakan syntax highlighter di blogger ini kita cuman perlu memanggilnya dengan menggunakan kode <pre> dan <code> contoh seperti dibawah ini.

<pre><code>

  <!-- KODE YANG AKAN DIMASUKKAN -->

</pre></code>

Seperti yang saya jelaskan di atas tadi, atau kalo tidak mau ribet bisa menggunkan Tool Parse Koding Post.

Dengan membuat Syntax Highlighter Mengunakan CSS ini tentu akan sangat recomend di seluruh template, tidak terkecuali yang valid AMP. Jadi tunggu apa lagi, silahkan pasang syntax highlighter di blog kalian.

www.repick.net