Khi tham khảo để tạo một số hiệu ứng mới cho website, các bạn thường hay thấy những đoạn code được đóng khung rất đẹp. Bài viết này sẽ hướng dẫn các bạn thực hiện nó ngay trên website của mình tuyệt đẹp. Mục đích giúp người đọc biết đâu là code, đâu là nội dung bình thường.


Dưới đây là các bước thực hiện:

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 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:

<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:

<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. 

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.

Theo Blog Anh Nhím

Tags: