Membuat Judul pada Tag PRE

Pernah melihat blog yang menggunakan tag pre? Salah satunya adalah blog  yang sedang Anda baca ini. Coba perhatikan tag pre-nya, terdapat judul dan warna latar berbeda sesuai kode. Bila kode CSS maka warna latar judulnya hijau, HTML warna latar judulnya merah, dst.


Penambahan judul otomatis ini biasanya sering digunakan pada tag PRE dengan Vanilla Style. Bagi Anda yang ingin menggunakan nya, silahkan simpan kode ini di atas ]]></b:skin> atau </style>

pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-11px -13px 10px -54px;
padding:8px 12px;
font-family:Arial,Sans-serif;
font-size:14px;
text-transform:uppercase;
background-color:#41749f;
color:white
}
pre[data-codetype="CSS"]:before{background-color:#5fbbba}
pre[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre[data-codetype="JQuery"]:before{background-color:#99c262}

Ini bisa juga diterapkan untuk blockquote. Anda hanya perlu mengganti kode CSS dari pre menjadi blockquote.

Format penulisan dalam artikel seperti contoh di bawah ini.

<pre data-codetype="CSS"><code>...........</code></pre> /* Untuk CSS */
<pre data-codetype="HTML"><code>...........</code></pre> /* Untuk HTML */
<pre data-codetype="JavaScript"><code>...........</code></pre> /* Untuk JavaScript */
<pre data-codetype="JQuery"><code>...........</code></pre> /* Untuk kode JQuery */
dst...

Selamat belajar :)