Cara Mudah Memasang Syntax Highlighter di Blogger Blogspot

Jika blog teman-teman memiliki banyak konten yang membahas seputar tutorial, yang isinya terdapat kode-kode, maka saya sarankan menggunakan syntax highlighter ini. Teman-teman blogger lainnya sudah banyak dan sering menggunakan fitur yang bernama syntax highlighter ini. Khususnya bagi mereka yang sering membahas topik-topik blogging, yang juga melibatkan kode-kode seperti HTML, CSS dan JavaSript.

Fitur ini dapat memudahkan para pembaca jika melihat postingan kita yang juga terdapat kode-kodean. Dimana pembaca dapat dengan mudah membedakan mana teks biasa dan mana kode-kode nya. Misalkan ketika mereka melihat teks dengan kode HTML yang bersebelahan, mereka tidak merasa sumpek membaca postingan kita dikarenakan syntax highlighter ini menyoroti kode-kodean yang kita taruh di postingan tersebut.

Bagi yang belum paham, pengertian gampang nya syntax highlighter ini mirip blockquote yang menyoroti sepotong teks, bedanya syntax highlighter hanya mencakup kode-kode markup seperti HTML, CSS dan lain-lain di dalam sebuah kolom yang biasanya ber-warna latar gelap atau hitam. Pada umumnya sih warna teks kode-kode di dalam syntax highlighter ini warna-warni. Tapi pada postingan kali ini kita hanya akan membuat syntax highlighter dengan satu warna saja, menggunakan kode CSS.

Berhubung postingan kali ini ngebahas cara memasang syntax highlighter di blog, maka saya akan langsung membagikan cara-caranya di bawah. Tanpa banyak basa-basi lagi...

Cara Memasang Syntax Highlighter di Blog

1. Buka dashboard blogger kalian,

2. Langsung aja klik menu Tema ➤ klik tanda panah kebawah yang backgroundnya oren, lalu klik Edit HTML,

3. Copy kode CSS di bawah ini,

.post-body pre {background-color: #121a24;
border-left: 5px solid #1b699d;border-right: 5px solid #1b699d;
padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {color: #BFBF90;
font-size: 13px;
max-height:300px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

4. Paste kode CSS diatas tepat SEBELUM tag ][></b:skin> atau </style>,

5. Klik Simpan / Save

Jika sebelumnya blog teman-teman masih terdapat kode .post-body pre atau .post-body pre code, silahkan kalian hapus dulu kode tersebut. Takut mengganggu kode syntax yang baru.

Cara Menggunakan Syntax highlighter di Blog

Tentu penasaran kan gimana cara gunainnya. Oke, teman-teman tinggal tuliskan kode pemanggilnya di postingan, <pre> dan <code>... Lebih lengkapnya silahkan ikuti langkah-langkah dibawah.

Edit postingan teman-teman yang masih di draft ➤ klik icon pensil di toolbar editor postingan kalian, lalu pilih Tampilan HTML. Terapkan syntax highlighter nya di editor html tersebut seperti contoh berikut:

<pre><code><!-- Masukkan kode HTML CSS dan JavaScript teman-teman disini --!></code></pre>

Sebelum kalian memasukkan tag HTML ataupun javascript ke dalam syntax highlighter alangkah baiknya di parse terlebih dahulu di blogcrowds... Agar nanti tidak mengacaukan tampilan blog kalian.

Jika kode html kalian sudah diparse maka bisa langsung memasukkan nya ke dalam syntax highlighter. Kalau sudah dipasang klik Simpan atau Save. Mungkin cukup segitu untuk cara memasang serta menerapkan syntax highlighter di blog.

Mudah bukan? Jika penasaran dengan tampilannya bisa lihat syntax highlighter diatas yang saya pasang dan saya isi dengan css. Syntax highlighter dengan satu warna pada text, background hitam dan dengan warna biru di border kiri dan kanan, menjadikan tampilan syntax highlighter yang simpel dan sederhana.

Demo

Satu hal yang penting, jika teman-teman ingin mengubah warna border kiri atau kanan syntax highlighter diatas, silahkan ubah kode #1b699d, dengan kode warna lain yang kalian inginkan. 

Teman-teman bisa saja memasang syntax highlighter yang text nya warna-warni itu ke blog kalian. Tapi saran saya pakai yang diatas saja, yang menggunakan css, soalnya lebih ringan dibandingkan dengan yang menggunakan javasript.

Saya sih ya, senang saja memakai syntax highlighter yang diatas, selain hanya menggunakan CSS yang tentu lebih ringan dari JavaScript, juga syntax highlighter nya lebih simpel untuk dilihat. Selain itu juga lebih sederhana tampilannya, walau lebih keren textnya warna warni, namun itu memakai javasript.

Eh iya, karena setiap manusia yang ada di bumi ini memiliki banyak selera yang berbeda beda, maka saya akan kasih tips buat teman-teman yang ingin menghilangkan warna di border kiri dan kanan. Silahkan kalian hapus kode berikut border-left: 5px solid #1b699d; /* variasi border kiri */ klik simpan jika kalian sedang berada di editor html template. Begitupun jika kalian ingin menghapus border di kanan. Selesai...

Jika ada bug / kesalahan bisa bilang ke saya... eh, tapi sebenernya syntax highlighter diatas jika diterapkan pada blog dengan benar nggak bakalan terjadi kesalahan (mungkin ya).

Omong-omong tentang syntax highlighter, jika blog kalian sebenarnya tidak terlalu membutuhkan fitur ini, maka tidak usah dipasang. Cukup pasang aja blockquote ke blog kalian...

Mungkin sampai disini saja tulisan saya kali seputar Blogging, semoga dapat membantu teman-teman sekalian. Terimakasih.

Source :https://www.igniel.com/2018/08/syntax-highlighter-blog-css.html