Cara Mudah Memasang dan Membuat Syntax Highlighter Keren di Blogger

Cara Mudah Memasang dan Membuat Syntax Highlighter Keren di Blogger

Cara Mudah Memasang dan Membuat Syntax Highlighter Keren di Blogger
Cara Mudah Memasang dan Membuat Syntax Highlighter Keren di Blogger

Hallo sobat ruangcoder, artikel kali ini tentang Cara Mudah Memasang dan Membuat Syntax Highlighter Keren di Blogger Menggunakan CSS, tapi sebelum memasang Syntax Highlighter pada Blogger sobat atau Website sobat , apakah sobat sudah mengerti Apa itu Syntax Highlighter, Jadi sobat Syntax Highlight adalah suatu fitur pada teks editor yang guna nya  menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan penerapan yang sobat tentukan. Nah jadi sobat sudah mengetahui Apa itu Syntax Highlighter , mari kita terapkan Syntax Highlighter , pada blog sobat. mari kita ke tahap pemasangannya.

Memasang Syntax Highlighter di Blogger Menggunakan CSS :


Nah jadi sobat ke bagian Dashboard sobat , kemudian ke menu Tema dan Edit HTML , kemudian sobat CTRL + F , kemudian sobat cari kode .post-body pre apabila ada hapus kode tersebut agar tidak bentor , ini jika ada ya , tapi kalau saat sobat cari gak ada , silahkan sobat paste kode dibawah ini , Sebelum atau di atas </style>



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

Nah untuk penerapannya sobat hanya perlu mengguanakan Syntax <pre>
dan <code>, seperti contohnya , postingan yang ini , pada kode diatas , ini penerapannya seperti digambar dibawah ini :



Nah jadi itulah penerapan kode syntax highlighter , semoga membantu ya , nah jika tutorial ini bermanfaat silahkan sobat share postingan ini sebanyak banyak nya , dan jangan lupa mampir lagi ke ke blog ruangcoder ini , dan apabila sobat mengalami kendala silahkan sobat komentar , nanti admin bantu , ataupun sobat , kontak email admin , dan sertakan screenshot permasalahannya , sampai ketemu lagi

Anda mungkin menyukai postingan ini