Tạo khung chứa code đẹp có bo tròn cho bài đăng

Ở bài trước mình đã chia sẽ về cách tạo một khung chứa code đẹp mắt kèm nút copy cho bài đăng. Các bạn có thể tìm lại đọc và tham kảo thêm ở đây nhé:  Cách tạo khung chứa code kèm nút copy vào bài viết

Ở bài này mình sẽ giới thiệu một kiểu khung chứa code nhỏ gọn gàng kèm theo bo tròn các góc rất đẹp

Khung chứa code đẹp có bo tròn cho bài đăng 

1. Cách chèn

Cách tạo cũng khá đơn giản như sau: Sau khi các bạn viết bài đăng chia sẽ kèm theo các đoạn code cần chèn vào. Lúc này các bạn vẫn soạn thảo như bình thường ở khung bài đăng. Rồi các bạn chuyển sang khung soạn thảo html và chèn đoạn code ở bên dưới lên đầu và cuối đoạn code cần tạo khung nhé

<div style="background-color: #f4f4f4; border-color: gray; border-radius: 5px; border-style: solid; border-width: 1px; cursor: text; font-family: consolas,'Courier New',courier,monospace; line-height: 12pt; margin: 20px 0px 10px; max-height: 500px; overflow: auto; padding: 4px; width: 97.5%;">
<! code chen vao blog  >
</div>

Lưu lại và hoàn tất

2. Một vài lưu ý thêm:

-Đoạn code mà các bạn cần chèn vào nằm ở vị trí bôi xanh
-Phần bo tròn có thể tùy chỉnh tùy theo ý muốn của các bạn. Ở đây mình để mặc định là 5px
border-radius: 5px

-Để chèn nhanh chóng và chính xác, các bạn có thể quét vùng đoạn code cần tạo khung rồi chọn mục trích dẫn. Xong khi chuyển qua các bạn cứ tìm đến thẻ có chữ < block quote> Đoạn Code</ block quote> để thay thế thôi
-Mặc định màu nền là màu xám dễ nhìn với mã màu #f4f4f4. Nếu khéo léo các bạn có thể tùy chỉnh sang mã màu mà các bạn thích cho phần bài đăng thêm sinh động
-Để tránh bị lỗi font, trong phần font-family các bạn để mặc định hoặc chỉ chọn mỗi font monopace thôi nhé
-Nếu trên bài đăng không cần giới hạn về bố cục không gian có thể để max-height : 100%

Các bạn có thể áp dụng cách này để tạo các dòng thông báo hay các phần kết luận quan trọng khác của chuyên mục. Điều này sẽ làm cho bài đăng thêm sinh động và có điểm  nhấn quan trọng khiến độc giả chú tâm hơn vào nội dung

CHỉ một tùy biến nho nhỏ là các bạn sẽ có một đoạn văn bản thông báo hay đoạn trích dẫn quan trọng được làm nổi bật như trên. Code cho đoạn tùy biến như trên ở bên dưới nhé:

<div style="background-color: #b79ab7; border-color: gray; border-radius: 2px; border-style: solid; border-width: 1px; cursor: text; font-family: monospace; line-height: 12pt; margin: 20px 0px 10px; max-height:500px; max-width: 100%; overflow: auto; padding: 4px;">
<! đoạn văn bản thông báo quan trọng  >
</div>