Membuat Syntax Highlighter di Blogger dengan CSS

Cara Membuat Syntax Highlight Warna-warni Otomatis di Blog dengan CSS

Syntax highlighter adalah text editor yang menyoroti penulisan markup kode pada halaman web untuk mempermudah pengunjung mengenali keseluruhan kodenya. Umumnya ditemukan pada blog bertema tutorial seperti igniel.com. Selain itu dapat merapikan huruf dan membuat pengunjung dapat dengan mudah membedakan mana yang merupakan kode CSS, HTML, atau Javascript dengan tulisan biasa.

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

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.

Demonya bisa kamu cek di postingan ini sendiri. Ketika saya membagikan potongan kode tutorial, kodenya disimpan di dalam syntax highlighter, bukan? Kalau ingin demo yang lebih jelas bisa dicek di Codepen saya.



Memasang syntax highlighter di blog pure CSS memang tidak membuat huruf warna-warni seperti text editor aslinya semacam Sublime Text, Atom, Bracket, dll. Jika ingin colorful begitu harus menggunakan Javascript lagi. Tapi versi ini jauh lebih ringan karena tidak menggunakan script apa-apa. Makanya saya lebih suka versi ini daripada yang warna-warni.

Artikel Terkait

9 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Tengga Arlan
    30 Juni, 2022
    Profil: https://www.blogger.com/profile/13520479574036377458
    Mbak kalo cara bikin template blogger sendiri menggunakan html css javascript gimana nya?🙏🙏
  • Hanif Muchtar
    23 Februari, 2021
    Profil: https://www.blogger.com/profile/09176823476524978332
    Mbak, saya mau nanya... Gimana cara penaruhan code nya biar syntax highlighter nya nge-geser kesamping bukan scrool ke bawah(kalo code nya panjang)?
    • Igniel
      24 Mei, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Contoh di atas sudah geser samping. Kalau masih geser ke bawah tambah aja nilai height-nya.

      max-height:250px;
      Bagian ini perbesar angkanya.
  • PayuBaco
    04 November, 2020
    Profil: https://www.blogger.com/profile/02293372772988889351
    mbak saya sudah mencobanya tapi kenapa gak berhasil ya mbak?? mohon bantuannya
  • Supar
    28 Juni, 2020
    Profil: https://www.blogger.com/profile/18381571902106283477
    terimakasih mbak..
  • Saif Ghofur
    18 Mei, 2020
    Profil: https://www.blogger.com/profile/04924137136364466463
    di blogger yg terbaru sudah tersedia syntax highlighter ya mbk?
  • ZEMREUS
    20 Desember, 2019
    Profil: https://www.blogger.com/profile/09498346686861292087
    Kok yg muncul widget nya ya ada yang tau knp mbah sudah di pasre kok
  • Sutan Karim
    12 Januari, 2019
    Profil: https://www.blogger.com/profile/02549883444655871364
    mau tanya, saya pake highlighter dengan JS. ada cara gak biar si JS ini diunduh/dimuat ketika kode pre/code dipanggil/digunakan dalam posting saja. jadi ketika posting tdk ada pre/code si JS tidak akan diunduh/dieksekusi. jika pake conditional tag penulisannya seperti apa y?
    *thanks be4
  • Eroni Artikel
    18 November, 2018
    Profil: https://www.blogger.com/profile/16651355709980474930
    terima kasih mba, sharing artikelnya. Selain itu bagus juga UI dari blog nya. Keren