Trik dan Cara Lengkap Merubah Options Syntax Highlighter

Default Options Syntax Highlighter atau settingan bawaan penyorot sintak ini bagi sebagian orang mungkin “kurang menyenangkan” misalnya adanya toolbar credit link “?” (tanda tanya), auto link yang menjadikan alamat sebuah URL menjadi link aktif, ataupun strip bars yang menyebabkan adanya baris baru pada setiap linebreak. Nah, dengan Trik Lengkap Merubah Default Options Syntax Highlighter ini kita dapat menyesuaikan opsi settingan bawaannya sesuai kebutuhan kita. Caranya sederhana, kita dapat melakukan override dan membuat konfigurasi lengkap terhadap semua opsi yang ada melalui javascript.

Javascript yang digunakan di sini sebenarnya adalah javascript bawaan asli syntaxhighlighter 3.0.83 dengan penambahan fungsi untuk load style yang akan dipakai. Bagi sobat yang sudah membaca artikel saya sebelumnya Cara Pasang dan Menggabung SyntaxHighlighter dan Highlight.js tentu tidak akan asing dengan kode yang akan saya berikan di bawah. Bedanya pilihan settingan atau konfigurasi di sini lebih banyak yang dapat digunakan untuk override default options, sehingga Anda akan dapat menyesuaikan opsi Syntax Highlighter langsung melalui script ini. Ubah kode lama, dan gantikan dengan script berikut:

<script type="text/javascript">
	(function(){
		var corecss = document.createElement('link');
		var themecss = document.createElement('link');
		var corecssurl = "URL/shCore.css";
		if ( corecss.setAttribute ) {
				corecss.setAttribute( "rel", "stylesheet" );
				corecss.setAttribute( "type", "text/css" );
				corecss.setAttribute( "href", corecssurl );
		} else {
				corecss.rel = "stylesheet";
				corecss.href = corecssurl;
		}
		document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );
		var themecssurl = "URL/shCoreMidnight.css";
		if ( themecss.setAttribute ) {
				themecss.setAttribute( "rel", "stylesheet" );
				themecss.setAttribute( "type", "text/css" );
				themecss.setAttribute( "href", themecssurl );
		} else {
				themecss.rel = "stylesheet";
				themecss.href = themecssurl;
		}
		
		document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );
	})();
	SyntaxHighlighter.config.strings.expandSource = '+ expand source';
	SyntaxHighlighter.config.strings.help = '?';
	SyntaxHighlighter.config.strings.alert = 'SyntaxHighlighter\n\n';
	SyntaxHighlighter.config.strings.noBrush = 'Can\'t find brush for: ';
	SyntaxHighlighter.config.strings.brushNotHtmlScript = 'Brush wasn\'t configured for html-script option: ';
	SyntaxHighlighter.defaults['toolbar'] = false;
	SyntaxHighlighter.defaults['collapse'] = false;
	SyntaxHighlighter.defaults['tab-size'] = 5;
	SyntaxHighlighter.defaults['pad-line-numbers'] = true;
	SyntaxHighlighter.defaults['quick-code'] = true;
	SyntaxHighlighter.defaults['auto-links'] = false;
	SyntaxHighlighter.config.bloggerMode = true;
	SyntaxHighlighter.config.stripBrs = false;
	SyntaxHighlighter.all();
</script>

Perhatikan baris ke 5 dan baris ke 15, sesuaikan URL CSS-nya dengan URL di mana Anda menyimpan CSS yang dipakai. Atau jika Anda menggabungkannya dengan CSS pada tema maka gunakan URL CSS tema. Berikut detail dari script di atas:

1. Value atau nilai pada baris 27 (+ expand source) memungkinkan Anda untuk mengganti kata yang digunakan untuk membuka source (seperti kode spoiler). Anda dapat merubahnya dengan “tampilkan source“, “perlihatkan kode” dan lain-lain. Catatan, fungsi ini hanya akan berlaku jika Anda mengaktifkan fitur toolbar (lihat baris 32).
2. Nilai pada baris 28 (?) adalah tanda yang digunakan sebagai link toolbar (?) untuk membuka credit Sang Author. Sedangkan baris 29 sampai dengan 31 adalah isi pesan atau alert jika terjadi kesalahan, misalnya memanggil brush yang tidak ada pada paket script.
3. Opsi pada baris 32 (toolbar) memungkinkan Anda untuk menampilkan atau menyembunyikan toolbar, set true untuk mengaktifkan dan false untuk menonaktifkan.
4. Opsi pada baris 33 (collapse) berfungsi untuk menyembunyikan source, dan bisa ditampilkan dengan Nilai pada baris 27. Jika ini diaktifkan maka pastikan pula toolbar aktif, sebab jika tidak maka kode tidak akan muncul.
5. Opsi pada baris 34 (tab-size) yaitu besarnya jarak tab berdasarkan jumlah karakter yang ditentukan. Pada contoh di atas besarnya jarak satu tab adalah 5 karakter.
6. Opsi pada baris 35 (pad-line-numbers) ialah jumlah digit berdasarkan baris tertinggi pada blok kode. Misalnya jumlah baris tertinggi adalah 10 (dua digit), maka penomoran baris akan dimulai dari 01, 02 dst. Jika jumlah baris tertinggi adalah 100 (3 digit) maka penomoran baris akan dimulai dari 001, 002, dst. Jika fitur ini dimatikan (false) maka penomoran akan dimulai dari 1, 2, 3, dst.
7. Opsi pada baris 36 (quick-code) memungkinkan untuk menyalin kode (copy) hanya dengan double clicks pada bagian mana saja dari source. Dengan cara ini Anda tidak perlu memblock seluruh kode untuk menyalin source, melainkan cukup dengan doubleclicks saja. Silahkan dicoba pada script di atas.
8. Opsi pada baris 37 (auto-link) membolehkan setiap kode yang berupa URL menjadi link secara otomatis.
9. Jika Anda menggunakan platform blogger maka pastikan Anda set opsi valuenya sebagai true pada baris 38. Dan jika Anda menggunakan syntax highlighter ini pada wordpress maka Anda set ke false atau buang bagian ini.
10. Opsi stripBrs hanya digunakan untuk meng-ignore linebreak “<br/>” pada setiap baris.

Selain fungsi umum script di atas, ada beberapa kode lagi yang dapat digunakan untuk mengkustomasi opsi, ini dia:

// Enable atau disable penomoran baris
SyntaxHighlighter.defaults['gutter'] = true;
// Enable atau disable smart tabs (besaran tab secara otomatis)
SyntaxHighlighter.defaults['smart-tabs'] = true;
// Memugkinkan merubah kode default block kode dengan atau selain pre
SyntaxHighlighter.config.tagName = 'pre';

Kode pada baris terakhir ini memungkinkan Anda untuk menyesuaikan kode pada block kode jika tidak ingin menggunakan “pre”. Misalnya Anda dapat menggunakan blockquote, code, atau bahkan kata apapun. Dan ingat, untuk menutup tag kode dengan kode kata yang sama pula.
Disamping itu Anda juga dapat menentukan opsi penyorot sintak ini langsung pada blok kode dengan menambahkan paramater tertentu, misalnya seperti ini:

<pre class="brush:html;first-line:3;highlight:[3,5,9];gutter:true;title:isititel;">
...kode di sini...
</pre>

Berikut rincian paramater dan definisinya:

• brush:html, artinya kode yang akan disoroti adalah HTML.
• first-line:3, berarti penomoran baris kode dimulai dari angka 3.
• highlight:[3,5,9], baris yang diberi sorotan khusus sesuai nomor yang ditentukan.
• gutter:true, memungkinkan penomoran baris. Gantikan nilai dengan false jika blok kode ingin tanpa nomor.
• title:isititel, adalah isi titel yang ingin ditambahkan (1 kata saja)

Perhatikan hasil dibawah ini berdasarkan paramater di atas

<html>
<head><title>Redirect Notice</title>
<meta HTTP-EQUIV="REFRESH" CONTENT="5; URL=https://www.finderonly.net">
</head>
<body>
<center>
<h2>Anda akan dialihkan dalam 5 detik, mohon tunggu...</h2>
</center>
</body>
</html>

Demikianlah Trik dan Cara Lengkap Merubah Default Options Syntax Highlighter saya bagikan berdasarkan pengalaman saya sendiri. Sebelumnya saya menggunakan Highlight.js sebagai penyorot sintak karena cara pemakaiannya yang lebih simple namun universal. Sayangnya tidak tersedia penomoran baris dan penyorotan baris secara khusus pada highlight.js, sehigga sayapun akhirnya menggunakan Syntax Highlighter ini. Selain kedua jenis penyorot sintak ini masih ada pilihan sintax highlighter lainnya, silahkan disimak pada 11 Pilihan Syntax Highlighter – Dekorasi Style Sintak Otomatis. Semoga dapat membantu dan bermanfaat!