Cara Membuat Syntax Higlighter Pure CSS di Blogger

Syntax Highlighter adalah penulisan markup kode pada halaman web untuk mempermudah pembaca dalam mengenali dan menyalin kode yang diberikan.

Singkatnya.

Syntax Highlighter ini akan memunculkan kode css, html, atau javascript di halaman web. 

Biasanya sering digunakan blog-blog tutorial yang membahas widget dan pemrograman.

Selain mempercantik tampilan kode di postingan, Syntax Highlighter juga akan membuat nyaman pembaca karena kode yang ditampilkan tidak bercampur dengan teks postingan.

Membuat Syntax Highlighter di Blogger Pure CSS

Kenapa pure CSS?

Umumnya Syntax Highlighter dibuat dengan Javascript karena bisa memunculkan berbagai macam warna di kodenya. 

Namun pemakaian Javascript ini justru akan memperberat loading blog.

Lain halnya dengan CSS.

Pembuatan Syntax Highlighter dengan CSS tidak akan memperberat loading blog, meskipun tampilannya lebih simpel dan sederhana.

Nah, berikut tutorial membuat Syntax Highlighter di blogger dengan CSS.

1. Login ke blogger > pilih blog > pilih menu tema > klik edit html

2. Tambahkan kode dibawah ini diatas </style>

.post-body pre{background-color:#292E34;border-left:5px solid #4588f3;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;font-size:12px;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}

3. Simpan template

Untuk penggunaan Syntax Highlighter di postingan tinggal masukan kode pemanggil berikut di tab html.

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

Jangan lupa selalu gunakan mode html saat memasukan Syntax Highlighter di postingan blog.