7.4.19 |
0
nhận xét
|
lượt xem
Để thuận tiện hơn trong việc chia sẻ code đến độc giả khi hướng dẫn, chúng ta nên phân loại chúng ra để mọi người không nhầm lẫn![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidcpSmPIqSQKUsnt_hpZ7B2HUpKRnqYJSaEPswoaqbZc852F3QSEj0bE16E60dNYTRpPfEnqfcDMHqrxjERbZaYu9nkhOkWov54mG4WgfzdSbrhx836R8FSjjWPGdhaoKBPbRhyphenhyphen_BqGGUV/s1600-rw/PRE%255B1%255D.jpg)
Hướng dẫn
Thêm đoạn CSS sau vào trước thẻ ]]></b:skin> trong templatepre[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}
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èn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh
Chèn code: [pre]Code đã mã hóa [/pre]
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”
Chèn link: Click để chèn link