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.

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

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

Viết bài với chế độ soạn thảo HTML. 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:

<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 các bạn thành công!