Memasang Syntax HighLighter Di Blog

Cara Memasang Syntax HighLighter Di Blog

Pada kesempatan kali ini kami akan berbagi tips Cara Memasang Syntax Highlighter Di Blog
bagi kalian yang tidak tahu apa itu syntax highlighter biarkan saya menjelaskan nya sedikit semoga bisa menambah wawasan kalian.

Syntax Highlighter adalah Penyorotan sintaksis merupakan fitur penyunting teks yang digunakan dalam bahasa pemrograman, skrip, atau bahasa markah seperti HTML, CSS, dan JavaScript. Fitur tersebut akan menampilkan skrip berwarna dalam format teks dan disertai dengan font yang telah ditentukan.

tanpa harus membuang-buang waktu, silahkan ikuti step by step di bawah.

jika sebelum nya kalian sudah ada kode CSS .post-body pre dan .post-body pre code maka hapus terlebih dahulu agar tidak Bentrok. lalu tambahkan kode di bawah ini sebelum tag </style>

CSS

  
    .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:&amp;amp;amp;#039;source code pro&amp;amp;amp;#039;,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 nya kalian hanya panggil menggunakan kode <pre> dan <code>

seperti contoh berikut ini

HTML

      <pre><code>
  <!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
</pre></code>

Note: Parselah Terlebih Dahulu Agar Tidak Merusak Template Blog Kalian.

Berikut Adalah Tips Cara Memasang Syntax Highlighter Di Blog
Jika Ada Yang Ingin Ditanyakan, Kalian Dipersilahkan Berkomentar Di Kolom Komentar atau Di Email Pribadi Cybertips.

Berkomentar Lah Dengan Sopan, Bijak Dan BerEtika, Karena Setiap Komentar Menjadi Tanggung Jawab Komentator

Post a Comment (0)
Previous Post Next Post