17:02 - 24/6/18 / 1 nhận xét

Tạo khung chứa code đẹp cho blogspot

Hôm nay mình sẽ giới thiệu cho các bạn khung chứa code tuyệt đẹp, còn có thêm chức năng double click to selection.
Các bạn có thể xem demo trực tiếp ở ngay trên blog
Các bước thực hiện
Chèn đoạn CSS này lên trước thẻ ]]></b:skin>

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::after{content:'Double click to selection';font-size:13px;padding:2px 5px;width:auto;height:auto;font-family:monospace;position:absolute;right:8px;top:8px;color:#FFFFFF;background-color:none;transition:all 0.3s ease-in-out}
pre:hover::after{opacity:0;top:-8px;visibility:visible}
pre[data-code='CSS']:before{background-color:#00a1d7}
pre[data-code='HTML']:before{background-color:#3cc888}
pre[data-code='JavaScript']:before{background-color:#75d6d0}
pre[data-code='JQuery']:before{background-color:#e5b460}

Trên đây là css chỉ để tạo ra khung, chưa có chức năng double click to selection, nếu bạn nào muốn chức năng này thì chèn tiếp đoạn js này lên trên thẻ đóng </body>

<script type='text/javascript'>
//<![CDATA[
for(var pres=document.getElementsByTagName("pre"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var a=getSelection(),b=document.createRange();b.selectNodeContents(this);a.removeAllRanges();a.addRange(b)},!1);
//]]>
</script>

Cách sử dụng
Khi viết bài, các bạn chuyển qua tab HTML và dán đoạn code này:

1. HTML (đã được mã hóa)

<pre data-code="HTML" title="HTML"><code> ... Your HTML (already escaped) put here ... </code></pre>

2. CSS

<pre data-code="CSS" title="CSS"><code> ... Your CSS put here ... </code></pre>

3. Javascript

<pre data-code="JavaScript" title="JavaScript"><code> ... Your JavaScript put here ... </code></pre>

4. jQuery

<pre data-code="JQuery" title="jQuery"><code> ... Your jQuery put here ... </code></pre>

Chúc các bạn thành công!

Nguồn: Iris