Bisakah blockquote dimodifikasi menjadi kode sintaks highlighter?

Pertanyaan itu terlintas di kepala saya pada saat ingin membuat kode sintaks highlighter otomatis di halaman blog. Artinya kita tidak perlu menambahkan kode baru, cukup dengan memodifikasi kode kode CSS blockquote.

Namun blockquote pada dasarnya di desain hanya sekedar untuk menampilkan sorotan suatu 'kutipan' atau pernyataan yang umumnya pendek pendek. Sedangkan kode sintaks highlighter di buat untuk menampilkan kode kode HTML yang pada umumnya terdapat pada halaman halaman blog tutorial dan kadang kode kodenya sangat panjang.

Menggunakan blockquote sangat sederhana, cukup sorot tulisan yang mau di jadikan kutipan, dan tekan tool dengan tanda di atas menu halaman. Sedangkan jika menggunakan kode sintaks highlighter yang sumber kodenya ada di internet, kita harus memasang CSS, eksternal link dan juga kadang javascript. Terus penulisannya harus melalui opsi 'HTML view'

Alangkah baiknya ya jika blockquote bisa di modifikasi menjadi kode sintaks highlighter.

Tapi, blockquote dapat menampilkan kutipan panjang dan saya sering memanfaatkannya untuk menampilkan kode kode HTML tutorial. Saya jadi berfikir jika ditambahkan animasi untuk menekankan pentingnya sebuah kutipan dalam bentuk kode kode, mengapa tidak? 

Perhatikan modifikasinya:

See the Pen Blockquote style by Sufyan Yaan (@sufyan-yaan) on CodePen.

Jadi kodenya adalah:

q::before, q::after { animation: dancing 1s linear infinite; display: inline-block; transform: rotate(13deg); color: red; } @keyframes dancing { 0% { transform: rotate(13deg) scale(2); } 25% { transform: rotate(0deg); } 50% { transform: rotate(-13deg) scale(2); } 75% { transform: rotate(0deg); } 100% { transform: rotate(13deg) scale(2); } } q { quotes: "‘" "’" "“" "”" "‘" "’" "“" "”"; color:green; } body { max-width: auto; margin: 0.1em; font: 1.1rem/1.3 Courier, serif; border-left:solid; padding:0rem; font-style:italic; }

Sebenarnya saya ingin sekali memiliki waktu untuk memodifikasi beberapa karakter dengan pewarnaan yang berbeda.  Lalu menjadikannya semirip mungkin dengan kode sintaks highlight tersebut.

Kode di atas adalah masihlah untuk blockquote, masih belum dapat menggantikan kode sintaks highlighter. Namun terkadang kita dapat menjadikannya sebagai alternatif untuk menampilkan kode kode HTML ke dalam postingan tutorial kita. 

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: