Skip to main content
JEJAK UNIK

follow us

Cara Terbaru Membuat Syntax Highlighter Hanya Dengan CSS

Cara Terbaru Membuat Syntax Highlighter Hanya Dengan CSS

Cara Terbaru Membuat Syntax Highlighter Hanya Dengan CSS - sebelum kita membuat syntax highlighter kita harus lebih dulu mengetahui fungsinya. Syntax highlighter secara singkat digunakan untuk menampilkan potongan code-code html, javascript dan coding-coding lain dalam suatu web/blog.

Dengan menggunakan bantuan syntax highlighter ini tentunya akan membuat potongan code css/javascript menjadi lebih rapih tampilannya, dalam arti tidak acak-acakan dalam halaman posting kita dan menjadi lebih enak dilihat.

Tentunya buat kamu yang mempunyai niche blog tentang tutorial blog, memasang syntax highlighter ini sudah menjadi kewajiban. Namun untuk memasang syntax highlighter ini biasanya memerlukan bantuan dari situs lain dengan memasang JS pada html blog dan tentunya ini bisa menggangu kecepatan loading pada blog kita.

Pada blogger sendiri sebenarnya kita bisa memasang syntx highlighter ini tanpa bantuan situs lain dengan menggunakan code penulisan <code/><pre> isi css </code></pre> tapi sayangnya bawaan blogger terlihat kurang menarik maka itu banyak admin berusaha memodifikasi agar terlihat lebih menarik dan menggunakan bantuan dari situs lain.

Baca juga: Alasan Widget Bawaan Dari Blogger Kurang Disukai

Nah untuk itu buat kalian yang ingin mencoba memasang syntax highlighter tanpa menggangu loading blog bisa coba trik ini, karena hanya menggunakan css saja. Cara pemasanganya cukup mudah kalian hanya perlu masuk ke dalam edit HTML template dan menambahkan kode css di bawah ini:

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

Save template ( sesuaikan warna serta background sesuai selera Anda. Selamat mencoba, semoga informasi bermanfat.

Cara menggunakan syntax highlighter dalam postingan blogger (harus di compose dulu baru tambahkan kode seperti dibawah

<pre><code>

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

</pre></code>

You Might Also Like:

Jika tertarik dengan artikel yang anda baca saat ini, berikan tanggapan melalui kolom komentar di bawah ini. Berkomentarlah yang cerdas, karena pintar saja tidak cukup.
Buka Komentar