Tips Memasang Syntax Highlighter di Blogger

Estimated read time: 3 min

Apakah Sobat seorang blogger yang suka dengan kode-kode? Dan kebetulan ingin memasang syntax highlighter agar syntax kode semakin berwarna? Jika iya, maka Sobat berada di tempat yang tepat. Sebab halaman ini membahas tentang trik simpel memasang syntax highlighter di blogger.

Trik simpel ini secara tak sengaja saya dapat ketika menyadari bahwa penulisan syntax highlighter yang saya gunakan saat ini terasa sangat merepotkan.

Bisa Sobat bayangkan, ketika saya ingin menuliskan kode berwarna, maka saya harus mengawalinya dengan tag <pre><code> dan menutupnya dengan </code></pre>. Terlebih lagi kode yang ingin ditampilkan harus di-parse terlebih dahulu.

Bagi kita yang sudah sangat terbiasa menuliskan kode, maka hal ini menjadi wajar saja. Berbeda dengan orang seperti saya yang tidak terlalu jago dan cepat dalam menuliskan kode. Maka hal ini merupakan masalah kecil yang harus diselesaikan.

Singkat cerita, masalah tersebut sudah terselesaikan dan Sobat pun bisa langsung menggunakan syntax highlighter dengan mengikuti tutorial ini sampai habis.

Sebagai catatan:

Sebenarnya syntax ini tidak terkhusus bagi Sobat pengguna Blogger saja. Melainkan lebih luas daripada itu. Siapa pun bisa memakai syntax ini selama dalam pengelolaan webnya, bisa disisipi kode html, css, dan javascript.

Namun, trik simpel membuat syntax highlighter ini saya kerucutkan pada Blogger. Adapun bagi pengguna selain Blogger, silakan disesuaikan saja ya.

Okelah, berikut langkah-langkahnya:

1. Siapkan template yang sedang Sobat gunakan untuk disisipi kode ini. Sobat bisa mendownloadnya terlebih dahulu kemudian mengeditnya melalui code editor. Atau Sobat juga bisa langsung mengedit templatenya pada pengaturan blogger di menu tema > edit html.

2. Salin kode berikut kemudian letakkan tepat di atas kode </head>
<link href="https://rawcdn.githack.com/hsnaskr/blogger/5e1ac85520407c6a23332fb0c77fbe4d4b5d2c1a/hljs/hljs.css" rel="stylesheet"/>

3. Jika pada template sudah terpasang JQUERY, silakan pasang kode di bawah tepat di atas kode </body>

<script src="https://rawcdn.githack.com/hsnaskr/blogger/799361c6f337ba114ae03830b68f487b8e7b9721/hljs/hljs.js" type="text/javascript"></script>

Adapun jika belum terpasang jquery, silakan salin kode berikut dan tempatkan di atas kode </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://rawcdn.githack.com/hsnaskr/blogger/799361c6f337ba114ae03830b68f487b8e7b9721/hljs/hljs.js" type="text/javascript"></script>


Jadi pilih salah satu saja ya, sesuaikan dengan keberadaan JQUERY.

4. Simpan template. Atau upload template bagi Sobat yang mengeditnya secara offline.

5. Selesai

Cara penulisan syntax highlighter

Kelebihan dari syntax highlighter ini ialah kita tidak perlu mengapit kodenya di antara tag <pre><code> dan </code></pre>. Melainkan cukup dengan tag <code> dan </code>.

Nah, untuk menuliskannya di blogger, ada dua cara.

A. Trik Pertama

Ketika Sobat tidak ingin ribet memparse kode yang ingin ditampilkan, maka cara pertama ini cocok untuk diterapkan.

1. Buka mode compose
2. Masukkan kode yang ingin ditampilkan (yang belum diparse)
3. Masuk ke mode html
4. Tambahkan tag <code> sebelum kode (yang ingin ditampilkan) lalu tambahkan tag </code> di akhir kodenya

Contoh trik pertama

Saya ingin menampilkan kode
<b> Aku kode berwarna </b>

Maka saya,
1. Masuk ke mode compose
2. Letakkan kode ini di mode compose
<b> Aku kode berwarna </b>
3. Masuk ke mode html
4. Tambahkan tag <code> di awal kode tersebut dan menambahkan tag </code> di akhir kodenya.

Catatan:
Ketika kita memasuki mode html, maka tanda < akan berubah menjadi &lt; dan tanda > berubah menjadi &gt;

Oleh karena itu, pada kasus ini, kode yang harus saya tambahan tag <code> ialah kode ini:
&lt;b&gt; Aku kode berwarna &lt;/b&gt;

Sehingga pada mode html, yang tertulis ialah seperti ini.
<code> &lt;b&gt; Aku kode berwarna &lt;/b&gt; </code>

5. Posting dan lihat hasilnya


B. Trik kedua

Trik ini jarang saya gunakan sebab menurut saya agak ribet. Tapi bagi Sobat yang ingin menjajalnya, silakan ikuti langkahnya berikut ini.
1. Parsekan kode yang ingin ditampilkan
2. Tambahkan tag <code> di awal kode yang sudah diparse dan tambahkan pula tag </code> diakhirnya.

Kita bisa menambahkannya melalui code editor atau bisa langsung di mode htmlnya.

3. Masuk ke mode html dan posting

Contoh trik kedua

Saya ingin menampilkan kode
<b> Aku kode berwarna </b>

Maka kode tersebut harus saya parse terlebih dahulu menjadi
&lt;b&gt; Aku kode berwarna &lt;/b&gt;

Untuk memparsenya, Sobat bisa menggunakan tool parse html yang sudah tersedia. Salah satu contoh tool parse ada di halaman berikut.
Tool html parser

Kemudian saya masukkan kode yang sudah diparse ke dalam tag code, menjadi berikut ini.
<code>&lt;b&gt; Aku kode berwarna &lt;/b&gt;</code>

Setelah itu publikasikan postingan dan lihat hasilnya

Catatan:
Hasil kode yang ditampilkan alias syntax pewarnaannya sama persis seperti yang ada di blog ini. Tidak ada bedanya.

***

Yap, itulah Trik Simpel Memasang Syntax Highlighter di Blogger. Semoga bermanfaat dan sampai jumpa.


Posting Komentar

Silakan komentar sesuai topik
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.