Membuat Syntax Highlighting di Postingan Blogger

Syntax Highlighting merupakan teks editor yang biasanya digunakan untuk pemrograman, untuk blogger sendiri banyak manfaat dari Syntax Highlighting ini terutama blog tutorial apalagi membahas seputar blogging dan HTML. Syntax Highlighting akan menampilkan isi kode yang kita buat sehingga para pembaca lebih mudah memahami dan meminimalisir terjadinya kesalahan syntax ketika input code.

Membuat Syntax Highlighting di Blogger
Sebenarnya, sudah banyak yang membahas mengenai Syntax Highlighting di internet. Disini kita akan membuat Syntax Highlighting dengan desain keren yang mungkin dari Anda ada sedang mencari cara Membuat Syntax Highlighting di blogger. Berikut penampakan dari Syntax Highlighting web ini:

Cara Membuat Syntax Highlighting di Blogger
Untuk membuatnya, ikuti langkah-langkah berikut :
1. Login ke Blogger dan Masuk ke Dashbord Blogger Anda
2. Kllik Theme atau Template dan pilih edit HTML
3. Tekan CTRL+F dan ketikkan ]]></b:skin> pada kolom pencarian, Lalu salin Kode CSS berikut dan tempelkan(Paste) Kode ini Tepat Sebelum ]]></b:skin>.

/* Syntax Highlighting */
pre,pre
    code{color:#FFFFFF}pre{background:#121835;padding:8px
    10px;overflow:auto;max-width:100%;text-align:left;margin:10px
    auto;border-left:3px solid #ff0000}code,pre,pre
    code{font-family:Consolas,Monaco,'Andale
    Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}code{color:#FFFFFF}i.klik-url,pre{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}blockquote{font-family:Georgia,serif;color:#141924;border-left:3px
    solid #dedede;padding-left:8px}

4.Kemudian Simpan Tema

Cara Penerapan Syntax Highlighting Di Postingan Blogger

Jika sudah memasang code diatas, ssaatnya penerapannya pada postingan blog, caranya sangat mudah silahkan simak penjelasan berikut:
1. Buat artikel yang berisi script atau tutorial atau Artikel biasa juga bisa.
2. Ubah dari tampilan menulis ke Tampilan HTML < >
3. Disini akan ada banyak kode HTML yang ditampilkan, pastikan anda mengerti terlebih dahulu dasar dari HTML.
4. Copy Kode di bawah ini dan tempatkan dimanapun Anda mau, sesuai dengan postingan anda. Masukkan isi artikel didalam kode pembungkus antara <pre><code> dan </code></pre>.

    <pre><code>ketik atau masukkan kode CSS, Javascript, HTML
    disini</code></pre>

Ganti Tulisan Yang Berwarna Merah dengan kode Script Anda
5. Jika Sudah, Kembali ke tampilan menulis atau Tab Compose ✎.
6. Silahkan klik Pratinjau untuk melihat hasilnya sebelum dilakukan Publishing.
7. Dan membuat Syntax Highlighter Selesai

Kesimpulan

Untuk membuat Syntax Highlighting ini memang mudah, pastikan anda benar dalam menempatkan script CSS tersebut dengan begitu Syntax Highlighting akan tampil dengan baik, dan apabila terjadi error silahkan tinggalkan jejak. Semoga bermanfaat dan terimakasih telah berkunjung.

Location:

Share :