Chèn khung chứa code vào bài viết blogspot

Thủ thuật hỗ trợ chèn code vào bài viết trên blogspot. Khung chứa code hoạt động tương tự như blokquote, nhưng sự khác biệt là tính năng blockqoute thường chỉ là một màu và dùng cho các lưu ý và ghi chú trong Blog.

Còn đối với khung chứa code mình giới thiệu dưới đây hiển thị các dòng mã đa màu sắc trong một bài viết blog. Vậy làm thế nào để tạo một khung chứa code (mã) trong bài đăng Blogspot.

Cách chèn khung chứa code vào bài viết blogspot

1. Đăng nhập vào Blogger

2. Chọn Chủ đề ⇒ Chỉnh sửa HTML

3. Thêm mã CSS

Bước 1: Tìm dòng </head>

- Thêm vào trước nó đoạn code sau:

<style type='text/css'>
/* Khung chua code */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>

Bước 2: Tìm dòng </body>

- Thêm vào trước nó đoạn code sau:

<script type='text/javascript'>
//<![CDATA[
// Khung chua code
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Bước 3: Lưu Chủ đề 4. Sử dụng code cho bài viết.

<pre><code>__DÁN CODE CỦA BẠN VÀO ĐÂY__</code></pre>

Lưu ý: Code phải được mã hóa trước khi sử dụng

Cách mã hóa code

1. Thủ công:

Thay thế & thành &amp;

Thay thế ' thành &#039;

Thay thế " thành &quot;

Thay thế < thành &lt;

Thay thế > thành &gt;

* Mẹo thay nhanh: Paste code vào notepad

> Nhấn tổ hợp 2 phím Ctr+H

> Dòng đầu tiên gõ: < | Dòng thứ 2 gõ: &lt;

> Replace All.

> Tiếp tục Nhấn tổ hợp 2 phím Ctr+H

> Dòng đầu tiên gõ: > | Dòng thứ 2 gõ: &gt;

> Replace All.

2. Dùng web mã hóa:

- Truy cập trang: Mã hóa code

- Paste code cần mã hóa ô > Nhấn Convert > Lấy code đã mã hóa ở ô trên.