Pilih Bahasa
Indonesia
English
日本語 (Japan)
简体中文 (China)
한국어 (Korean)
हिन्दी (Hindi)
Tiếng Việt (Vietnam)
العربية (Arabic)
no fucking license

Syntax Highlighter for Blogger

Syntax Highlighter 
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.

Post a Comment

Tinggalkan komentar sesuai topik tulisan,dan Berkomentarlah dengan sopan, centang Beri Tahu Saya untuk mendapatkan notifikasi via email ketika komentar kamu di balas.
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.
  • Menulis kode gunakan kode (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan kode panjang (kode harus di-parse)
  • Menyisipkan gambar gunakan URL GAMBAR (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.


image quote pre code