Cara Membuat Syntax Highlighter Keren di Blogger Dengan CSS

 Ask - Ask.co.id 
Cara Membuat Syntax Highlighter Keren di Blogger Dengan CSS 
Syntax highlighter adalah sebuah fitur khusus yang digunakan untuk menampilkan teks warna warni(highlight) sesuai dengan bahasa program yang ditulis.
Cara Membuat Syntax Highlighter Keren di Blogger Dengan CSS


 Fitur ini biasanya ada di blog atau website tutorial pemrograman, dan biasanya fitur ini harus ditambahkan terlebih dahulu baik di wordpress maupun di blogger. 



Membuat Syntax Highlighter Keren di Blogger 
1. Pertama masuk ke dasboard blogger kalian, lalu klik menu template atau tema → klik tombol tanda panah ke bawah → klik edit HTML. 

2. Lalu cari tag. Lalu tambahkan script CSS di bawah ini sebelum tag . Gunakan CTRL+F untuk memudahkan pencarian kata yang dituju.

  .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
}
Sampai tahap ini, kalian sudah berhasil menambahkan syntax highlighter ke dalam blogger. Lalu bagaimana cara menggunakannya?. Cara menggunakanya cukup mudah. Silahkan ikuti panduannya di bawah ini. 





 Buatlah post baru, lalu alihkan editor ke tampilan HTML. Lalu tambahkan script di bawah ini

  <pre><code>
  -- kode script disini --
</code></pre>
Silahkan ganti ... kode script disini ... dengan kode html atau javascript atau css yang telah kalian siapkan sebelumnya. Kalian juga dapat mengganti title dan data-codetype dengan nama yang sesuai dengan bahasa program yang ditulis. 


 Sedikit tambahan, kode atau script yang kalian punya tidak bisa langsung dipaste begitu saja di bagian ini  kode script disini




Kalian perlu memparsing kode atau scriptnya. Untuk memparsing kode atau script, silahkan menggunakan tools ini blogcrowds.com atau disini sahretech.com Parsing kode ditujukan agar saat post dipreview atau dipublish kode tidak ikut di mark-up oleh browser. Jika di-markup maka kode yang ditulis akan menjadi tampilan dan bukan kode atau script lagi. 





Baca Juga

Komentar

Lebih baru Lebih lama