Tạo khung Code đẹp cho blogspot

Đối với các Blogger thuộc Công nghệ thì việc share các đoạn code là chuyện ngày thường phải làm. Nhưng khi chèn vào bài viết thì sao. Ta có thể đóng khung nó lại, hoặc để chú thích, trích dẫn nhưng như vậy sẽ làm Blog không khoa học. Hôm nay WixLog sẽ hướng dẫn các bạn tạo khung chứa code cực ngầu, rất đẹp cho blogger - blospot.

Mục Đích

    Tạo tính khoa học, chuyên nghiệp cho Blog, hơn thế nữa giúp cho người đọc, biết đâu là code, đâu là câu viết bình thường.
Khung code rất đẹp, tạo sự thích thú cho người đọc, làm tăng lượt view cho Blog, giúp cho việc phát triển Blog hơn.

Bắt đầu

    Khung code có hai màu là đen và trắng nên các bạn chọn cho phù hợp với blog của mình

Màu Trắng

Bước 1

    Các bạn vào Blogger ---> Mẫu---> Chỉnh sửa HTML, sau đó các bạn chép lại đoạn css sau vào trước thẻ ]]></b:skin> hoặc </style>.

/* 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 2

Bây giờ bạn copy đoạn code Javascript "JS" bên dưới và paste 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>

Bước 3

Các bạn Save Template (Lưu Mẫu) lại.

Bước 4

Để dùng thì các bạn dùng đoạn code html sau khi viết bài viết(chuyển sang chế dộ html rồi chép 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>

Màu Đen

Bước 1

Các bạn làm y như mẫu trắng, thay vào đó các bạn thay đoạn css của trắng bằng đen sau:

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

Các bước còn lại giống như Màu Trắng nhé.

Nâng Cao

Để thay đổi màu chữ cho từng dạng code thì các bạn tìm đoạn CSS sau trên mẫu mà bạn chọn.

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