Cara Membuat Syntax Highlighter di TinyMCE

08 September 2020 by Zed

Cara Membuat Syntax Highlighter di TinyMCE - Pada kesempatan kali ini saya akan membagikan tutorial bagaimana cara membuat syntax highlighter di text editor tinymce.

Setelah pusing browsing kesana kemari akhirnya saya menemukan syntax highlighter untuk situs website yang saya bangun sendiri. Pada awalnya saya menggunakan Wordpress, tapi lama-lama saya males menggunakan Wordpress dan akhirnya saya build ulang website saya sendiri. Kalau di wordpress banyak plugins yang digunakan untuk syntax highlighter. Sangat mudah di wordpress, hanya klik install plugins pun bisa langsung digunakan.

Nah, karena saya pengen mencari tahu dan belajar lebih banyak akhirnya saya menemukan plugins/library yang bernama Prismjs. Plugins ini sama seperti plugins-plugins wordpress kebanyakan. Sama digunakan untuk menampilkan syntax/code script agar menjadi lebih menarik. Di website yang saya bangun, saya menggunakan text editor TinyMCE dan tambahan plugins Prismjs.

Untuk lebih detailnya, simak langkah-langkahnya dibawah ini.

Langkah-langkah

1. Pertama, silahkan gunakan plugin tinymce. Plugin bisa kamu bisa gunakan di situs resminya TinyMCE, tapi untuk yang sekarang kamu harus menghubungkan secara online/cloud.

2. Hubungkan plugin TinyMCE di website kamu. Seperti berikut :

URL tersebut didapat dari kamu mendaftar di situs resminya dan memverifikasi url situs website kamu.

3. Kemudian bukalah situs prismjs.com. Prismjs adalah plugins untuk menampilkan syntax/script yang dimasukkan ke dalam tinymce. Pilih bahasa pemrograman apa saja yang mau kamu tampilkan. Ini gratis lho...

prismjs

4. Jika sudah memilih, kemudian gunakan file js dan css dan hubungkan kedua file tersebut ke website kamu.

5. Jika semua komponen sudah terhubung, silahkan ketik script berikut:

6. Silahkan dicoba dan jika berhasil nanti hasilnya akan seperti ini : 

hasil

 

Sekian tutorial kali ini.. semoga bermanfaat

Komentar