Hướng dẫn đặt code HTML,CSS,PHP vào trong khung bài viết của Blogspot

 

Bài viết này mình hướng dẫn về cách đặt CODE trong các khung để cho người đọc dễ dàng nhận biết. 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, phần này mình xin giới thiệu với các bạn một cách trình bày code mà theo mình thấy là đẹp, đơn giản, dễ nhận biết vì có thêm đánh số và mình cũng đang dùng code này.

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/AVvXsEhSwtMFDqksaCrbjZ0kcFu-Gta2aha9dSAma0n2jz06Sxta_KjLWXY6GYDpNF3xqBfP0X4tuqUzQjB_w6JUXe1nc5RhPNBHrqkEy-NcyPd4V5fS5xWet5mL4rjhu-rP-FtqSsuPM_Q1RBA/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 và bạn có thể thay đổi nó theo ý muốn.

Cách sử dụng
Khi sử dụng trong bài viết, bạn viết bài bình thường, đến khi bạn ghi hết 1 đoạn code song vào phần HTML của bài viết thêm <pre> (có thể dùng <code>  nhé) vào đầu nội dung mã code và thêm </pre> ở dòng cuối của đoạn code là ok

- Giữa thẻ <pre>

< pre>
...Code....
< /pre>

hoặc giữa thẻ <code>
< code>
...Code...
< /code>