Khi Love Heo

Tôi vừa biết thêm một cách chuyên nghiệp hơn và đơn giản hơn vì không phải ước lượng height cho đoạn code bạn dùng.
Chúng ta sẽ tạo ra một class mới và đặt chúng vào CSS của template (đặt vào bất kỳ vị trí nào giữa hai thẻ b:skin và /b:skin.Việc làm này sẽ giúp bạn sử dụng khung hiển thị code thống nhất ở tất cả các bài viết có dùng khung và dễ chỉnh sửa thuộc tính khi muốn thay đổi
Bạn thêm một đoạn CSS điều khiển hiển thị code,nhưng để chúng đi kèm thẻ pre hoặc code

pre, code{
color: $textcolor;
background: $bgcolor;
border: 2px solid $bordercolor;
overflow: auto;
font: $headerfont;
padding: 10px;
} 

Khi sử dụng trong post chúng ta sẽ đặt code theo một trong hai cách:

Cách 1: Đặt giữa 2 thẻ Pre
Cách 2: Đặt giữa 2 thẻ Code

Với cách này người ta có thể dùng hình ảnh đánh số thứ tự làm nền để đoạn code hiển thị trông đẹp hơn. Bạn có thể chép đoạn code sau mà tôi đang dùng cho template của mình.

pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(http://img178.imageshack.us/img178/1307/prepb3.jpg) no-repeat left top;
overflow : auto;
text-align:left;
border : 1px solid #99cc66;
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;
}