Cara Mengubah/Ganti Tema Syntax Highlighter di Eclipse

Salah satu IDE compiler terkenal selain Netbeans untuk bahasa pemograman JAVA ialah Eclipse.

IDE Eclipse saya pilih dengan alasan RINGAN 😛 Netbeans gak kuat, biar aku aja(Efek film Dilan1990 🤣)

Nah, agar tampilan 'penulisan kode' terlihat menarik, mudah dipahami digunakanlah fitur Syntax Highligter.

seperti yang saya bahas di artikel sebelumnya, Syntax highligter merupakan fitur agar mewarnai kode bahasa pemograman.

Tiap IDE, punya cara tersendiri untuk mengubah tema atau Syntax higligter tersebut. Oleh karena itu, kali ini gue akan share bagaimana "Mengubah Tema/Syntax Higlighter di Eclipse".

Pembahasan mengenai "Apa itu Syntax Higlighter?" bisa kalian baca terlebih dahulu.

Tutorial Mengubah Tema Eclipse(IDE JAVA)

1. Download tema Syntax Highlighter yang kalian suka di Website Resminya.

2. Buka IDE Eclipse - pilih tab HELP - Eclipse Marketplace...

3. Kemudian install plugin 'Eclipse Color Theme', pastikan terkoneksi/terhubung dengan internet.

4. 'Accept' apabila ada lisensi, silahkan baca bila ingin 😁. klik tombol FINISH.

5. Klik tombol "Install anyway" dan,

apabila ada pesan untuk restart now. Silahkan klik Restart.

6. Lanjut, pilih Tab Windows - Preference - General - Appearance - Color Theme - pilih tema yang tersedia, atau 'Import a Theme' dan pilih tema yang baru kalian download tadi.

Itulah cara mudah untuk mengubah/ganti Theme di IDE Eclipse, tetap semangat ngodingnya ya :3 apalagi buat Java Developers😋

2 Cara Membuat Kode Warna-warni di Blog dengan Syntax Highlighter

Pernahkah kamu melihat postingan Blog/Website yang menyertakan kode-kode dalam warna yang berbeda-beda..?

Yaps,..! Biasanya dapat anda temukan pada situs yang membahas Tutorial Coding/Programming.

Terlihat lebih Elegan dan Menarik, itulah yang terlintas dipikiran saya. Ingin rasanya, membuat seperti kode-kode 😋 yang bewarna seperti itu.

Nah, Bila kamu ber-kecimpung dalam Dunia Programmer, pasti tak asing lagi dengan Syntax Highlighter.

#APA itu Syntax Highlighter ??

Syntax Highlighter adalah fitur dari Teks Editor yang digunakan untuk bahasa Pemograman, Script, atau Markup seperti HTML.

Fitur ini menampilkan teks, terutama Source Code dalam berbagai warna dan font sesuai dengan kategori sehingga memudahkan penulisan dalam bahasa terstruktur seperti Bahasa Pemograman.

Jadi, kegunaannya kurang lebih seperti Pulpen Stabilo ✏ untuk memberikan tanda di sebuah tulisan tertentu dengan warna.

BACA JUGA : Gokil! Buat Halaman ABOUT ala Chatting di Blog

Cara Membuat Kode Berwarna dengan Syntax Highlighter

Untuk membuat kode bewarna tersebut, ada 2 cara yaitu Membuat sendiri dengan CSS atau Memasang script pada template Blog/Website kalian.

NAMUN, Tutorial kali ini saya hanya akan membahas bagaimana Cara Memasang Syntax Highlighter di Blog menggunakan Highlight.js. Berikut langkah-langkahnya : 

1. Copy kode di bawah ini, dan Paste ke Template Blog kalian. Disarankan untuk meletakkan tepat diatas tag </body>.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

INFO : Versi terbaru saat ini dari highlightjs ialah 9.12.0.

2. Selesai deh 😄 sekarang tinggal uji coba. Buat Postingan baru di Blog kalian dan Copy Paste kode yang ingin diberi warna dalam Mode Compose.

3. Lalu ubah Mode ke HTML. Kemudian apit kode tersebut dengan tag <pre><code> .....kodenya....</pre></code>

INFO : Tag <pre> dan <code> wajib digunakan, karena fungsi <pre> untuk Menampilkan sesuai dengan yang kita ketik. Sedangkan <code> untuk Menampilkan kode Pemograman.

4. Sekarang coba Publikasikan/Pratinjau postingan kalian dan lihat hasilnya.

5. Bila ingin mengganti/mengubah warna kode, kalian bisa coba demonya DISINI. Sedangkan untuk mengubahnya, cukup ganti nama Style CSS dari Script CSS yang tadi.

Contoh pake Style CSS default :

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/>

Contoh pake Style CSS yang lain :

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css"/>

Itulah Tutorial bagaimana membuat kode berwarna di Blog dengan Highlight.js. Sampai jumpa di Tutorial berikutnya 😙