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.
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;
} <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>* 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>Cám ơn các bạn đã xem bài viết. Chúc các bạn thành công!
Tags:
Blogger