Cara menggunakan syntax highlighter CSS di blogger

syntax highlighter merupakan text editor yg menyoroti penulisan markup kode pada halaman situs web untuk mempermudah para pengunjung mengenali seluruh struktur kodenya. Pada umumnya ditemukan pada situs blog yang bertemakan tips dan tutorial seperti penawisnu.blogspot.com . Selain daripada itu anda juga dapat merapikan huruf dan membuat para pengunjung bisa dengan mudah membedakan antara dimana kode html,javascript dan kode CSS dengan tulisan seperti biasa.

Biasanya syntax highlighter bisa mengubah huruf menjadi warna warni seperti pelangi namun pada kesempatan kali ini akan saya berikan contoh dengan satu warna aja karena dibuat menggunakan kode CSS. Kalau situs blog anda bertemakan/niche tips dan tutorial lalu sering membagikan source kode seperti situs blog ini,jadi tidak ada salahnya jika anda membuat syntax highlighter di Blog dengan menggunakan CSS seperti penjelasan dibawah ini

Cara memasang syntax highlighter di blogger

Masuk blogger lalu pilih tema kemudian edit template dengan klik edit html dan apabila sebelumnya sudah menggunakan kode CSS

.post-body pre 

dan 

.post-body pre code 

maka anda hapus terlebih dulu supaya tidak bentrok. Kemudian tambahkan deretan kode berikut "SEBELUM / DI ATAS"  </style> pada template yang anda gunakan

 .post-body pre 
{ background-color: #292E34; 
/* warna background */
 border-left: 5px solid #008c5f; 
/* 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 }

Untuk menggunakan syntax highlighter CSS tersebut di blog dalam isi postingan cukup dengan dipanggil menggunakan  kode tag <pre> dan <code>.

Catatan! Jika anda ingin menulis tag HTML atau javascript maka anda harus memparsenya di BlogCrowds supaya tidak merusak tampilan template.

Wisnu SN

See how i see you

Bagikan Artikel ini