Tạo khung chứa code đẹp - Prism Syntax Highlighter cho Blogger

Prism Syntax Highlighter for Blogger

Đối với những website hay chia sẻ thủ thuật thì thẻ pre hay code chắc đã khá quen thuộc. Việc sử dụng chúng thường xuyên nên Iris Tips thiết nghĩ việc trang trí cho những thẻ này trông bắt mắt hơn cũng khá quan trọng đấy. Bài viết sau đây sẽ hướng dẫn cho các bạn điều đấy, hãy cũng theo dõi nhé.

Cách thực hiện

1Vào Chủ đề >> Chỉnh sửa HTML, thêm đoạn code dưới đây trước thẻ ]]></b:skin>

/* CSS Prism Syntax Highlighter Iris Tisp */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#2c323c;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar{display:none}
pre::before{font-size:15px;font-family:'Open Sans';content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#fff;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#fff;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important{font-weight:bold}
code .token.entity{cursor:help}
pre mark,code mark,pre code mark{background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px}
pre[data-codetype='CSS']:before{background-color:#00a1d7}
pre[data-codetype='HTML']:before{background-color:#3cc888}
pre[data-codetype='JavaScript']:before{background-color:#75d6d0}
pre[data-codetype='JQuery']:before{background-color:#e5b460}

2Thêm thư viện Font-Awesome nếu blog bạn chưa có, bằng cách thêm đoạn code dưới đây trước thẻ </head>

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

3Cú pháp khi viết bài

<pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup"> ... Your HTML (already escaped) put here ... </code></pre>

<pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css"> ... Your CSS put here ... </code></pre>

<pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript"> ... Your JavaScript put here ... </code></pre>

<pre class="line-numbers language-javascript" data-codetype="JQuery" title="jQuery"><code class=" language-javascript"> ... Your jQuery put here ... </code></pre>

<pre class="line-numbers language-javascript" data-codetype="Script" title="Script"><code class=" language-javascript"> ... Your Script put here ... </code></pre> 

• DEMO

4Phiên bản nâng cấp

Xem thêm: Double click để chọn toàn bộ vùng chứa code trong Blogger

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm