Pagi ini saya berkunjung ke Maskolis untuk menemukan postingan terbarunya. Dan ada hal yang menarik saya selain isi postingannya yang selalu membuat saya terkagum-kagum pada sosok Maskolis ini. Terdapat beberapa teks area yang menurut saya cukup keren dan penampilannya seakan-akan dengan Dreamweaver.
Usut punya usut ternyata teks area tersebut lebih dikenal dengan nama Syntax Highlighter yang dapat menampilkan source instruksi dalam baris dan warna serta dilengkapi dengan tombol untuk melihat plain code dan untuk print. Untuk contohnya mampu Anda lihat pada gambar di atas, atau mampu dilihat pada screenshot di bawah ini.
Syntax Highlighter Untuk JavaScript
Syntax Highlighter Untuk Kode CSS
Karena penasaran saya buka page source-nya Maskolis dan menemukan instruksi CSS yang sedikit abnormal dan berbeda pada source code-nya Maskolis yang diawali dengan .dp-highlighter. Selanjutnya saya sedikit pusing untuk instruksi yang lainnya....hehehe...
Karena saya selalu ingin mengetahui dan berguru hal-hal yang baru, kemudian saya coba untuk mencari artikelnya di Google dan ternyata sudah banyak juga bertebaran. Dan saya menemukan petunjuknya di Blogger Tutorial Blog. Namun saya tetap menggunakan source code dari Maskolis. Bagi yang ingin mencoba Membuat Syntax Highlighter Dengan Tombol Print Dan View Plain ini di blognya dan kebetulan nyasar ke sini..., yuk kita berguru bersama-sama... Untuk para master jikalau menjumpai kesalahan pada tutorial ini mohon koreksinya....
Silahkan Anda login ke blog Anda >> Template >> Edit HTML >> Centang kotak kecil pada Expand Widget Template. Namun alangkah baiknya sebelum mengedit template blog, sebaiknya lakukan backup dulu untuk berjaga-jaga terjadi kesalahan pengeditan.
Cari instruksi ]]></b:skin> dan letakkan instruksi di bawah ini SEBELUM/DI ATAS instruksi ]]></b:skin> (Gunakan CTRL + F untuk memudahkan pencarian).
Kemudian cari instruksi </head> dan letakkan instruksi di bawah ini SEBELUM/DI ATAS instruksi </head>
Cari instruksi </body> dan letakkan instruksi di bawah ini SEBELUM/DI ATAS instruksi </body>
Kemudian cari instruksi </head> dan letakkan instruksi di bawah ini SEBELUM/DI ATAS instruksi </head>
Cari instruksi </body> dan letakkan instruksi di bawah ini SEBELUM/DI ATAS instruksi </body>
<script type='text/javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script> Setelah final silahkan save template blog Anda.
Untuk instruksi JavaScript gunakan instruksi di bawah ini:
Untuk instruksi CSS gunakan instruksi di bawah ini:
Nah untuk memanggilnya pada postingan Anda, silahkan tambahkan instruksi di bawah ini pada postingan Anda (lakukan pada postingan HTML).
Untuk instruksi JavaScript gunakan instruksi di bawah ini:
<pre class="JScript" name="code">
Kode script atau goresan pena Anda di sini
</pre> Untuk instruksi CSS gunakan instruksi di bawah ini:
<pre class="Css" name="code">
Kode script atau goresan pena Anda di sini
</pre> Demikian saja goresan pena saya perihal Membuat Syntax Highlighter Dengan Tombol Print Dan View Plain ini supaya dapat dimengerti dan bermanfaat.
Update:
Ternyata ada juga tutorialnya dari Maskolis, silahkan kunjungi DI SINI.
Sebelumnya pada halaman ini saya sudah mencoba menggunakan Syntax Highlighter dan berhasil, namun size blog saya jadi infeksi hehehe... jadi saya hapus lagi...Namun bagi yang penasaran ingin mencoba menggunakannya, silahkan gunakan kode-kode di atas... Screenshot di atas diambil dari halaman ini sebelum saya hapus kode-kodenya pada template blog ini.
Update:
Ternyata ada juga tutorialnya dari Maskolis, silahkan kunjungi DI SINI.
Sebelumnya pada halaman ini saya sudah mencoba menggunakan Syntax Highlighter dan berhasil, namun size blog saya jadi infeksi hehehe... jadi saya hapus lagi...Namun bagi yang penasaran ingin mencoba menggunakannya, silahkan gunakan kode-kode di atas... Screenshot di atas diambil dari halaman ini sebelum saya hapus kode-kodenya pada template blog ini.
Komentar
Posting Komentar