Khung codeview với CSS

Một đoạn css khá đẹp mắt dùng để trang trí thẻ <pre> nhằm giúp cho khách truy cập dễ dàng hơn trong việc xem các đoạn mã lệnh mà bạn chia sẽ, các đoạn code sẽ được đặt trong thẻ <pre>...</pre> với việc tự động chèn 2 màu xen kẽ giữa các dòng code và hiển thị một chủ đề phía bên trên nhằm giúp cho người đọc dễ dàng hơn khi xem các đoạn code mà bạn chia sẽ.

Demo

Xem thêm:
- Hiệu ứng Tooltip bằng CSS3
- Biến thẻ <code> thành địa chỉ liên kết với javascript
- Tùy chỉnh thuộc tính CSS bằng cách sử dụng tiện ích mở rộng Stylebot

- Với blogspot, chỉ cần chèn đoạn css dưới đây trước thẻ đóng ]]></b:skin> và Lưu lại

pre {
  background-color:white;
  background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
  -webkit-background-size:30px 30px;
  -moz-background-size:30px 30px;
  -ms-background-size:30px 30px;
  -o-background-size:30px 30px;
  background-size:30px 30px;
  background-repeat:repeat;
  font:normal bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
  color:#333;
  border:2px solid #666;
  position:relative;
  padding:0 7px;
  margin:10px 0;
  overflow:auto;
  word-wrap:normal;
  white-space:pre;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
  position:relative;
}

pre[data] {
  padding:29px 1em 7px 1em;
}

pre[data]:before {
  content:attr(data);
  display:block;
  position:absolute;
  top:0;
  right:0;
  left:0;
  background-color:#666;
  padding:0 7px;
  font:bold 11px/20px Arial,Sans-Serif;
  color:white;
}

code pre[data="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data="JQuery"] {border-color:#395540;color:#2E2E27;}
pre[data="PHP"] {border-color:#FF9900;color:#865003;}
pre[data="XML"] {border-color:#FF0C39;color:#790015;}

pre[data="HTML"]:before {background-color:#0B7E88;}
pre[data="CSS"]:before {background-color:#7B990C;}
pre[data="JavaScript"]:before {background-color:#545448;}
pre[data="JQuery"]:before {background-color:#395540;}
pre[data="PHP"]:before {background-color:#FF9900;}
pre[data="XML"]:before {background-color:#FF0C39;}

- Để sử dụng chỉ cần chèn mã bạn muốn hiển thị vào các thẻ tương ứng dưới đây:

<pre data="HTML"> ... </pre>
<pre data="CSS"> ... </pre>
<pre data="JavaScript"> ... </pre>
<pre data="JQuery"> ... </pre>
<pre data="PHP"> ... </pre>
<pre data="XML"> ... </pre>