Cara Memasang Syntax Highlighter di Blogger dengan CSS

Buat kamu yang sering berbagi tutorial atau kode di blog, memasang syntax highlighter bisa jadi cara sederhana untuk mempercantik tampilan blog sekaligus memudahkan pembaca memahami isi kode yang kamu bagikan.

Artikel ini akan membahas langkah-langkah memasang syntax highlighter di Blogger menggunakan CSS. Yuk, langsung simak panduannya!

Daftar Isi

• Apa Itu Syntax Highlighter?
• Cara Memasang Syntax Highlighter di Blogger
• Cara Menggunakan Syntax Highlighter di Postingan

Apa Itu Syntax Highlighter?

Sebelum masuk ke langkah pemasangan, mari kita bahas dulu apa itu syntax highlighter.

Syntax highlighter adalah fitur yang memberi warna pada kode berdasarkan elemennya, seperti tag, atribut, nilai, atau fungsi. Dengan adanya perbedaan warna ini, kode yang ditampilkan akan lebih mudah dipahami, terutama untuk pembaca yang sedang belajar atau mencari referensi.

Apakah Syntax Highlighter Memengaruhi Kecepatan Blog?
Umumnya ada dua cara untuk membuat syntax highlighter di Blogger: Menggunakan CSS atau JavaScript.
Syntax highlighter berbasis CSS lebih ringan karena tidak perlu memuat skrip tambahan. Namun, fitur ini biasanya tidak sekompleks versi JavaScript. Tapi tenang, untuk kebutuhan sederhana, menggunakan CSS sudah lebih dari cukup!

Cara Memasang Syntax Highlighter di Blogger

Berikut langkah-langkah memasang syntax highlighter di Blogger menggunakan CSS:

1. Masuk ke akun Blogger, lalu buka menu Tema.
2. Klik tombol Edit HTML untuk mulai mengedit template.
3. Cari tag </style> di dalam kode template.
4. Tambahkan kode CSS berikut sebelum tag tersebut:
   

   .post-body pre {
   background-color: #f1f5f9; /* warna background */
   border-radius:8px;white-space:pre-wrap;word-break:break-word
   }
   .post-body pre code {
   color: #333; /* warna teks */
   font-size:.875rem;font-family:menlo,consolas,monaco,monospace;display:block;padding:1rem 1.5rem;max-height:250px;overflow:auto;tab-size:2;-moz-tab-size:2;-o-tab-size:2;user-select:text;-moz-user-select:text;-ms-user-select:text;-khtml-user-select:text;-webkit-user-select:text
   }
   .post-body pre.css:before, .post-body pre.html:before, .post-body pre.js:before {
   background-color: #cbd5e1; /* warna background title */
   color: #1a1a1a; /* warna teks title */
   font-size:.875rem;display:block;padding:.5rem 1.5rem .5rem 3.125rem;background-repeat:no-repeat;background-size:1.5rem;background-position:left 1.375rem top .438rem;position:relative
   }
   .post-body pre.css:before{content:"CSS";background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z' fill='%23333333'/%3E%3C/svg%3E")}.post-body pre.html:before{content:"HTML";background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z' fill='%23333333'/%3E%3C/svg%3E")}.post-body pre.js:before{content:"JavaScript";background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z' fill='%23333333'/%3E%3C/svg%3E")}

5. Klik tombol Simpan di pojok kanan atas untuk menyimpan perubahan.

Cara Menggunakan Syntax Highlighter di Postingan

Setelah kode CSS berhasil ditambahkan, kini kamu bisa menggunakannya di postingan. Berikut caranya:

1. Masuk ke menu Postingan dan buat artikel baru atau edit artikel yang sudah ada.
2. Di editor postingan, ubah mode penulisan ke HTML.
3. Gunakan tag <pre> dan <code> untuk membungkus kode yang ingin ditampilkan. Contohnya:
   

   <pre class="html"><code>
   <!-- Masukkan kode di sini -->
   </code></pre>

4. Ganti <!-- Masukkan kode di sini --> dengan kode yang ingin kamu tampilkan. Jangan lupa sesuaikan juga atribut class menjadi HTML, CSS atau JS.
   

   Jika kamu memasukkan kode HTML, CSS, atau JavaScript, pastikan kode tersebut sudah di-parse terlebih dahulu agar tidak merusak template. Kamu bisa menggunakan tool online HTML to XML Parser untuk mengonversi kode sebelum ditempelkan ke editor.

5. Setelah selesai, klik Publikasikan dan cek hasilnya di blog.

Dengan memasang syntax highlighter berbasis CSS di Blogger, blogmu akan terlihat lebih menarik dan fungsional, terutama untuk pembaca yang sering mempelajari kode dari tutorialmu. Selain itu, cara ini juga menjaga kecepatan loading blog tetap optimal.

Berbagi :