Tạo khung chứa code chuyên nghiệp và tuyệt đẹp cho Blogspot

Khi bạn muốn tạo một bài viết trên Blogspot, trong bài viết có chèn code của các loại ngôn ngữ lập trình như HTML, CSSL, Javascript, PHP, ... Điều này sẽ rất khó đối với các template blogspot truyền thống, các template đơn giản, chưa hỗ trợ. Không thể tạo giao diện bài viết một cách đẹp mắt cho người đọc được. Vậy bạn có muốn tạo một giao diện chia sẻ code chuyên nghiệp như thế này không?

Trong bài viết này tôi sẽ hướng dẫn các bạn cách tạo giao diện đẹp khung chứa đoạn code. Nếu chưa có blog thì các bạn truy cập bài viết hướng dẫn tạo blog ở link này: Tạo Blog cá nhân 

1. Tự tạo CSS (màu mè) cho giao diện Code 

* Cài đặt

Đầu tiên đăng nhập vào Blogger. Tiếp theo bạn vào tab Theme (chủ đề), và chọn Edit HTML. Nhấp vào khung soạn mã code, đồng thời nhấn tổ hợp phím Ctrl + F, nhập ]]></b:skin> vào khung tìm kiếm rồi Enter để tiến hành quá trình tìm kiếm.

Dán đoạn code dưới đây vào phía trên thẻ ]]></b:skin> .

pre code {
	max-height: 540px;
	overflow: auto;
	border: 1px solid #cccccc;
	padding: 1em;
	word-wrap: initial;
	background: #f5f2f0;
	display: block;
}
.post blockquote {
	padding: 0;
	margin: 0;
}
/*! highlight.js v9.1.0 | BSD3 License | git.io/hljslicense */
/* github.com style (c) Vasily Polovnyov */
.hljs {
	display: block;
	color: #333
}
.hljs-comment,
.hljs-quote {
	color: #998;
	font-style: italic
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
	color: #333;
	font-weight: 700
}
.hljs-literal,
.hljs-tag .hljs-attr,
.hljs-template-variable,
.hljs-variable {
	color: teal
}
.hljs-doctag,
.hljs-string {
	color: #d14
}
.hljs-section,
.hljs-selector-id,
.hljs-title {
	color: #900;
	font-weight: 700
}
.hljs-subst {
	font-weight: 400
}
.hljs-class .hljs-title,
.hljs-type {
	color: #458;
	font-weight: 700
}
.hljs-attribute,
.hljs-name,
.hljs-tag {
	color: navy;
	font-weight: 400
}
.hljs-meta,
.hljs-strong {
	font-weight: 700
}
.hljs-link,
.hljs-regexp {
	color: #009926
}
.hljs-bullet,
.hljs-symbol {
	color: #990073
}
.hljs-built_in,
.hljs-builtin-name {
	color: #0086b3
}
.hljs-meta {
	color: #999
}
.hljs-deletion {
	background: #fdd
}
.hljs-addition {
	background: #dfd
}
.hljs-emphasis {
	font-style: italic
}
pre.highlight {
	margin: 1em auto;
	padding: 0;
	position: relative;
	overflow: hidden;
}
pre.highlight code.hljs {
	position: relative;
	max-height: 540px;
	overflow: auto;
	border: 1px solid #ccc;
	padding: 22px 17px;
	word-wrap: initial;
	background: #f5f2f0;
	font-size: 15px;
}
pre.highlight:before {
	content: "Double Click To Select All";
	position: absolute;
	background: rgba(255, 255, 255, .8);
	right: 40px;
	top: -22px;
	padding: 3px 7px;
	color: #8D6E63;
	opacity: 0;
	-webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	font-family: monospace, lucida console, consolas, sans-serif;
	font-size: 13px;
	line-height: 15px;
	font-style: italic;
	z-index: 1000;
}
pre.highlight.hoverFired:before {
	opacity: 1!important;
	top: 1px;
} 

Tìm tiếp thẻ </body> và dán đoạn code bên dưới vào phía trên thẻ </body>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js" type="text/javascript">
<script>
$(document).ready(function() {
  $('pre.highlight code').each(function(i, block) {
    hljs.highlightBlock(block);
  });

// select all code on doubleclick
  $('pre.highlight').dblclick(function() {
    $(this).select();

    var text = this,
        range, selection;

    if (document.body.createTextRange) {
      range = document.body.createTextRange();
      range.moveToElementText(text);
      range.select();
    } else if (window.getSelection) {
      selection = window.getSelection();
      range = document.createRange();
      range.selectNodeContents(text);
      selection.removeAllRanges();
      selection.addRange(range);
    }

  });

  $("pre.highlight").mouseover(function() {
    $(this).addClass("hoverFired");
  }).mouseleave(function() {
    $(this).removeClass("hoverFired");
  });
});
</script>

Sau đó nhấp vào nút Save (lưu lại) là chúng ta đã tạo được giao diện hiển thị đẹp cho việc đính kèm code trên bài viết rùi nhé. 

* Cách dùng:

Điều hiển nhiên là sau khi tạo xong thì chúng ta phải lấy nó ra để sử dụng. Và cách sử dụng nó là như thế nào? 

Trong mỗi bài viết, nếu bạn cần chèn một đoạn code thì khi soạn thảo bạn phải chuyển sang chết độ HTML, và dán nội dung code vào cặp thẻ này:

<pre class="highlight"><code class="hljs xml">viết code tại đây</code></pre>

2. Sử dụng Highlight Js Plugin sẵn có

Lưu ý: chỉ được sử dụng 1 cách trong 2 cách, không nên dùng cả 2 cách 1 lượt nhé.

* Cài đặt

Cách này dùng plugin highlight.js có sẵn, nên sẽ đơn giản và nhanh chóng hơn cách đầu. Trước tiên các bạn vào Chủ đề \ Tuỳ chỉnh \ Chỉnh sửa HTML. Tiếp theo bạn tìm kiếm thẻ </body> (ở phần cuối), dán đoạn code này vào phía trên thẻ </body>.

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
//]]>
</script>

* Cách dùng:

Đối với code cần chia sẻ chỉ có HTML thì dùng đoạn mã này:

<pre class='html'><code>
	Your_code_here
</code></pre>

Đối với code cần chia sẻ chỉ có JS thì dùng đoạn mã này:

<pre class='js'><code>
	Your_code_here
</code></pre>

Đối với code cần chia sẻ chỉ có CSS thì dùng đoạn mã này:

<pre class='css'><code>
	Your_code_here
</code></pre>

Quá dễ dàng phải để có một giao diện chia sẻ code tuyệt đẹp trong bài viết phải không các bạn. Nếu các bạn làm có xảy ra lỗi hay có thắc mắc gì xin comment ngay bên dưới bài viết. 

Cám ơn các bạn đã xem bài viết. Chúc các bạn thành công!

Sunday, August 12, 2018