Membuat Syntax Highlighter Dengan Tombol Print Dan View Plain
Pagi ini saya berkunjung ke Maskolis untuk menemukan postingan terbarunya. Dan ada hal yang menarik saya selain isi postingannya yang selalu menciptakan saya terkagum-kagum pada sosok Maskolis ini. Terdapat beberapa teks area yang berdasarkan saya cukup keren dan penampilannya seolah-olah dengan Dreamweaver.
Usut punya usut ternyata teks area tersebut lebih dikenal dengan nama Syntax Highlighter yang sanggup menampilkan source arahan dalam baris dan warna serta dilengkapi dengan tombol untuk melihat plain code dan untuk print. Untuk misalnya sanggup Anda lihat pada gambar di atas, atau sanggup dilihat pada screenshot di bawah ini.
Syntax Highlighter Untuk JavaScript
Syntax Highlighter Untuk Kode CSS
Karena ingin tau saya buka page source-nya Maskolis dan menemukan arahan CSS yang sedikit asing dan berbeda pada source code-nya Maskolis yang diawali dengan .dp-highlighter. Selanjutnya saya sedikit pusing untuk arahan yang lainnya....hehehe...
Karena saya selalu ingin mengetahui dan mencar ilmu 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 memakai 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 mencar ilmu bersama-sama... Untuk para master jika 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 arahan ]]></b:skin> dan letakkan arahan di bawah ini SEBELUM/DI ATAS arahan ]]></b:skin> (Gunakan CTRL + F untuk memudahkan pencarian).
Kemudian cari arahan </head> dan letakkan arahan di bawah ini SEBELUM/DI ATAS arahan </head>
Cari arahan </body> dan letakkan arahan di bawah ini SEBELUM/DI ATAS arahan </body>
Sumber https://www.kompiajaib.com/
Kemudian cari arahan </head> dan letakkan arahan di bawah ini SEBELUM/DI ATAS arahan </head>
Cari arahan </body> dan letakkan arahan di bawah ini SEBELUM/DI ATAS arahan </body>
<script type='text/javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script> Setelah tamat silahkan save template blog Anda.
Untuk arahan JavaScript gunakan arahan di bawah ini:
Untuk arahan CSS gunakan arahan di bawah ini:
Nah untuk memanggilnya pada postingan Anda, silahkan tambahkan arahan di bawah ini pada postingan Anda (lakukan pada postingan HTML).
Untuk arahan JavaScript gunakan arahan di bawah ini:
<pre class="JScript" name="code">
Kode script atau goresan pena Anda di sini
</pre> Untuk arahan CSS gunakan arahan di bawah ini:
<pre class="Css" name="code">
Kode script atau goresan pena Anda di sini
</pre> Demikian saja goresan pena saya wacana Membuat Syntax Highlighter Dengan Tombol Print Dan View Plain ini biar sanggup dimengerti dan bermanfaat.
Update:
Ternyata ada juga tutorialnya dari Maskolis, silahkan kunjungi DI SINI.
Sebelumnya pada halaman ini saya sudah mencoba memakai Syntax Highlighter dan berhasil, namun size blog saya jadi infeksi hehehe... jadi saya hapus lagi...Namun bagi yang ingin tau 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 memakai Syntax Highlighter dan berhasil, namun size blog saya jadi infeksi hehehe... jadi saya hapus lagi...Namun bagi yang ingin tau 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.
0 Response to "Membuat Syntax Highlighter Dengan Tombol Print Dan View Plain"
Posting Komentar