Hướng dẫn tạo khung chứa code trong bài viết Blogspot

Nếu bạn là một blogger chuyên chia sẻ các thủ thuật lập trình, thủ thuật Blogspot, WordPress hay những bài viết có chứa đoạn mã code, thì việc trình bày code một cách rõ ràng và dễ copy là rất quan trọng.

Bạn có thể đã nhận thấy rằng khi viết và xuất bản bài viết trên Blogspot, mã code thường không hiển thị đúng cách hoặc bị mã hóa. Điều này khiến người đọc khó copy hoặc sử dụng đoạn code bạn chia sẻ. Vậy làm thế nào để giải quyết vấn đề này?

Trong bài viết này, mình sẽ hướng dẫn bạn cách tạo một khung chứa code trong bài viết Blogspot, giúp mã code được hiển thị đúng định dạng, dễ nhìn và người đọc có thể sao chép dễ dàng.

Bước 1: Tùy chỉnh HTML của Blogspot

  1. Vào phần Chủ đềChỉnh sửa HTML.
  2. Tìm đến đoạn mã trước thẻ ]]></b:skin> và dán đoạn CSS dưới đây vào:
css
/* Khung chứa mã code */ pre.code { display: block; font: 1em 'Courier New', Fixed, monospace; font-size: 100%; color: #666666; /* Màu chữ */ background: #fff; /* Màu nền */ overflow: auto; text-align: left; border: 1px solid #99cc66; /* Đường viền */ padding: 0px 20px 0 30px; /* Khoảng cách trong khung */ margin: 1em 0; line-height: 17px; max-height: 300px; /* Chiều cao tối đa */ }

Chú thích:

  • color: #666666; — Màu chữ trong khung.
  • background: #fff; — Màu nền của khung.
  • border: 1px solid #99cc66; — Độ rộng và màu của đường viền.
  • max-height: 300px; — Giới hạn chiều cao khung (nếu code dài hơn, sẽ có thanh cuộn).

Bước 2: Chèn code vào bài viết

  1. Khi viết bài, chuyển sang chế độ soạn thảo HTML.
  2. Ở vị trí muốn chèn mã code, dán đoạn sau:
html
<pre class="code">Dán code vào đây</pre>
  1. Thay "Dán code vào đây" bằng đoạn mã bạn muốn chia sẻ.

Kết quả

Sau khi xuất bản, đoạn mã sẽ được hiển thị trong khung như thế này:

html
<pre class="code">alert('Hello, World!');</pre>

Khung code sẽ hiển thị rõ ràng, dễ đọc, và người dùng có thể copy trực tiếp để sử dụng.

Lợi ích của khung chứa code

  • Giữ nguyên định dạng gốc của mã lập trình.
  • Hiển thị mã code một cách rõ ràng, đẹp mắt.
  • Tăng trải nghiệm người đọc, dễ dàng sao chép và áp dụng.

Kết luận

Chỉ với vài bước đơn giản, bạn đã có thể tạo một khung chứa code chuyên nghiệp cho bài viết của mình trên Blogspot. Nếu bạn gặp bất kỳ khó khăn nào, đừng ngần ngại để lại bình luận bên dưới nhé!

Chúc bạn thành công! 😊