Cara Membuat Syntax Highlighter Keren di Blogger

Halo semuanya kembali lagi di porkaone. Syntax highlighter adalah sebuah fitur khusus yang digunakan untuk menampilkan teks warna warni(highlight) sesuai dengan bahasa program yang ditulis. Fitur ini biasanya ada di blog atau website tutorial pemrograman, dan biasanya fitur ini harus ditambahkan terlebih dahulu baik di wordpress maupun di blogger.

Jika kalian pengguna wordpress, maka banyak sekali plugin yang bisa kalian gunakan untuk membuat fitur ini. Salah satunnya dalah crayon syntax highlighter. Sayangnya, pada kesempatan kali ini saya tidak akan membahas fitur tersebut di CMS wordpress.

Kita akan membuat fitur highlighter pada blogger. Dimana fitur tersebut tidak disediakan oleh blogger lewat widgetnya, sehigga kita perlu sedikit mengoprek tema dengan menambahkan beberapa script yang telah saya siapkan di bawah ini.

Membuat Syntax Highlighter Keren di Blogger

Baiklah, sebelum kalian mengoprek tema blogger, alangkah baiknya kalian mem-backup datanya terlebih dahulu. Backup ditujukan untuk mengantisipasi jika saat pengeditan terjadi error, atau kehilangan fungsi atau fitur yang tidak diinginkan.

Backup data di blogger sangat mudah sekali, kalian tinggal buka menu template atau tema → klik tombol tanda panah ke bawah → klik cadangkan atau backup.

1. Pertama masuk ke dasboard blogger kalian, lalu klik menu template atau tema → klik tombol tanda panah ke bawah → klik edit HTML.

2. Lalu cari tag </style>. Lalu tambahkan script CSS di bawah ini sebelum tag </style>. Gunakan CTRL+F untuk memudahkan pencarian kata yang dituju. 

3. Setelah menambahkan script CSS, beriktunya kita akan menambahkan javascript. Silahkan cari tag </head> lalu tambahkan script di bawah ini tepat di atas tag </head>.

Sampai tahap ke-3 selesai, kalian sudah berhasil menambahkan syntax highlighter ke dalam blogger. Lalu bagaimana cara menggunakannya?. Cara menggunakanya cukup mudah. Silahkan ikuti panduannya di bawah ini.

4. Buatlah post baru, lalu alihkan editor ke tampilan HTML. Lalu tambahkan script di bawah ini

Silahkan ganti ... kode script disini ... dengan kode html atau javascript atau css yang telah kalian siapkan sebelumnya. Kalian juga dapat mengganti title dan data-codetype dengan nama yang sesuai dengan bahasa program yang ditulis.

Sedikit tambahan, kode atau script yang kalian punya tidak bisa langsung dipaste begitu saja di bagian ini ... kode script disini .... Kalian perlu memparsing kode atau scriptnya. Untuk memparsing kode atau script, silahkan menggunakan tools ini https://www.sahretech.com/2019/01/alat-parsing-html.html.

Parsing kode ditujukan agar saat post dipreview atau dipublish kode tidak ikut di mark-up oleh browser. Jika di-markup maka kode yang ditulis akan menjadi tampilan dan bukan kode atau script lagi.

Jika semua step bisa diikuti dengan baik dan benar, maka tampilan akhirnya akan tampak seperti gambar di bawah ini.

Hasil akhir syntax highlighter

Sekian tips & trick menambahkan syntax highlighter pada blogger. Semoga bermanfaat. Jika ada yang ingin ditanyakan silahkan tulis pertanyaan kalian di kolom komentar dibawah postingan ini. Sampai jumpa di tips menarik lainnya.😀