Cara Mempercantik Tampilan Code Snippet di Blogger

Buat Anda yang di blognya sering membuat tutorial tentang Linux atau desain web dengan CSS atau HTML, pasti sering menampilkan kode-kode perintah Linux atau kode-kode CSS dan HTML di artikelnya, atau istilah kerennya code snippet.

Untuk menampilkan code snippet di artikel, sebenarnya bisa saja ditampilkan apa adanya tanpa pemformatan tertentu. Tetapi tentu saja tampilannya menjadi kurang menarik.

Agar tampilan code snippet menjadi lebih menarik, kita bisa menggunakan CSS dan JS yang kita sisipkan di template Blogger.

Ada banyak cara membuat tampilan code snippet menjadi lebih menarik. Di artikel kali ini saya akan membagikan salah satu cara mempercantik tampilan code snippet dengan menggunakan code-prettify.

Cara Mempercantik Tampilan Code Snippet di Blogger

1. Jangan lupa membackup template Blogger terlebih dahulu. Caranya sebagai berikut :

a. Login ke blogger.com dengan akun blogger Anda.

b. Klik Tema

c. Klik ikon titik tiga

d. Klik Cadangkan

e. Klik DOWNLOAD

2. Setelah template dibackup, kita akan mengedit template untuk menambahkan beberapa kode untuk mempercantik tampilan code snippet. Caranya klik lagi ikon titik tiga.

3. Klik Edit HTML

4. Cari baris berikut

]]></b:skin>

Kemudian tempatkan baris kode berikut di atasnya

/* desert scheme ported from vim to google prettify */
pre.prettyprint { display: block; background-color: #333 }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string  - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type    - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff }    /* punctuation */
pre .pln { color: #fff }    /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal         - lightgreen */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre.prettyprint { background-color: none }
  pre .str, code .str { color: #060 }
  pre .kwd, code .kwd { color: #006; font-weight: bold }
  pre .com, code .com { color: #600; font-style: italic }
  pre .typ, code .typ { color: #404; font-weight: bold }
  pre .lit, code .lit { color: #044 }
  pre .pun, code .pun { color: #440 }
  pre .pln, code .pln { color: #000 }
  pre .tag, code .tag { color: #006; font-weight: bold }
  pre .atn, code .atn { color: #404 }
  pre .atv, code .atv { color: #060 }
}

Sehingga menjadi seperti di gambar berikut

5. Kemudian cari baris berikut

</body>

Kemudian tempatkan baris kode berikut di atasnya

<script async='async' src='//cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'/>

Sehingga menjadi seperti di gambar berikut

6. Klik ikon Simpan untuk menyimpan perubahan template

Sampai di sini kita sudah menyisipkan beberapa baris kode CSS dan JS di template Blogger. Selanjutnya, bagaimana cara menampilkan code snippet tersebut ? Caranya sebagai berikut.

1. Pada saat Anda membuat postingan Blogger, klik ikon pena yang ada di pojok kiri atas. Kemudian klik Tampilan HTML.

2. Jika Anda ingin menampilkan kode di dalam postingan, maka apitlah kode-kode tersebut dengan format seperti berikut

<pre class="prettyprint">kode Anda di sini</pre>

Contohnya seperti di gambar berikut

Beginilah tampilan dari kode-kode Anda ketika postingan tersebut dibuka di browser.

Bagaimana ? Menjadi lebih menarik bukan tampilan kode-kode Anda ?

Penutup

Demikianlah telah saya bagikan tutorial bagaimana cara mempercantik tampilan code snippet di Blogger. Semoga bermanfaat.

Berbagi :