Membuat Syntax Hilighter Pada Blog Dengan Css

Syntax Hightlighter adalah Penyorotan sintaksis yang digunakan untuk pemrograman, scripting, atau bahasa markup seperti HTML. Fitur ini menampilkan teks, terutama kode sumber, dalam berbagai warna dan font sesuai dengan kategori.


Fitur ini memfasilitasi penulisan dalam bahasa terstruktur seperti bahasa pemrograman atau bahasa markup baik sebagai struktur maupun kesalahan sintaksis secara visual berbeda. Fitur ini juga digunakan dalam banyak konteks terkait pemrograman (seperti manual pemrograman), baik dalam bentuk buku warna-warni atau situs web online untuk membuat potongan kode pemahaman lebih mudah bagi pembaca. Menyoroti tidak memengaruhi makna teks itu sendiri, ini dimaksudkan hanya untuk pembaca manusia.

Syntax Hilighter sangat berguna untuk kalian yang suka membuat tutorial design blog atau kode seperti yang saya lakukan, mempunyai syntax Hilighter diblog dengan design yang bagus akan membantu dan menarik perhatian dari pengunjung website kalian.

Membuat Syntax Hilighter

1.Login ke Blog kalian > Thema >Edit HTML

2.Lalu kalian tekan Crtrl+F dan kalian cari kode berikut ]]></b:skin> atau </style&gt;.
3.Dan kalian masukkan kode Css dibawah diatas kode tersebut.

.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
}

Cara Mengaktifkan Sytanx Hilighter

Untuk menerapkannya di blog kalian masukkan kode <pre><code>Isi dengan kode kalian </pre>/code>

Dan kalian wajib melakukan Html Parse pada kode kalian sebelum memasukkannya kedalam kotak syntax hilighter tadi

Share this post