Thẻ PRE với màu xen kẽ giữa các dòng

Gần đây thì mình đã có một bài viết hướng dẫn "đánh thứ tự các dòng trong thẻ code" giúp cho việc khách truy cập dễ nhìn hơn những đoạn mã mà chúng ta chia sẻ. Thì bài viết đó mình cũng đã nói ra mình sẽ chia sẻ thêm nhiều cách thức mà bạn có thể làm để đoạn mã dễ nhìn hơn mà không cần đụng tới Syntax Highlighter nặng nề. Và bài viết này lại tiếp tục mình sẽ hướng dẫn các bạn tạo thẻ pre với màu nên xen kẽ như blog của mình hiện tại.

Thẻ PRE với màu xen kẽ giữ các dòng

Thẻ PRE với màu xen kẽ giữa các dòng

Thủ thuật này mình chỉ sử dụng CSS để làm thôi, cách thức mình làm là chèn một ảnh background hai màu xen kẽ với kích thước định sẵn, sau đó quy định lại chiều cao của các dòng chữ có bên trong nó cho đúng kích thước với các dòng màu có trên background đó. Thì mọi thứ mình đã làm sẵn rồi, các bạn chỉ việc tìm đến thẻ ]]></b:skin> và chèn đoạn css này lên trên để sử dụng.
pre {
border: 1px solid #636363;
background: url("http://1.bp.blogspot.com/-W23tmwuLEA8/U5G3vwIYfyI/AAAAAAAACRM/pQIfOzg2mWk/s1600/pre.png") repeat top;
color: #888888;
display: block;
font: 12px/19px Consolas,'Andale Mono',Courier,'Courier New',monospace;
margin: 10px 0;
overflow: auto;
padding: 19px 19px 17px;
}
ở đoạn mã trên thì bạn sẽ có màu trắng xen kẽ với bạc, và font chữ màu bạc nếu bạn không thích màu chữ nhạt thì bạn có thể thay đổi lại ở thuộc tính color bằng màu mà bạn yêu thích. Còn nếu không thích màu nền thì bạn có thể mở các phần mềm chỉnh sửa ảnh để đổ lại màu cho background đó.

Lời kết

Đây là một trong những thủ thuật chỉ sử dụng css nhưng khá là hiệu quả trong việc làm cho khách truy cập dễ dàng đọc hiểu đoạn mã đó hơn. Nếu bạn nào cần hỗ trợ cho việc chỉnh sửa cứ để lại nhận xét phía dưới cho mình.

2 bình luận

  1. avatar says

    11:28 Ngày 03 tháng 08 năm 2014

    Cảm ơn bác nhiều, nếu những bài viết dạng này có thêm demo nữa thì tuyệt.

  2. avatar says

    13:18 Ngày 03 tháng 08 năm 2014

    Nó giống site mình mà có thêm cái border thôi mà :D

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.