[ Blogger ] Làm thế nào để tạo khung chèn Code đẹp vào Blogger

Đối với những bạn bè là bogger của tôi thì họ đã quá thành thạo về việc chèn những đoạn code là HTML, Javascript, CSS và Jquery vào blogspot nhưng với một số bạn là beginner thì công việc này thật khó khăn và đoạn code của họ hiển thị vào bài viết trông thật "ngộ nghĩnh" và không đẹp mắt một chút nào cả.Ví dụ đoạn code như dưới đây của mình.

Trong bài viết này của mình một hướng dẫn nhỏ sẽ giúp bạn có được những khung hiển thị code một cách đơn giản mà đẹp độc đáo.

Và bây giờ bạn hãy làm theo những bước đơn giản dưới đây để có một khung hiển thị code hoàn hảo cho blog của bạn

1. Hãy vào Blogger.com → Blog của bạn → Teamplate → Edit HTML rồi copy và dán đoạn code bên dưới của mình vào trước thẻ ]]></b:skin> hoặc </style>

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;
}

2. Tiếp theo hãy lưu đoạn mã bên dưới phía trước thẻ </body>

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>

Các script function ở trên sẽ tự động chọn tất cả đoạn code trong bài viết của bạn mỗi khi người đọc double click vào khu vực được bao bọc bởi các thẻ wrapped, pre, tag, kbd, và blockquote. Sau đó lưu mẫu của bạn lại

3. Quay trở lại phần bài viết chuyển sang tab HTML và thêm những đoạn code phù hợp bên dưới vào mỗi phần bài viết của bạn.

HTML<pre class='code code-html'><label>HTML</label><code>...Code HTML của bạn...</code></pre>

<pre class='code code-css'><label>CSS</label><code>...Code CSS của bạn...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... Code Javácript của bạn...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... Code Jquery của bạn...</code></pre>

Nếu bạn không thích backgroud của khung code màu trắng thì hãy thay đoạn CSS ở trên bài viết bằng đoạn CSS ở dưới đây.

CSS/* CSS Simple Pre Code */
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    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 #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    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: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}

Thật đơn giản để bạn có những khung chèn code đẹp độc đáo phải không ạ. Chúc bạn thành công.

Nguồn : Đây