Viết code trong khung comment bằng cách đơn giản nhất

Viết code trong khung comment của Blogger không phải là một thủ thuật gì mới lạ. Tuy nhiên bằng cách nào để làm điều này dễ nhất thì không phải ai cũng biết cách làm. Với 3 dòng mã CSS bạn có thể nhúng những đoạn code nhỏ vào khung comment của Blogger rất nhanh và thoải mái. Tuy nhiên HHV sẽ cung cấp đoạn mã này ở cuối bài viết.

1. Chèn code trong bài viết của Blogger

Mở rộng thêm một chút về cách chèn code (CSS/HTML/PHP/Javascript…) vào bài viết của Blogger. Thông thường khi viết bài ở chế độ chỉnh sửa HTML thì chúng ta không thể chép đoạn code trực tiếp vào khung soạn thảo vì blogger sẽ hiểu rằng đó là một đoạn mã vì vậy ta mới có công cụ chuyển mã Code Converter mà tôi cung cấp ở đây. Anh em chỉ cần copy đoạn mã cần chuyển dán vào nhấn Convert thì đoạn mã dạng text sẽ chuyển thành dạng HTML. Lúc đó bạn có thể cắt dán trực tiếp vào khung soạn thảo. Sau đó nhớ thêm vào cho nó thẻ <pre>

Để dễ dàng trang trí và làm cho code mang dáng vẻ… mã một chút thì thường người ta sẽ dùng font chữ Courier. Lý do dùng font này vì nó phân biệt được sự khác biệt giữa các ký tự gần giống nhau như: i l 1…

Nếu blog bạn chưa có thì cũng nên thêm đoạn mã CSS này vào để dùng khi cần chèn code vào bài viết.

pre{
background:#e9e9e9;
width:auto!important;
max-height:480px;
overflow:auto; 
margin:10px 0; 
padding:7px; 
border:3px dotted #c9c9c9; 
font-family:"Courier New",monospace; 
font-size:15px;color:#666
}

Anh em sẽ thấy một số các mã ký tự trong bài này được trang trí background màu vàng và font chữ courier. Đó là vì các ký tự hoặc đoạn mã con con này được gắn thẻ <code>. VD <code><ul> <li> <a></code>. Muốn được như vậy bạn thêm vào đoạn code CSS sau.

code {
background: #F6F1BA; 
padding: 2px 5px;   
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-ms-border-radius:3px;
border-radius:3px;
font-family:"Courier New",monospace; 
font-size:15px; 
color:#222;}

2. Chèn code trong khung comment của Blogger

Tuy nhiên phương pháp trên lại không hề hữu dụng khi viết một đoạn code vào trong khung comment của Blogger. Blogger Team cho rằng điều này không cần thiết và họ giới hạn người dùng một số thẻ mặt định đó là thẻ: <a> <b> <i> <strong> <em>.

Khi đọc qua phần 1 thì ai cũng hiểu về căn bản thì việc trang trí đoạn code chỉ là mã CSS. Như vậy chúng ta có thể “hy sinh” một trong năm thẻ trên để làm thay công việc của thẻ code hoặc pre. Ta cần trang trí CSS cho nó giống như thẻ code nữa là xong. Đây làm cách làm hết sức đơn giản nhưng cực kỳ thông minh. Hy vọng sẽ đẹm lại cho các bạn chút niềm vui nho nhỏ khi  viết blog.

.comment-body p em, code {
background: #F6F1BA; 
padding: 2px 5px;   
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-ms-border-radius:3px;
border-radius:3px;
font-family:"Courier New",monospace; 
font-size:15px; 
color:#222;}

Hồng Hòa Vi

Nguồn nguoiaolam.net