Membuat Syntax Highlighter Dengan JS dan HTML
Syntax Highlighter
Syntax Highlighter adalah fitur teks editor yang sering digunakan untuk menampilkan source code (bahasa pemerograman), Syntax Highlighter biasanya memiliki huruf yang berwarna sesuai dengan tag atau class'nya,
Kali ini kita akan membuat Syntax Highlighter tanpa menggunakan CSS. Format ini digunakan untuk menuliskan baris kode HTML dalam postingan, biasa dipakai pada blog dengan tema koding atau tutorial blogging.
INFO : Ini Salah Satu Cara Yang Pernah Saya Gunakan Untuk Merubah Tampilan Warna Font di dalam Syntax Highlighter Agar Lebih Terlihat Estetik ^_^
Cara Membuat Syntax Highlighter
- Login pada akun Blogger kalian masing-masing
- Masuk ke dalam TEMA > Klik Arrow/Panah pada bagian kanan > Lalu pilih Edit HTML
- Cari Kode <BODY> atau </BODY> lalu pastekan kode HTML dan JavaScript di bawah Ini
- Btw kalian masukin'nya jangan double ya, cukup pilih salah satu'nya saja yaah.. yang penting di dalam <BODY>
- Setelah kalian letakan lalu Simpan
<!-- Syntax Highlighter Zypo-Code -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- Biasain Kasih Catatan Biar Kaga Lupa -->
Uji Coba Syntax Highlighter
- Buat Halaman/Postingan dalam bentuk Draft
- Dibagian sudut kiri atas (di bawah judul) Kalian rubah Tampilan Menulis menjadi Tampilan HTML
- Kemudian tempelkan kode dibawah ini untuk kalian kreasikan
- Setelah kalian tempelkan lalu Publikasikan/Draft terserah kalian.
<pre class="html"><code>
<!-- Masukkan semua kode HTML anda disini -->
</code></pre>
<pre class="css"><code>
<!-- Masukkan semua kode CSS anda disini -->
</code></pre>
<pre class="info"><code>
<!-- Masukkan semua kode info anda disini -->
</code></pre>
<pre class="javascript"><code>
<!-- Masukkan semua kode Javascript anda disini -->
</code></pre>
<pre class="jquery"><code>
<!-- Masukkan semua kode JQuery anda disini -->
</code></pre>
Warna Font tidak Sesuai Harapan ?
Masih ada lagi Script yang akan saya bagikan, Cukup ganti Script <link rel="stylesheet" pada bagian atas'nya saja.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/>
Atau Kalian Boleh Coba Medel Yang Satu'nya Lagi.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css"/>
Semoga Membuat Syntax Highlighter Dengan JS dan HTML di Blogger bermanfaat bagi kalian semua. Jika ada hal yang ingin ditanyakan silakan berkomentar saja di bawah.
INFO : Jika anda ingin memasukkan kode HTML, anda wajib mem-parse kode HTML terlebih dahulu, agar bisa terbaca oleh sistem Syntax Hightlighter
Posting Komentar