Cara Membuat Syntax Highlighter dengan Javascript di Blogger

Halo sobat, judul artikel kali ini adalah cara membuat syntax highlighter pada blog yang berbasis Blogspot dengan menggunakan bantuan Javascript. Syntax highlighter ini berfungsi untuk membedakan kode dengan artikel postingan dan memberi style warna pada bagian-bagian dari kode sehingga memudahkan untuk melihat yang mana yang merupakan bagian-bagian dari kode.

Cara Membuat Syntax Highlighter dengan Javascript di Blogger

Pada editor code seperti Visual Studio Code, Sublime Text, Android Studio, dll sudah ada syntax highlighter yang membantu untuk melihat struktur kode, sedangkan pada Blogger belum ada, tetapi kita dapat menambahkannya.

Syntax highlighter ini demonya dapat dilihat langsung pada artikel ini.

Demo HTML Markup

<p class="traeducation-post-body">Ini adalah contoh syntax HTML</p>
Kotak di atas adalah contoh syntax highlighter untuk kode HTML.

Syntax highlighter akan secara otomatis mewarnai bagian-bagian yang merupakan tag HTML, nama class, ID, tag pembuka, tag penutup, dll.

Lalu bagaimana cara membuat syntax highlighter ini untuk blog yang menggunakan Blogger atau Blogspot? Caranya sangat mudah. Anda dapat membuat syntax highlighter yang berwarna-warni ini dengan bantuan Prism.JS syntax highlighter, sebuah javascript yang membantu menyelesaikan tugas memberi highlight pada setiap baris kode. Berikut ini adalah langkah-langkahnya.

Cara Membuat Syntax Highlighter dengan Javascript di Blogger

1. Buka Blogger, klik Themes, lalu klik Edit HTML. Untuk berjaga-jaga silakan backup theme terlebih dahulu.

2. Tambahkan baris CSS syntax highlighter dari Prism.JS dan PrismJS javascript tepat di bawah tag penutup </head>, CSS ini adalah default theme (light theme).

<link href='http://prismjs.com/themes/prism.css' rel='stylesheet'/>
<script src='http://prismjs.com/prism.js' type='text/javascript'/>
Jangan khawatir script JS ditempatkan di bagian header tidak akan mempengaruhi loading blog, karena ukuran script sangat kecil, hanya sekitar 12kB.

3. Simpan template anda.

4. Sebelum itu siapkan terlebih dahulu kode yang ingin anda masukkan pada artikel, untuk HTML dan JS wajib diparse terlebih dahulu ke XML agar tidak error dengan template blog.

5. Untuk memasukkan kode pada postingan blog, silakan gunakan tag berikut ini:


<pre class="lang-html"><code>

<!-- HTML Comment -->
kode HTML yang telah diparse letakan di sini

</pre></code>

<pre class='lang-css'><code>

/* CSS Comment */
Kode CSS di sini

</code></pre>
6. Silakan ganti class ada element pre dengan kode yang anda gunakan, dengan format lang-xxx
xxx adalah kode pemrograman yang dipilih, contohnya:
lang-html untuk kode HTML
lang-css untuk kode CSS
lang-js untuk Javascript
lang-ruby untuk Ruby, dll.

7. HTML dan Javascript wajib diparse dulu ke XML sebelum anda meletakan di antara elemen  <pre><code> dan </code></pre> karena kalau tidak diparse, kode HTML dan JS tersebut akan dieksekusi langsung di halaman postingan, sehingga akan bentrok dengan HTML template blog, dan kalau script JS juga akan langsung dieksekusi pada halaman artikel tersebut, sehingga jika anda menaruh script redirect javascript tanpa diparse, maka setiap kali anda membuka link artikel post anda akan teralihkan ke halaman lain, oleh sebab itu wajib diparse terlebih dahulu.

8. Untuk parse HTML ke XML silakan gunakan tool berikut ini: http://www.blogcrowds.com/resources/parse_html.php

Demikian artikel mengenai cara membuat syntax highlighter dengan javascript PrismJS di Blogger. Apabila ada pertanyaan silakan ditanyakan pada kolom komentar yang sudah disediakan.

3 Responses to "Cara Membuat Syntax Highlighter dengan Javascript di Blogger"

  1. Mantap bang tutorialnya..

    Jangan lupa kunjugi blog saya: https://nikkixploit.blogspot.com

    ReplyDelete
  2. Replies
    1. langkah no 5 itu cara penerapannya, caranya klik html pada postingan, lalu masukkan kode dengan format tersebut.

      Delete

Disclaimer: Sebagian besar artikel trading merupakan pendapat pribadi penulis, walaupun penulis mencantumkan sumber artikel, harap gunakan akun demo terlebih dahulu untuk mencoba strategi trading.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel