ĐẶT CODE TRONG KHUNG BÀI VIẾT MỘT CÁCH CHUYÊN NGHIỆP.

Thứ Bảy, 21 tháng 12, 2013

Bài viết hướng dẫn về cách đặt CODE trong các khung trang trí đã được rất nhiều weblog đăng tải rồi. Nói chung là có rất nhiều mẫu khác nhau nhưng về cơ bản cách làm thì hầu như là giống nhau. Share All World xin giới thiệu với các bạn một cách trình bày code mà theo tôi thấy là đẹp, đơn giản,chuyên nghiệp và đang được áp dụng trong Share All World.

Tạo CSS điều khiển thuộc tính khung chứa code
Trước tiên, chúng ta tạo ra một class mới chứa các thuộc tính của khung hiển thị code và đặt chúng vào trong CSS của template (đặt trước thẻ ]]></b:skin>). Đoạn CSS này sẽ đi kèm thẻ pre hoặc thẻ code như đoạn code mà tôi đang sử dụng dưới đây:

pre, code {   display:block;   max-height:350px; min-height:45px;   font: 1em 'Courier New', Fixed, monospace;   font-size : 100%;   color: #666666;   background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY-K6sX-9HLrh9f7RUN8VL-V9s35zWHSpyNjIB6Gu4Q0PBjs0EHKCNiJfa8GdiwJNA4sqtBgJFQtDS75ySE046V6udm7wLu2OwZ9JtuWp9HIRjLHvkL0MN9McT6mnZJT7bRp6RrGo67Qo/s1600/Code-form-1.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; }

Lưu ý: các thuộc tính max-height, min-height để quy định chiều cao tối đa,tối thiểu của khung. Nếu số dòng vượt quá max-height thì khung sẽ tự tạo scroll bar.

Cách sử dụng
Khi sử dụng trong bài viết, chúng ta chỉ cần đặt code theo một trong 2 cách:
- Giữa thẻ <pre>