Membuat Syntax highlighter di blog dengan mudah

Syntax highlighter merupakan text editor yang membungkus markup kode pada halaman web agar mempermudah pengunjung untuk mengenali keseluruhan kode tersebut. Selain mempermudah para pengunjung membedakan antara kode zawyaitu membuat  tampilan blog anda menjadi lebih tertata rapih. 

Syntax highlighter biasanya di gunakan oleh blog maupun website yang bertemakan tutorial seperti blog receh saya ini.

Cara menggunakan Syntax highlighter pada isi postingan dengan mudah 

Cara membuat Syntax highlighter 

Di beberapa template mungkin sudah terdapat kode CSS .post-body pre ataupun .post-body pre code . Anda hapus kode yang mirip seperti kode di atas agar tidak berbenturan dengan kode CSS yang akan kita masukan.

Tambahkan beberapa kode berikut sebelum </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 penggunaan Syntax highlighter pada isi postingan sangat mudah. 

Anda hanya cukup  memanggil kode tersebut menggunakan <pre><code>  ••• Masukan isi kode CSS, html, ataupun Javascript •••  </code></pre> pada mode Html.

Contoh Syntax highlighter :

tes
tes
tes
tes

Sekian tutorial membuat syntax highlighter pada template. Sekian terima kasih.