Cách tạo khung chứa code cho bài viết trên Blogspot

Nếu bạn có một blog hay viết bài về các thủ thuật liên quan đến việc chia sẻ code, chẳng hạn như thủ thuật Blogspot, thủ thuật WordPress, lập trình,…tóm lại nội dung bài viết của bạn bao gồm một hoặc nhiều đoạn code mà bạn muốn chia sẻ cho người đọc xem, copy và sử dụng…
Nhưng bạn biết đấy, một đoạn mã code sẽ không thể viết và xuất bản bình thường như văn bản thông thường được,vì đó là code lập trình nên nó có thể nó sẽ được áp dụng, được mã hóa luôn sau khi nội dung được xuất bản, tức là sau khi xuất bản code đó sẽ không còn nguyên code mình muốn chia sẻ, nếu còn thì cũng rất khó cho người đọc copy và sử dụng.
Vậy làm thế nào để có thể chia sẻ code trong bài viết để khi xuất bản vẫn giữ nguyên được code gốc, người đọc có thể copy và sử dụng bình thường? Hãy tạo khung chứa code cho bài viết, nếu bạn sử dụng Blogspot thì hãy làm theo hướng dẫn sau đây.
Đầu tiên bạn hãy vào “Chủ đề” rồi vào “Chỉnh sửa HTML“, sau đó sao chép đoạn code sau để chèn vào vị trí trước thẻ  ]]></b:skin>.
Đoạn code cần dùng:

/*khung chua code*/ pre.code { display: block; font: 1em 'Courier New', Fixed, monospace; font-size: 100%; <span style="color: #ff0000;">color: #666666;</span> <span style="color: #ff0000;">background: #e8ffe1;</span> overflow: auto; text-align: left; <span style="color: #ff0000;">border: 1px solid #99cc66;</span> margin: 1em 0 1em 0; line-height: 17px; <span style="color: #ff0000;">max-height:300px}</span>

1 2 3 4 5 6 7 8 9 10 11 12 13

/*khung chua code*/ pre.code { display: block; font: 1em 'Courier New', Fixed, monospace; font-size: 100%; <span style="color: #ff0000;">color: #666666;</span> <span style="color: #ff0000;">background: #e8ffe1;</span> overflow: auto; text-align: left; <span style="color: #ff0000;">border: 1px solid #99cc66;</span> margin: 1em 0 1em 0; line-height: 17px; <span style="color: #ff0000;">max-height:300px}</span>

Bạn có thể chỉnh sửa một số thông số như sau:

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

Đã xong, bây giờ bạn cứ vào viết bài bình thường, mỗi khi cần chèn code vào bài viết bạn chỉ cần chuyển sang chế độ soạn thảo HTML rồi chèn đoạn code sau vào vị trí muốn đặt code.

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

1 2 3

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

Dán đoạn code bạn muốn chia sẻ vào vị trí “Đặt code vào đây“.
Thành quả có dạng như hình ảnh sau:

Thôi xong! Quá đơn giản phải không nào? Nếu có gì thắc mắc hãy để lại bình luận phía bên dưới nhé! Chúc các bạn thành công nhé!