Menambahkan Syntax Highlighter Pada Template Viomagz v4.7.0

Redesign Viomagz v4.7.0 dengan menambahkan fitur CSS Syntax Highlighter. Sebenarnya fitur ini sudah tersedia pada template viomagz versi 4.7.0 yang terbaru (update 10 Oktober 2021), namun fitur bawaan viomagz tersebut kurang memuaskan menurut Admin, dilihat dari segi tampilan.

{tocify} $title={Table of Contents}

A. Apakah Syntax Highlighter Itu

Syntax highlighter atau dalam bahasa Indonesia disebut penyorotan sintaks adalah fitur editor teks yang digunakan untuk bahasa pemrograman, skrip, atau markup, seperti HTML dimana fitur ini menampilkan teks, terutama kode sumber, dibuat dan disusun kedalam berbagai warna dan font serta disesuaikan dengan kategori istilah yang ingin dipresentasikan.

Fitur ini memfasilitasi penulisan dalam bahasa terstruktur seperti bahasa pemrograman atau bahasa markup karena struktur dan kesalahan sintaks berbeda secara visual. Fitur ini juga digunakan dalam banyak konteks terkait pemrograman (seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya) baik dalam bentuk buku berwarna atau situs web online untuk memudahkan pemahaman setiap bagian kode bagi pembaca.

B. Manfaat Syntax Highlighter

Syntax highlighter atau penyorotan sintaks ini menawarkan beberapa manfaat sebagai berikut:

Salah satu strategi untuk meningkatkan fungsi pembacaan dan penekanan teks, terutama untuk kode yang mencakup beberapa hal yang sangat penting sehingga lebih mudah membaca kode dan mengenali strukturnya.
Implementasi kode lebih mudah, karena penyorotan dilakukan secara real time dan kesalahan pengetikan dapat dideteksi lebih cepat. Kata kunci yang salah juga dapat diidentifikasi lebih cepat karena tidak berwarna dan ini sangat membantu pemrogram untuk menemukan setiap kesalahan yang ada dalam program yang dibuatnya.

C. Menambahkan Syntax Highlighter

1. Membuat kode Syntax Highlighter

Untuk menambahkan kode syntax highligter ini kalian boleh memilih untuk menghapus atau tidak kode bawaan template Viomagz v.4.7.0. Kalau Admin sendiri, tidak menghapusnya karena selama admin menggunakan, tidak ada bentrokan yang terjadi antar kode syntax tersebut.

Langkah-langkah yang kalian perlu lakukan untuk menambahkan kode syntax highligter sebagai berikut:

1. Kalian menuju Dashboard Blogger 👉 Tema 👉 Edit HTML,

2. Tambahkan kode syntax highlighter yang ada dibawah dan letakkan diatas kode </style>,

.post-body pre {background-color: #f2f2f2; border-left: 5px solid #008c5f;
padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none;
}
.post-body pre code {color: #333333;font-size: 13px;
max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

Keterangan : (bila kalian ingin mengubah sesuai keinginan).

#f2f2f2 = Kode warna background (latar belakang)
#008c5f = Kode warna variasi border (garis pinggir) dibagian sebelah kiri
#333333 = Kode warna font (huruf) yang digunakan
13px = Kode ukuran besar font (huruf) yang digunakan

250px =Kode ukuran high (tinggi) kolom/box syntax highlighter.

2. Menambahkan Script Bila Fitur Dark Mode Aktif

Bila kalian menggunakan Fitur Dark Mode👀 yang pernah diberikan pada artikel sebelumnya, kalian perlu tambahkan kode script dibawah dan letakkan diatas kode ]]></b:skin>. Masukkan/tambahkan kedalam kode Dark Mode sebelumnnya.

.Night .post-body pre {background:#2f2f37;}
.Night .post-body pre code {color:#BFBF90;}

Kode tersebut diatas untuk mengubah background (latar belakang) dan warna font (huruf) yang akan menyesuaikan pada saat fitur Dark Mode digunakan.

3. Menambahkan Fitur Double Click

Fitur double click ini berfungsi untuk menseleksi/memilih semua text dengan otomatis dan lebih cepat dengan melakukan klik kiri dua kali, sehingga kalian tidak perlu menseleksi text secara manual. Masukkan kode script berikut dan letakkan diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
var pres = document.querySelectorAll('pre,code');
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
//]]>
</script>

4. Cara Menggunakan Syntax Highlighter

Untuk menggunakan syntax highlighter diatas, kalian masuk kedalam editor postingan lalu pilih Tampilan HTML lalu tambahkan kode script berikut ini :

<pre><code>Masukkan Teks atau Kode Disini</pre></code>

Ganti teks "Masukkan Teks atau Kode Disini" dengan teks ataupun kode yang kalian ingin tampilkan ke dalam Syntax Highlighter. Jika kode tersebut akan kalian tulis dalam mode HTML, kalian harus melakukan parse/konversi terlebih dahulu menggunakan HTLM Converter seperti yang ada pada menu "Web Tools" Blog ini.

Kalian juga bisa melakukannya tanpa parse HTML, namun kalian harus kembali dulu ke Tampilan Menulis (Compose) lalu langsung saja mengganti teks "Masukkan Teks atau Kode Disini" dengan kode yang kalian inginkan. Namun harus berhati-hati, agar tidak menghapus/mengubah letak kode pre-code nya.

D. Kelebihan Script Syntax Highlighter Diatas

Beberapa kelebihan yang ada pada kode script Syntax Highlighter diatas sebagai berikut:

Dapat mengganti warna background dan font sesuai dengan selera masing-masing.
Dapat digunakan pada Mode Light (terang) ataupun Mode Dark (gelap)
Mempunyai scroll bar vertikal dan horizontal yang membantu melihat kode script yang panjang, tetapi tidak membuat tinggi dan lebar kolom berubah.

Kode CSS Syntax Highlighter diatas selain pada template VioMagz v.4.7.0, juga dapat digunakan pada template blogger lainnya. Namun kalian harus memperhatikan Syntax Highlighter bawaan template, hapus bila terjadi kontra dengan kode script diatas. Wassalam.