Cara Membuat dan Pasang Syntax Highlighter di Postingan Blog - Mediaachmad

Apa itu Syntax Highlighter?

Syntax Highlighter adalah sebuah text editor yang menyoroti penulisan markup kode di halaman website untuk mempermudah pangunjung mengenali keseluruhan semua kodenya. Pada umumnya di termukan dalam blog niche tutorial seperti website ini. Bukan hanya itu Syntax Highlighter dapat merapikan kode dan membuat pengunjung dengan mudah bisa memberdakan mana yang kode HTML, CSS atau javascript.

Cara Buat dan Pasang Syntax Highlighter di Postingan Blog. Pada umumnya Syntax Highlighter memiliki huruf warna - warni, untuk tutorial kali ini berbeda kita akan membuat 1 warna saja karena ini hanya dibuat di CSS saja. Karena jika menggunakan huruf warna - warni bisa memperberat blog, dan juga penambahan javascript juga. Jadi langsung simak tutorial berikut ini.

Cara Membuat Syntax Highlighter di Blog dengan CSS

Jika teman - teman sudah memiliki .post-body pre dan .post-body pre code, silakan kalian hapus dahulu karena bisa berakibat bentrok. Kemudian tambahkan kode dibawah ini diATAS ]]></b:skin> atau </style>.

.post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #de0985 /* 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
}

Kemudian Simpan

Cara Memasang Syntax Highlighter di Postingan Blog.

Untuk memanggil atau menggunakan Syntax Highlighter di Postingan Blog kalian hanya perlu memanggil dengan code <pre> dan <code>. Simak dibawah.

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

Perlu kalian ingat

Jika ingin memanggil tag HTML, CSS, Javascript di Syntax Highlighter, Kodenya harus di parse dahulu disini agar tidak memperburuk tampilan template.

Untuk demonya kalian bisa cek di postingan ini.

Mungkin itu tutorial Membuat Syntax Highlighter di Blogger dengan CSS, semoga dapat bermanfaat sekian dan terima kasih.