Cara Membuat Kotak Kode dengan CSS di Blogger

Sebelumnya saya sudah menjelaskan cara membuat Syntax Highlighter di postingan blog dan cara menampilkannya di artikel blog.

Namun, kali ini agak sedikit berbeda karena Syntax Highlighter yang ditampilkan, hanya menggunakan bantuan kode dari CSS, - tidak membutuhkan JavaScript (Js) seperti 2 artikel sebelumnya.

Apa itu Syntax Highlighter?

Syntax Highlighter adalah salah satu Script yang berfungsi membuat kode HTML, CSS, dan JavaScript (Js) menjadi warna-warni di dalam artikel blog (BlogPosting / SinglePost).

Selain itu, tujuan ditambahkannya Syntax Highlighter di dalam Template Blogger adalah sebagai pembeda antara isi artikel dengan kode HTML, CSS, dan JavaScript (Js).

Cara Membuat Kotak Kode dengan CSS di Blogger

Blogger > Tema > Edit HTML

Simpan kode di bawah ini, di atas kode </style> atau ]]></b:skin>

pre{white-space:pre-wrap;padding:10px;margin:10px;font-size:12px;line-height:1.5;background:rgba(27,27,27,0.91);border-left:10px solid #000;color:#cfcfa7}
mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}

Untuk menampilkan kotak kode CSS tersebut, kita perlu menggunakan kode markup HTML seperti di bawah ini:

<pre><code> Letak CSS/HTML/JAVASCRIPT di Sini </code></pre>

Atau kalau ingin menandai kode tertentu dengan warna stabilo (berlatarbelakang), - seperti halnya penggunaan kode kbd yang diawali kbd dan diakhiri kbd, gunakan kode markup HTML ini:

<mark> Letak Kode Stabilo di Sini </mark>

Secara tidak langsung, kalian telah memasang 2 kode yang fungsinya sama yakni sebagai pembeda dengan isi artikel, tapi fokusnya agak sedikit berbeda.

Untuk menampilkan Syntax Highlighter di dalam postingan blog, alihkan gaya tulis dari mode Compose ke mode tulis HTML.

Setelahnya, artikel baru dipublikasikan. Gampang, kan? Itulah cara membuat dan menampilkan kode CSS di Blogspot.*

Sumber: https://www.analisyuki.com/2019/06/membuat-kotak-kode-css-di-blogger.html