Pernahkah Kalian melihat pada postingan blog baik itu BlogSpot maupun WordPress terdapat postingan kode-kode yang cantik? Itu namanya syntax highlighter. Pada kesempatan kali ini admin akan berbagi tutorial bagaimana membuat syntax highlighter tanpa plugin pada WordPress.
Syntax Highlighter adalah fitur khusus untuk menampilkan baris kode-kode secara warna-warni menyesuaikan dengan bahasa program yang kita tulis supaya terlihat bagus dan mudah di baca. Biasanya fitur ini ada pada website tutorial pemrograman ntah itu menggunakan WordPress maupun BlogSpot. Contohnya seperti gambar berikut.
Tujuan penggunaan syntax highlighter yaitu untuk membedakan elemen kode pemrograman dengan warna tertentu sehingga pengunjung mudah membacanya. Adanya syntax highlighter pada postingan WordPress akan membuat pengunjung terasa familiar dengan kode-kode tersebut karena sudah lumrah ada pada code editor seperti visual code, sublime text dan lainnya.
Bagi pengguna WordPress banyak sekali plugin yang bisa kalian gunakan untuk membuat fitur ini, seperti; prism, enlighter, crayon syntax highlighter, code snippets cpt, pasta code, syntax highlighter evolved dan masih banyak lagi. Namun pada kali ini admin akan memberikan tutorial bagaimana membuat syntax highlighter tanpa menggunakan plugin.
Membuat Syntax Highlighter Pada WordPress Tanpa Plugin
- Download filenya DISINI
- Extract file yang sudah di download, terdapat 2 file (prism.js & prism.css)
- Upload kedua file tersebut pada folder theme WordPress kalian (contoh.com/wp-content/themes/Newspaper) melalui File Manager pada cPanel.
- Selanjutnya masuk ke Dasbor WordPress → Tampilan → Editor Berkas Tema cari dan Edit functions.php lalu tambahkan baris kode berikut, letakkan setelah “<?php”
function add_prism()
{
wp_enqueue_style( 'prism-css', get_stylesheet_directory_uri() . '/prism.css' );
wp_enqueue_script( 'prism-js', get_stylesheet_directory_uri() . '/prism.js', [], false, true );
}
add_action( 'wp_enqueue_scripts', 'add_prism' );
- Penerapan pada postingan WordPress caranya ubah editor ke html, gunakan tag <pre><code class=”language-bahasaProgrammu”>KODEMU DI SINI</code></pre>
- Pada “bahasaProgrammu” ganti sesuai dengan bahasa pemrograman yang kalian inginkan misal; js, css, php dan lainnya.
- Atau dengan cara sorot kodenya lalu ke menu Blok geser ke bawah, pada Kelas CSS tambahan masukkan “language-css”
- Selesai! Hasilnya seperti berikut
Mudah bukan caranya? Selamat mencoba dan semoga bermanfaat.
Jika memiliki pertanyaan atau masalah, silakan tinggalkan komentar atau hubungi admin pada halaman kontak, Admin akan menjelaskan lebih detail. Terimakasih dan Sampai Jumpa.
