Bagi pengguna CMS WordPress yang menggunakan plugin Enlighter secara default plugin ini tidak memiliki fitur scroll otomatis alias ketika menempelkan kode yang sangat panjang baik panjang kebawah maupun kesamping akan wrapping dan tidak menampilkan scrollbar. Hal ini sedikit mengganggu ketika menempelkan kode yang panjang maka akan panjang juga layar Syntax Highlighter nya.

Kali ini saya tunjukan bagaimana membuat plugin EnlighterJS otomatis menampilkan scrollbar baik horizontal maupun vertical ketika kode yang dimasukkan lebih dari batas yang ditentukan. Untuk melakukan ini, pastikan kalian menerapkan CSS berikut ini di file CSS Kustom dari tema yang sedang digunakan.

Catatan: Jika menerapkan di CSS tema nya secara langsung maka akan hilang ketika tema tersebut diperbarui kecuali menempelkan di Custom CSS atau di CSS tema anak. Lihat bagaimana cara membuat tema anak WordPress (jika diperlukan / jika tidak memiliki Custom CSS).

ads by posciety

Horizontal Scroll

Jika tidak ingin wrap setiap baris syntax yang panjang maka perlu membuat scrollbar horizontal supaya pengguna dapat melihat semua kode pada baris tersebut dengan menggeser scrollbar ke kanan – kiri. Caranya cukup tempelkan kode berikut di Custom CSS tema WordPress yang sedang kalian gunakan:

.EnlighterJS{
   width: auto !important;
   overflow-x: scroll !important;
   word-wrap: normal !important;
}
.EnlighterJS li{
  white-space: pre !important;
}

Dengan kode tersebut, syntax yang ditampilkan akan memanjang ke kanan ketika baris memiliki panjang lebih dari pada batas layar highlighter. Pastikan tema Enlighter yang digunakan cocok supaya ketika di scroll ke kanan tidak berbeda warna tema. Pembuatan scroll horizontal ini sudah dibahas oleh Andi Dittrich (author) di GitHub.

Vertical Scroll

Ketika memiliki syntax yang panjang kebawah rasanya kurang menarik jika menampilkan semua syntax sehingga ketika pengunjung menggunakan perangkat kecil misalnya smartphone akan melihat syntax yang panjang dan scroll kebawah yang kejauhan, cara membuat vertikal scroll / scroll kebawah cukup tambahkan kode berikut di Custom CSS tema WordPress yang sedang digunakan:

.EnlighterJS{
   max-height: 500px;
}

Silahkan ganti 500px dengan tinggi (pixel) yang diinginkan, maka ketika syntax yang ditampilkan lebih tinggi dari 500px akan menghilang dari layar dan menampilkan scrollbar vertikal supaya bisa scroll kebawah dan melihat semua syntax tersebut.

Lihat video tutorial Scroll (Horizontal & Vertical) EnlighterJS – WordPress Plugin.

Pengguna plugin ini selalu dapat mengatur style nya dengan menambahkan gaya CSS menggunakan class EnlighterJS, saat ini hampir tema WordPress menyediakan bidang Custom CSS untuk mengatur gaya CSS kustom jadi tidak perlu membuat tema anak terlebih dahulu kecuali tema yang digunakan tidak memiliki Custom CSS.

Selamat mencoba !