Membuat Syntax Highlighter di Blogger dengan CSS

Syntax Highlighter Blog
Syntax Highlighter Blog

Membuat Syntax Highlighter di Blogger dengan CSS -  Artikel kali tentang cara membuat syntax higlighter di blogger atau blogspot, tapi sebelum memasang Syntax Highlighter pada Blogger sobat atau Website sobat.

Syntax highlighter adalah text editor yang menyoroti penulisan markup kode pada halaman web yang gunanya untuk mempermudah pengunjung blog atau web kalian mengenali keseluruhan kodenya. Umumnya ditemukan pada blog bertema tutorial seperti ruangcoder.com. karena pada blog yang saya kelola ini sering membas tentang tutorial seperti pemrograman, yang dimana kalian sendiri bisa melihatnya dari beberapa postingan yang telah saya buat pada sebelumnya.

Umumnya untuk syntax highlighter dapat membuat huruf menjadi warna-warni seperti tex editor, seperti sublime, visual studio code, dll. Tapi dalam tutorial kali ini dibuat satu warna saja karena hanya dibuat menggunakan CSS. Jika blog kalian bertema tutoral dan sering membagikan source code, maka tidak ada ruginya, membuat syntax highlighter di Blog dengan CSS seperti yang ruangcoder gunakan.

Membuat Syntax Highlighter di Blogger dengan CSS

  1. Pertama silahkan kalian pergi ke Dashboard Blogger kalian.
  2. Lalu kalian ke menu Tema dan klik Edit HTML.
  3. Kemudian kalian cari kode .post-body pre untuk mempermudah mencari gunakan CTRL + F
  4. Hapus kode .post-body pre ( Jika ada ). jika tidak ada cukup tambahkan saja
  5. Letakkan diatas atau sebelum tag </style>


  6. .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
    }
  7. Kemudian Simpan Template
  8. Nah untuk penerapannya kalian hanya perlu mengguanakan Syntax <pre>
    dan <code>, seperti contohnya , postingan yang ini , pada kode diatas , ini penerapannya seperti digambar dibawah ini :


    Sampai disini kalian telah berhasil Membuat Syntax Highlighter di Blogger dengan CSS

Penutup

Nah jadi itulah penerapan kode syntax highlighter, dalam artikel "Membuat Syntax Highlighter di Blogger dengan CSS" semoga membantu ya, nah jika tutorial ini bermanfaat silahkan sobat share postingan ini sebanyak banyak nya , dan jangan lupa mampir lagi ke ke blog ruangcoder ini, dan apabila sobat mengalami kendala silahkan sobat komentar, nanti admin bantu, ataupun kalian, kontak email saya, dan sertakan screenshot permasalahannya, sampai ketemu lagi