Ada 3 jalan untuk meng-konfigurasi SyntaxHighlighter, yaitu :1. SyntaxHighlighter.config
SyntaxHighlighter.config memiliki nilai konfigurasi yang berlaku umum untuk semua elemen halaman dan tidak digunakan untuk elemen tunggal. Konfigurasi ini berlaku global yang berpengaruh pada semua elemen halaman. Dibawah ini nilai konfigurasi config :
| Nama | Nilai | Keterangan |
|---|---|---|
| bloggerMode | true | Integrasi dengan Blogger. Jika kita pengguna blogger.com, maka ini harus diaktifkan dengan nilai "true". Nilai "false" tidak diaktifkan. |
| clipboardSwf | null | Fungsi fasilitas clipboard. Jika hal ini perlu untuk diaktifkan maka tentukan lokasi URL penempatan file "clipboard.swf" melalui nilai konfigurasi clipboardSwf. Jika nilai ini tidak ditentukan maka icon clipboard tidak akan tampil. |
| stripBrs | false | Jika secara otomatis blogger.com menambahkan tag <br/> di setiap akhir baris kode, option ini harus diaktifkan untuk menghapusnya secara otomatis. |
| toolbarItemWidth | 16 | Lebar dari icon didalam toolbar. Jika kita ingin mengubah ukuran toolbar maka harus merubah lebar icon melalui nilai dari konfigurasi toolbarItemWidth. |
| toolbarItemHeight | 16 | Tinggi dari icon didalam toolbar. |
Dibawah ini contoh jika kita gunakan secara keseluruhan dari SyntaxHighlighter.config:
<script type="text/javascript">2. SyntaxHighlighter.default
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'URL/clipboard.swf';
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.config.toolbarItemWidth = 16;
SyntaxHighlighter.config.toolbarItemHeight = 16;
SyntaxHighlighter.all();
</script>
SyntaxHighlighter.default memiliki nilai konfigurasi yang berlaku terbatas hanya untuk elemen halaman tertentu saja. Dibawah ini nilai konfigurasi default :
| Nama | Nilai | Keterangan |
|---|---|---|
| auto-links | true | Untuk mengarahkan pendeteksian terhadap kaitan (link) dengan penanda (highlight) elemen on atau off. Jika option ini di matikan (off), URL tidak akan bisa di-klik. Klik disini untuk demo. |
| class-name | '' | Untuk menambahkan sebuah penyesuaian class (atau beberapa class) pada setiap penanda (highlight) elemen yang akan dibuat pada halaman. Klik disini untuk demo. |
| collapse | false | Untuk memaksa penanda (highlight) element pada halaman untuk disembunyikan dalam lipatan (collapse) sebagai default. Klik disini untuk demo. |
| first-line | 1 | Untuk mengubah awal penomoran baris. Klik disini untuk demo. |
| font-size | '100%' | Untuk mengubah ukuran huruf dengan mudah didalam penanda elemen halaman tanpa mempengaruhi sekitarnya dengan menambahkan CSS. Klik disini untuk demo. |
| gutter | true | Untuk mengatur gutter (penanda pinggir) dengan penomoran baris on dan off. Klik disini untuk demo. |
| highlight | null | Untuk menyoroti (highlight) satu atau lebih baris untuk memfokuskan perhatian pengguna. Ketika menetapkan sesuatu parameter, kita dapat melewati secara acak dengan mengatur nilai, seperti [1,4,6] atau hanya sebuah nomor untuk satu baris. Klik disini untuk demo. |
| html-script | false | Untuk menyoroti percampuran code HTML/XML dan script yang biasanya sering digunakan pengembang web. Setingan nilai ini sangat membutuhkan (requires) pemanggilan shBrushXml.js dan brush untuk mendukung fasilitas ini. Klik disini untuk demo. |
| light | false | Untuk menon-aktifkan toolbar dan gutter dengan properti tunggal. Klik disini untuk demo. |
| ruler | false | Untuk menampilkan kolom penggaris pada bagian atas. Klik disini untuk demo. |
| smart-tabs | true | Untuk mengatur fasilitas tabulasi pintar. Klik disini untuk demo. |
| tab-size | 4 | Untuk mengatur ukuran tabulasi. Klik disini untuk demo. |
| toolbar | true | Tombol toolbar on/off. Klik disini untuk demo. |
| wrap-lines | true | Untuk mengatur fasilitas perpindahan baris (wrapping). Klik disini untuk demo. |
<script type="text/javascript">3. Parameter
SyntaxHighlighter.config.bloggerMode = true;
...
SyntaxHighlighter.default.wrap-lines = false;
SyntaxHighlighter.default.collapse= true;
SyntaxHighlighter.default.auto-links= true;
SyntaxHighlighter.default.ruler= true;
</script>
Teknik parameter mengijinkan penyesuaian terhadap penanda elemen (highlight) tunggal sesuai keinginan kita. Kunci/nilai tertentu diatur hampir sama dengan format untuk CSS, tetapi hanya berpengaruh pada style atribut tertuju, hal ini bisa digunakan bersama-sama dengan deklarasi brush melalui atribut class. Teknik ini adalah teknik yang paling disukai sebagian pengguna SyntaxHighlighter termasuk Blogger TuneUp.
Contoh setting teknik parameter :<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]; wrap-lines: false; collapse: true">...</pre>
Lebih jauh mengenai cara konfigurasi SyntaxHighlighter praktis silahkan lihat dan pelajari melalaui demo disini. Mudah-mudahan artikel kali ini memberikan gambaran penggunaan SyntaxHighlighter yang lebih mendalam. Selamat mencoba dan Happy Blogging... ;-)
