Nhiều bạn thích chia sẻ code trên Blogger nhưng không có khung chứa code. Như vậy sẽ không được chuyên nghiệp cho lắm. Vinll sẽ hướng dẫn các bạn cách tạo khung chứa code giống như Vinll đang dùng. Với cách làm này đoạn code hiển thị sẽ trông dễ nhìn hơn và người đọc dễ sao chép đoạn code khi muốn sử dụng.
Cách tạo khung chứa code chuyên nghiệp cho Blogger
Bước 1: Truy cập vào Blogger chọn Chủ đề -> Chỉnh sửa HTMLBước 2: Sử dụng tổ hợp phím Ctrl + F tìm thẻ </b:skin>
Bước 3: Thêm đoạn code dưới đây vào trước thẻ ]]></b:skin>
Khung chứa code mẫu trắng Demo
/* 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;
}Khung chưa code mẫu đen Demo
/* 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;
}3. Sau đó các bạn copy đoạn Javascript bên dưới rồi dán vào trước thẻ </body>
<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>4. Sau đó lưu lại và bạn đã hoàn tất cách tạo khung chứa code cho Blogger.
5. Để sử dụng thì các bạn cần dùng đoạn code html dưới đây trong khi viết bài (chuyển sang chế dộ HTML rồi copy vào)
<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 ý: Bạn cần paste code cần chứa trong khung vào trong chế độ Viết rồi sau đó mới chuyển sang chế độ HTML và dùng code pre ở trên.
Chúc các bạn thành công! Nếu có bạn nào không làm được có thể để lại bình luận bên dưới. Vinll sẽ cố gắng trả lời bạn sớm nhất có thể trong khả năng của Vinll.
Tags:
thu-thuat-blogspot
