Khung chèn CODE đẹp

bùi sang thọ | 18.3.15 | Blog |

Bài viết chia sẻ cách tạo khung code giống như trong blog cho những bạn nào cần.

Ví dụ chính là đoạn code được chèn trong bài này. Ưu điểm là chuyển qua chuyển lại giưa chế độ HTML và chế độ viết thông thường không ảnh hưởng đến nó. Để làm như thế, bạn thực hiện theo các bước sau

Bước 1. Tìm đến thẻ

]]></b:skin>

Bước 2. Thêm đoạn code sau vào TRƯỚC nó

.code {
    position:relative;
    padding: 9.5px;
    margin:1em auto 1.5em auto;
    color:#333;
    background:#f5f5f5;
 border: 1px solid #999;
 border-radius: 4px;
 font-family: monospace !important;
 text-decoration: none!;
 overflow-x: auto;
 max-width: 695px;
 white-space: nowrap;
}

Kể từ bước 3 là bạn sẽ sử dụng mỗi khi cần chèn code vào blog

Bước 3. Copy đoạn code cần chèn rồi vào trang này để dàn vào, sau đó chọn ngôn ngữ hiển thị ở mục LANGUAGE. Bạn có thể chọn thêm một sô tuỳ chọn khác nếu muốn. Sau đó nhấn nút Highlight!

Bước 4. Trong mục Preview sẽ có đoạn code đã được tô màu hoàn chỉnh theo ngôn ngữ mà bạn đã chọn. Tiến hành quét khối hết đoạn code đó và copy. Bước này mục đích là giúp bạn copy được cái màu của code.

Bước 5. Trong phần viết bài chế độ bình thường, bạn gõ "abc" ngay chỗ cần chèn code. Quét khối abc và chọn canh đều (justify). Sau đó chuyển sang chế độ HTML, đi đến phần abc, bạn sẽ thấy giống như bên dưới

<div style="text-align:justify;">
abc
</div>

Bước 6. thêm class="code" vào như bên dưới

<div class="code" style="text-align:justify;">
abc
</div>

Bước 7. Chuyển qua chế độ viết bình thường, quét khối abc và dán đoạn code mà bạn đã copy ở Bước 4 vào chỗ abc. Lưu ý là trước và sau đoạn code ở bước 6 không cần có dòng trắng nào vì đoạn css đã tự cách ra một khoảng trước và sau khung code.

Bước 8. Xong!

Bài viết đăng lại từ trang http://www.math2it.com/