[TinHoc-Web] @Blogspot06 - Cách thêm khung chứa code.

CÁCH 1: Cơ bản.

#1. Chỉ cần dán đoạn code này vào trên thẻ ]]></b:skin>

/*khung chua code*/
pre.code {
display: block;
font: 1em 'Courier New', Fixed, monospace;
font-size: 100%;
color: #666666;
background: #fff ;
overflow: auto;
text-align: left;
border: 1px solid #99cc66; 
padding: 0px 20px 0 30px;
margin: 1em 0 1em 0;
line-height: 17px;
max-height:300px}

# Trong Đó:

• color: #666666 - Là màu chữ trong khung.
• background: #fff - Là màu nền của khung.
• border: 1px solid #99cc66; - Là độ rộng đường viền(1px) và màu đường viền(#99cc66).
• max-height:300px - Là chiều cao tối đa.

#2. Cách sử dụng khi viết bài
Khi muốn chèn code, bạn dùng thẻ HTML ở thanh công cụ rồi sử dụng đoạn html sau.

<pre class="code">
Đặt code vào đây
</pre>

CÁCH 2: Nâng cao

Bước 1: Mở Chủ đề, sau đó vào chế độ Chỉnh sửa HTML.
Bước 2: Tìm ]]></b:skin>, sau đó chèn vào bên trên đoạn code dưới đây:

👉 CSS 

/* CSS Simple Pre Code */ 
pre{background:#fff;white-space:pre;word-wrap:break-word;overflow:auto} 
pre.code{margin:20px 25px;border:1px solid #d9d9d9;border-radius:2px;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.08)} 
pre.code label{font-family:sans-serif;font-weight:normal;font-size:13px;color:#444;position:absolute;left:1px;top:16px;text-align:center;width:60px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none} 
pre.code code{font-family:"Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;display:block;margin:0 0 0 60px;padding:15px 16px 14px;border-left:1px solid #d9d9d9;overflow-x:auto;font-size:13px;line-height:19px;color:#444} 
pre::after{content:"double click to selection";padding:0;width:auto;height:auto;position:absolute;right:18px;top:14px;font-size:12px;color:#aaa;line-height:20px;overflow:hidden;-webkit-backface-visibility:hidden;transition:all 0.3s ease} 
pre:hover::after{opacity:0;visibility:visible} 
pre.code-css code{color:#0288d1} 
pre.code-html code{color:#558b2f} 
pre.code-javascript code{color:#f57c00} 
pre.code-jquery code{color:#78909c}

Bước 3: Tìm </body> và chèn vào bên trên đoạn code dưới đây:

👉 JS

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
 $('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Bước 4: Nhấp Lưu chủ đề và để dùng, các bạn chuyển chế độ viết bài sang dạng html với các đoạn sau:

👉 HTML

<pre class='code code-html'><label>HTML</label><code>... Để Code HTML ở đây ...</code></pre>
<pre class='code code-css'><label>CSS</label><code>... Để Code CSS ở đây...</code></pre>
<pre class='code code-javascript'><label>JS</label><code>... Để Code JavaScript ở đây...</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>... Để Code jQuery ở đây...</code></pre>

Lưu ý: 
Để đổi màu chữ cho từng dạng code, bạn tìm những đoạn code dưới đây và mã đổi màu.

👉 CSS 

pre.code-css code{color:#91a7ff}
pre.code-html code{color:#aed581}
pre.code-javascript code{color:#ffa726}
pre.code-jquery code{color:#4dd0e1}

Lời kết
Việc tạo khung chứa code khá dễ chịu, có nhiều cách hướng dẫn khác nhau. Tuy nhiên, mỗi một template tương thích với những đoạn code khác nhau. Chỉ cần tìm hiểu một số chức năng của một số đoạn code, bạn có thể tạo ra những khung chứa riêng phù hợp cho mình.

Chúc các bạn thành công!