Cara memasang syntax highlighter seperti sublime text di blog

membuat syntax highlighter warna-warni di blog - Syntax Highlighter merupakan salah satu fitur yang di kreasikan dengan javascript dan css. berfungsi untuk menampilkan script-script di halaman postingan agar lebih menarik untuk di lihat.
syntax highlighter seperti sublime text, yang bisa di rubah warna scriptnya
Mungkin anda sudah tau aplikasi yang bernama sublime text 3 yang banyak digunakan oleh developers yang ingin membuat sebuah aplikasi program. tampilan dasar sublime adalah warna hitam dan dengan tulisan berwarna-warni agar si pembuat tidak bosan melihat codenya sendiri.

Nah, syntax highlighter yang kita buat dan pasang di blog, sama tampilannya dengan sublime dan sangat menarik untuk diterapkan untuk blog anda.

Baca Juga : 9 Plugin Wajib Install Di Sublime Text 3

Memasang Syntax Highlighter Di Blog

1. Salin dan paste kan script ini sebelum </head>.
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/atom-one-dark.min.css' rel='stylesheet'/>
Banyak pilihan warna text editor yang bisa anda pilih, silahkan cari kesukaan anda di highlightjs untuk melihat demo/tampilan.
Cari style nya di CDNJS, caranya, ganti aja link ajaxnya dengan style yang anda temukan di CDNJS tadi.
https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js
2. Tambahkan code JS di bawah ini, letakkan di atas </body>.
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js'/>
3. Selanjutnya, tambahkan script JS, letakkan di bawah langkah kedua.
<script type='text/javascript'>
  //<![CDATA[
    $(document).ready(function() {
      $('pre').each(function(i, block) {
        hljs.highlightBlock(block);
      });
    });
  //]]>
</script>
4. Untuk memasang syntax highlighter dengan cara tambahkan tag berikut di postingan anda.
<pre>(kode dari bahasa pemograman atau lainnya)</pre>

Baca Juga : Cara Menambahkan Link Sumber, Saat Artikel Di Copas Orang Lain

Demikianlah, cara memasang syntax highlighter keren di blogger. semoga bermanfaat untuk anda semua.

Belum ada Komentar untuk "Cara memasang syntax highlighter seperti sublime text di blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel