Tuesday, June 16, 2020

Trik Simpel Memasang Syntax Highlighter di Blogger

Hasan askari: Trik Simpel Memasang Syntax Highlighter di Blogger

Basa-basi

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. Salin kode di bawah ini, lalu tempelkan tepat 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>


Catatan:
Jika di template Sobat sudah terpasang script jquery, maka silakan salin dan tempelkan kode yang ini saja tepat di atas tag </head>
<script src="https://rawcdn.githack.com/hsnaskr/blogger/799361c6f337ba114ae03830b68f487b8e7b9721/hljs/hljs.js" type="text/javascript"></script>

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

5. Tara ... syntax highlighter pun selesai terpasang.

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.


Disqus Codes
  • Untuk menulis teks tebal , sila gunakan atau
  • Untuk menulis teks miring, sila gunakan atau
  • Untuk menulis teks bergaris bawah , sila gunakan
  • Untuk menulis teks bergaris tengah , sila gunakan
  • Untuk menulis kode HTML, silakan pakai atau
    or

    dan gunakan parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Dapatkan Kabar Terbaru Melalui Email