Tạo tựa đề cho thẻ pre

Bài viết này mình sẽ hướng dẫn các bạn cách tạo tựa đề cho thẻ pre giúp cho việc chia sẻ code rõ ràng hơn. Ví dụ bạn muốn chia sẻ HTML thì thẻ pre đó sẽ có tựa đề là HTML cũng với màu tương ứng, tương tự đối với CSS hay Javascript.

Demo​

Thêm đoạn CSS sau vào trước thẻ ]]></b: skin> trong template

Code:

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}
Các bạn có thể tùy ý chỉnh sửa màu sắc, thêm bớt tựa đề nếu muốn cho thẻ pre 

Thực hiện khi viết bài
Mặc định bạn sử dụng thẻ <pre> như bình thường. Nhưng nếu muốn thêm các tựa đề cho đoạn code bạn viết theo cấu trúc sau:

Code:

<pre data-codetype="
	
CSS"Code 
	
CSS</pre>
<pre data-codetype="HTML">Code HTML</pre>
<pre data-codetype="JavaScript">Code JavaScript</pre>
<pre data-codetype="JQuery">Code JQuery</pre>

Chúc thành công, các bạn có thể tham khảo thêm các bài viết thú vị khác liên quan đến blogspot tại www.trollvl.com . Cảm ơn!