Cara Membuat Syntax Highlighter dengan Code Prettify



Pada kesempatan kali ini, Saya akan membagikan tutorial cara membuat kode yang kita tulis di postingan atau laman pada blogger kita menjadi lebih berwarna.

Nah, berikut langkah-langkahnya;

  1. Untuk menghindari hal-hal yang tidak diinginkan, backup dulu template sobat.
  2. Setelah itu, pada menu navigasi bagian kiri dasbor blogger, klik Tema, lalu pilih Edit HTML,
  3. Copy dan paste kode CSS berikut ini sebelum ]]</b:skin>
    pre .prettyprint { margin: 1em 0; padding: .5em!important; display: block; background-color: #333; color: white;}
    pre .nocode { background-color: none; color: #fff }
    pre .str { color: #ffa0a0 }
    pre .kwd { color: #f0e68c; font-weight: bold }
    pre .com { color: #87ceeb }
    pre .typ { color: #98fb98 }
    pre .lit { color: #cd5c5c }
    pre .pun { color: #fff }
    pre .pln { color: #fff }
    pre .tag { color: #f0e68c; font-weight: bold }
    pre .atn { color: #bdb76b; font-weight: bold }
    pre .atv { color: #ffa0a0 }
    pre .dec { color: #98fb98 }
  4. Letakkan kode berikut ini sebelum tag </body>;
    <script async='async' src='//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
  5. Selesai, dan jangan lupa untuk klik tombol Simpan;
  6. Untuk penggunaanya;
    • Siapkan kode yang akan ditampilkan pada post blogger;
    • Parse kode tersebut menggunakan Tool Ini;
    • Pastikan untuk mencentang pilihan terakhir untuk Tambahkan <pre; ...
    • Klik konversi.
    • lalu copy kode hasil konversi tersebut pada laman atau post yang sobat inginkan.
  7. Sekian, semoga bermanfaat;