Membuat Syntax Highlighter Blogger

Mempercantik postingan blogger khususnya buat blogger yang bertujuan membuat tutorial seputar code CSS, HTML, JAVASPCRIPT dengan menggunakan Syntax Highlighter adalah salah satu pilihan yang tepat. Berikut ini tahapan yang di lakukan ketika kita akan membuat postingan menggunakan CSS, HTML, JAVASCRIPT

.post-body pre {
  background-color: #292E34; /* backgroun color */
  border-left: 5px solid #008c5f; /* left color variation */
  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; /* color font */
  font-size: 12px; /* font size */ 
  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
}

Pada postingan blogger kita tinggal memanggil css yang sudah kita letakan sebelum </style> atau ]]></b:skin> tadi maka kita sudah memulai bisa membuat Syntax Highlighter blogger. Sekarang kita tinggal membuat pemangginya di postingan blogger HTML menggunakan pemanggil juga penutup <pre><code> dan </pre></code> dengan cara sebagi berikut :

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

Yang perlu di perhatikan ketika kita menulis kode HTML yang di bungkus <pre><code> dan </pre></code> and harus PARSE kode yang akan di letakan di dalam pembungkus <pre><code> dan </pre></code> agar tidak terjadi kesalahan, karena <pre><code> sebagai pemanggilnya juga menggunakan HTML. Demikian semoga bermanfaat.

Baca Juga

Related Posts