Syntax Highlighter
Syntax Highlighter untuk Blogger adalah alat atau widget yang memungkinkan Anda menampilkan kode pemrograman di blog dengan format yang rapi, terstruktur, dan berwarna sesuai dengan sintaksnya. Alat ini sangat berguna bagi blogger yang sering membagikan tutorial pemrograman atau potongan kode karena memudahkan pembaca untuk memahami kode yang ditampilkan.
Dengan menggunakan Syntax Highlighter, Anda dapat:
- Menonjolkan elemen kode seperti kata kunci, variabel, komentar, dan lainnya dengan warna yang berbeda.
- Mempermudah pembaca dalam membaca dan menyalin kode.
- Meningkatkan tampilan blog menjadi lebih profesional dan menarik.
Biasanya, Syntax Highlighter ini diimplementasikan menggunakan library seperti Prism.js, Highlight.js, atau plugin khusus lainnya yang kompatibel dengan Blogger.
Jadi pada kali ini saya kan berbagi kode Syntax Highlighter for Blogger Umumnya syntax highlighter dapat membuat huruf menjadi warna-warni. Tapi dalam tutorial kali ini dibuat satu warna saja karena hanya dibuat menggunakan CSS. Jika blog kamu bertema tutoral dan sering membagikan source code, maka tidak ada ruginya membuat syntax highlighter di Blogspot hanya dengan CSS seperti dibawah ini.Cara Memasang Syntax Highlighter di Blogger
Jika sebelumnya sudah ada kode CSS.post-body pre dan .post-body pre code maka hapus dulu agar tidak bentrok. Lalu tambahkan deretan kode berikut "SEBELUM / 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:300px; 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; 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 Menggunakan Syntax Highlighter di Blogger
Untuk menggunakannya syntax highlighter di blog dalam isi postingan tinggal dipanggil menggunakan<pre> dan <code> seperti contoh berikut.
<pre><code>
<!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
</pre></code>Jika ingin menulis tag HTML atau Javascript di dalam syntax highlighter maka wajib diparse lebih dulu di Blogcrowds agar tidak menghancurkan tampilan template.
Support Egi Agan
Post a Comment