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
- Vào phần Chủ đề → Chỉnh sửa HTML.
- Tìm đến đoạn mã trước thẻ
]]></b:skin>
và dán đoạn CSS dưới đây vào:
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
- Khi viết bài, chuyển sang chế độ soạn thảo HTML.
- Ở vị trí muốn chèn mã code, dán đoạn sau:
- 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:
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! 😊