Code Khung Viền Chứa Code HTML Cho Blogspot - NNQ

Xin chào các bạn, hôm nay mình chia sẽ khung viền chứa code html cho các bạn chưa biết, cái này mình lượm trên google nhưng chả nhớ nguồn bạn nào có nguồn bài thì comment bên dưới mình sẽ thêm nguồn vào bài viết này nhà.

Ảnh Minh Họa

CÁC BƯỚC THỰC HIỆN

Bước 1 : chèn đoạn code bên dưới trước thẻ *]]></b:skin>*

/*Mẫu khung chứa code đẹp*/
pre.code {
display: block;
font: 1em 'Courier New', Fixed, monospace;
font-size: 100%;
color: #7DB9EF;
background: #A349A3;
overflow: auto;
text-align: left;
border: 1px solid #EFE3AF;
padding: 0px 20px 0 30px;
margin: 1em 0 1em 0;
line-height: 18px;
max-height:450px}

Sau đó hãy trang trí màu khung, màu đường viền khung, màu chữ code trong khung theo sở thích của mỗi người. Dưới đây là một số màu có thể lựa chọn

• Background: #A349A3 Nền của khung chứa code màu
• hồng nhạt
• Color: #7DB9EF Màu chữ code trong khung là xanh
• da trời
• Border: 1px solid #EFE3AF; Màu đường viền khung là màu
• vàng gạch

CÁCH thao tác :

Các bạn muốn nó hiện thị trong bài viết của các bạn thì, lúc dán code thì các bạn chuyển sang chế độ HTML
và dán đoạn code bên dưới vào vị trí muốn nó hiển thị khung code

<pre class='code'>
đặt code của bạn vào đây
</pre>

Ảnh Minh Họa