Hướng dẫn tạo khung chứa code đơn giản

Mẫu khung chứa code

Bạn là một Blogger chuyên chia sẻ các thủ thuật blog và bạn muốn code được đặt trong khung để nó được rõ ràng hơn, độc giả cũng dễ copy code hơn. Hôm nay, mình xin chia sẻ với các bạn cách tạo một khung chứa code đơn giản cho blog của mình.

#Cách thêm khung chứa code

Chỉ cần dán đoạn css dưới vào trên thẻ ]]></b:skin>

/*khung chua code*/
pre.code {
display: block;
font: 1em 'Courier New', Fixed, monospace;
font-size: 100%;
color: #666666;
background: #fff ;
overflow: auto;
text-align: left;
border: 1px solid #99cc66; 
padding: 0px 20px 0 30px;
margin: 1em 0 1em 0;
line-height: 17px;
max-height:300px}

Trong đó:

• color: #666666 là màu chữ trong khung
• background: #fff là màu nền của khung
• border: 1px solid #99cc66;là độ rộng đường viền(1px) và màu đường viền(#99cc66)
• max-height:300px là chiều cao tối đa

#Sử dụng khi viết bài

Khi muốn chèn code, bạn chọn thẻ HTML ở thanh công cụ rồi sử dụng đoạn html sau

<pre class="code">
Đặt code vào đây
</pre>

• Code cần được mã hóa trước khi đặt vào.
• Mẹo: Đặt code trên vào bình thường rồi chọn Viết, sau đó thay code vào dòng Đặt code vào đây