Cara Memasang Syntax Highlighter di Blogger dengan CSS

Cara Memasang Syntax Highlighter di Blogger - Syntax Highlighter merupakan salah satu fitur khusus pada sebuah proses pemindahan kode bahasa pemrograman tertentu seperti tulisan, warna teks, dan posisi yang sama persis pada sebuah kode bahasa pemrograman untuk disalin menjadi sebuah tulisan lain agar nantinya lebih mudah dalam membaca atau mempelajarinya.

Untuk cara kerja Syntax Highlighter sendiri hampir sama seperti blockquote, akan tetapi fitur blockquote hanya satu warna pada teks, untuk merubah warna agar sesuai dengan kode aslinya kita harus melakukan secara manual. Pada dasarnya Syntax highlighter menjadi cara efektif untuk proses pembuatan atau pemindahannya bila kita bandingkan dengan fitur blockquote.

Selain untuk memperbaiki tampilan pada postingan blog, penerapan Syntax Highlighter bertujuan untuk pembaca agar lebih mudah mengenali jenis-jenis kode yang telah diberikan oleh penulis blog. Untuk manfaat penggunaan Syntax Highlighter sendiri yaitu pengunjug akan merasa lebih nyaman saat membaca isi konten blog.

Cara Menggunakan Syntax Highlighter di Blogger

Cara Memasang Syntax Highlighter di Blogger

1. Langkah pertama silahkan anda masuk ke Dashboard Blogger ->> Klik menu Tema ->> Klik Edit HTML.

2. Silahkan cari kode .post-body pre dan .post-body pre code. Jika anda tidak menemukan kodenya, salin kode dibawah lalu tempelkan di atas tag </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 } code-box
3. Jika sudah selesai klik Simpan.

Cara Menggunakan Syntax Highlighter di Blogger

Setelah kita memasang kode untuk Syntax Highlighter, langkah berikutnya cara penulisan didalam postingan.

1. Pilih Postingan yang akan Menggunakan Syntax Highlighter

2. Masukan kode HTML berikut pada Postingan ( klik Mode HTML bukan Compose )

<pre><code> <!-- Masukkan semua kode CSS, HTML atau Javascript disini --> </pre></code> code-box
Jika anda ingin menambah kode HTML atau JavaScript didalam Syntax Highlighter silahkan parse terlebih dahulu di Blogcrowds

Demikian untuk Cara Memasang Syntax Highlighter di Blogger, semoga bisa menjadi referensi dan bermanfaat untuk semua. Selamat mencoba!
Baca Juga

Komentar

Previous Post Next Post