Posting script di blog? pasang syntax highlighter

Apa itu Syntax highlighter ?

Syntax highlighter adalah fitur editor teks yang digunakan untuk menyorot dan membedakan warna berdasarkan fungsi dari berbagai jenis bahasa pemrograman, skrip, atau markup, seperti HTML, CSS, JavaScript dan sebagainya.

dengan Syntax highlighter maka kode markup akan mudah dipahami dan dicerna sang pembaca.
suka Posting script di blog? pasang syntax highlighter segera.

Penggunaan syntax highlighter di blogger tentu sangat penting apalagi jika Anda membahas mengenai berbagai macam bahasa pemrograman di blog Anda.
kelebihan lainnya adalah artikel anda lebih rapi dan lebih enak dipandang mata.

seperti apa penampakan markup yang tanpa menggunakan dan yang menggunakan Syntax highlighter ?

seperti ini contohnya :

tanpa Syntax highlighter

<b:includable id='backlinkDeleteIcon' var='backlink'>
  <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
      <script src='https://resources.blogblog.com/img/icon_delete13.gif'/>
    </a>
  </span>
 </b:includable>

kode diambil dari template blogger

menggunakan Syntax highlighter

 <b:includable id='backlinkDeleteIcon' var='backlink'>
  <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
      <script src='https://resources.blogblog.com/img/icon_delete13.gif'/>
    </a>
  </span>
 </b:includable>

kode diambil dari template blogger

menurut kamu mana yang lebih rapi ?
mana yang lebih mudah dipahami ?
sekarang tau kan perbedaannya.

sebelum melanjutkan ke cara pemasangan Syntax Highlighter untuk blogger
saya ingin memberitahukan buat teman teman yang belum tau cara menulis HTML di blogger.

pertama-tama misalnya kamu pengen nulis kode :

<div> </div>

maka kamu harus memparsenya terlebih dahulu seperti ini :

<div> </div>

kenapa harus diparse ?
karena postingan Blogger mendukung html dan akan menjalankan jenis html itu, bukan menampilkannya sebagai teks

tapi kalau diparse terlebih dahulu, postingan Blogger akan menerjemahkah dan menampilkannya sebagai teks.

apa gak capek, puyeng dan mumet memparse html begitu banyak?
kan ada alat parse... tinggal copi paste,
kamu bisa memparsenya DI SINI dan kalau kamu pengen membuat sendiri alat parse, disitu ada link caranya

sampai disini paham kan cara menulis HTML untuk ditampilkan di postingan Blogger.

terus bagaimana cara membuatnya Syntax Highlighter untuk blogger ?
simak caranya berikut ini

Cara Membuat Syntax Highlighter di Blog

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Tambahkan kode css ini di atas kode ]]></b:skin> atau </style>

 pre {
    background: #DCDFE6;
    margin: 12px;
    padding:8px 12px;
    overflow-x: auto;
}

atau sesuaikan dengan template blog kamu

4. Taruh script dibawah ini sebelum </head> atau sebelum &lt;/head&gt;&lt ;!--<head/>--&gt;.
atau bisa juga di kombinasikan dalam tag kondisional tertentu.

Script Syntax Highlighter

 <!-- Syntax Highlighter -->
<link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<!-- End Syntax Highlighter -->

yang saya tandai itu untuk css warna Syntax Highlighter
kamu bisa ganti link css dan pilih di
https://github.com/isagalaev/highlight.js/tree/master/src/styles
ada jutaan css warna disitu :D

5. Simpan Tema

pemasangan Syntax Highlighter di template Blogger sudah beres...
sekarang lanjut ke cara pemanggilan Syntax Highlighter di postingan

Cara Memanggil Syntax Highlighter di Blog

Untuk menerapkannya di blog cukup mudah.

Ketika Anda menulis postingan baru yang akan menampilkan kode script dan ingin kode tersebut memakai syntax highlighter, caranya yaitu dengan :

1. Buka postingan Anda
2. Kemudian masuk ke bagian HTML. bukan Compose
3. cara peletakan kode script :

 <pre>  
   <code>  
     Taruh kode HTML yang sudah di PARSE disini  
   </code>  
 </pre> 

contoh, saya ingin menulis kode seperti ini :

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>

dan saya ingin menggunakan syntax highlighter,
maka saya harus memparsenya dahulu dan meletakkannya didalam <pre> dan <code> :

<pre>
  <code> 
    &lt;script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/&gt;
  </code>
</pre>

maka setelah diterbitkan hasilnya akan seperti ini :

 <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>

seperti itulah cara memasang syntax highlighter, semoga bisa dipahami dan bisa bermanfaat .

jika ada yang kurang jelas maupun bla bla bla... silahkan coret-coret di kolom komentar.

mungkin juga kamu tertarik untuk membaca ini :

Terima kasih, salam Colongan !

Bantu kami lebih baik lagi.
Apa Reaksi anda tentang blogger :
"Posting script di blog? pasang syntax highlighter " ?