Cara Membuat Syntax Highlighter Ringan di Blogger

Cara Membuat Syntax Highlighter Ringan di Blogger

Ambyarblog - Apa kabar? Syntax Highligther adalah fitur editor teks yang digunakan untuk pemrograman, scripting, atau bahasa markup, seperti HTML, CSS, JavaScript dan lainnya.

Fitur ini menampilkan teks, terutama kode sumber dalam warna dan font yang berbeda sesuai dengan kategori dari bahasa pemrograman itu sendiri.
Cara Membuat Syntax Highlighter Ringan di Blogger
Dengan menggunakan syntax highlighting atau penyorotan sintaks, bahasa pemrograman lebih mudah dibaca oleh manusia.

Penggunaan syntax highlighter di blogger tentu sangat penting apalagi jika Anda membahas mengenai berbagai macam bahasa pemrograman di blog Anda.

Agar manusia lebih mudah memahami dan membaca berbagai baris kode bahasa pemrograman maka akan lebih baik apabila Anda memasang syntax highlighter ini di blog.

Berbagai kode yang Anda bagikan di postingan blog akan berubah warna-warni sehingga lebih terlihat keren dan rapi.

Selain untuk memudahkan pengunjung situs Anda membaca berbagai kode bahasa pemrograman, penggunaan syntax highlighting ini juga akan lebih membuat visitor nyaman ketika membaca atau melihat kode skrip yang Anda tulis di blog.

Nah, pada kesempatan kali ini saya akan memberikan tutorial Cara Membuat Syntax Highligther Ringan di Blogger. Tutorial ini saya ambil dari mbak igniel, silahkan simak langkah-langkahnya.

Cara Membuat Syntax Highligther di Blogger

1. Buka dashboard Blogger Anda.

2. Pilih menu Tema > klik Edit HTML.

3. Simpan kode CSS ini tepat DIATAS ]]></b:skin> atau </style>.
.post-body pre { background-color: #292E34; /* warna background */ border-left: 5px solid #008c5f; /* variasi border kiri */ 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; /* warna huruf */ font-size: 12px; /* ukuran huruf */ max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,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. Jangan lupa Simpan.

Cara Menggunakan Syntax Highlighter di Blogger

Untuk menggunakan syntax highlither di blog dalam isi postingan, Anda cukup memanggilnya dengan code <pre> dan <code> seperti contoh berikut:
<pre><code> <!-- Masukkan semua kode CSS, HTML atau Javascript disini --> </code></pre>
Masukkan kodenya di mode HTML bukan Compose dan jangan lupa parse dulu kodenya. Bisa cek disini: Parse HTML.

Penutup

Itulah Cara Membuat Syntax Highlighter Ringan di Blogger, menggunakan pure CSS memang tidak dapat membuat warna-warni seperti text editor aslinya.

Namun, jika anda ingin colorful bisa menggunakan JavaScript, tapi menurut saya menggunakan CSS jauh lebih ringan tidak menghambat kecepatan loading blog.

Sekian dulu, apabila ada pertanyaan silahkan komen di kolom komentar. Semoga bermanfaat dan terima kasih.

Anda mungkin menyukai postingan ini