Chèn Code vào bài viết

Kiểu 1

Bước 1: Vào http://blogcrowds.com/resources/parse_html.php

Bước 2: Patse ( Dán) đoạn code của bạn vào ô trống

Bước 3: Bấm nút đỏ Parse

Bước 4: Copy và dán đoạn code vào bài viết của bạn.

Kiểu này có thể hiếu là dùng một trang web trung gian giúp bạn chuyển đổi ( mã hóa) đoạn code bạn đang cần chèn vào bài viết của mình. Cách này đơn giản nhưng có hạn chế của nó, nếu bạn cá tính thì nó không phù hợp vì nó quá đơn giản. Còn nếu bạn là người không thích màu mè thì như thế cũng đủ rồi.

Nếu bạn chưa hài lòng? không sao bạn có thể tham khảo cách trang trí thêm ở đây Bấm vào đây để xem thêm

Kiểu 2

Thực hiện

Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)
Nhấn tổ hợp phím Ctrl +F và thực hiện theo các bước sau:

Bước 1: Tìm dòng ]]></b:skin>
và chèn trước nó đoạn code sau và tùy biến nó thế nào thì tùy bạn

.pre-formatting{
color: #333333;
background: #999999;
border: 2px solid #999999;
overflow: auto;
font-family: "Tahoma", Tahoma;
padding: 10px;
}

Bước 2: Save template ( Lưu mẫu )

Cách sử dụng:
Để code xuất hiện mang thuộc tính của CSS đã lưu trước đó chúng ta sẽ sử dụng chế độ HTML để soạn bài và đặt code như sau:

<pre style="height: 100px;" class="pre-formatting">Code</pre>

Câu hỏi đặt ra ở đây là chúng ta đã dùng class pre-formatting, vậy tại sao phải thêm CSS điều khiển height (chiều cao của khung), có dư thừa chăng? Câu trả lời phụ thuộc vào đoạn code mà bạn dùng. Nếu đoạn code đó ngắn bạn chọn giá trị chiều cao khung nhỏ và ngược lại, không nhất thiết phải thêm vào CSS của template vì chúng ta không biết trước đoạn code mỗi lần dùng. Không dư thừa chút nào!

Cũng xin lưu ý bạn phải chuyển đổi các ký tự đặc biệt thành mã HTML (ví dụ: < thành < và > thành>) trước khi đặt giữa hai thẻ trên. Và mách nhỏ hãy lưu đoạn code đó vào Post Template (Mẫu đăng bài) trong Settings (Cài đặt) | Formatting (Đang định dạng) để không cần phải gõ mỗi lần dùng.

Kiểu 3

Thực hiện
Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)
Nhấn tổ hợp phím Ctrl +F và thực hiện theo các bước sau:

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:

<pre>
... code ...
</pre>

Hoặc:

<code>
... code ...
</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;
}

( Nguồn Thuthuatblog.com )

Tới đây, bạn sẽ nghĩ rằng có kiểu nào khác không? Bạn yên tâm, với mỗi thủ thuật tôi viết lại, tôi đã check và nhận thấy cách làm như vậy bạn sẽ dễ tiếp cận và thực hiện đơn giản nhất.
Bạn có thể tham khảo bài viết Chèn code vào bài viết + trang trí cho khung hiển thị code của tác giả Fandung, 1 Blogger uy tín và cách hướng dẫn cũng rất dễ hiểu và đơn giản khi áp dụng.