HOT !!!Hiện Tại HungCoder.Com Đang Phát Hành Trang Chat Miễn Phí Cho Mọi Người Giao Đỗi Thông Tin Với Nhau.Click Here

Thứ Hai, tháng 4 25, 2016

Khung chứa code đẹp cho blogger

Ở bài viết trước mình đã chia sẻ khung chứa code với dạng đơn giản. Bây giờ mình tiếp tục chia sẻ khung chứa code dạng 2. với các nhãn như HTML,JavaScript,jQuery,Css..


Đây là đoạn code CSS

pre,i[rel="pre"]{display:block;clear:both;font:12px/15px 'Consolas',Monospace;background:#23241f;color:#f8f8f2;border:1px solid #2980b9;overflow:auto;word-wrap:normal;position:relative;margin:10px 0;padding:5px;text-align:left!important}
pre[data-codetype]{padding:40px 5px 5px}
pre[data-codetype]:before{content:attr(data-codetype);display:block;position:absolute;top:0;right:0;left:0;background-color:#95a5a6;font:normal 16px/20px 'Yanone Kaffeesatz',sans-serif;color:#fff;padding:7px}
pre[data-codetype=HTML]{border-color:#27ae60}
pre[data-codetype=CSS]{border-color:#16a085}
pre[data-codetype=JavaScript]{border-color:#2980b9}
pre[data-codetype=jQuery]{border-color:#34495e}
pre[data-codetype=HTML]:before{background:#27ae60}
pre[data-codetype=CSS]:before{background:#16a085}
pre[data-codetype=JavaScript]:before{background:#2980b9}
pre[data-codetype=jQuery]:before{background:#34495e}
pre .tag,pre{color:#f9f9f9}
pre .variable,pre .params{color:#fd9720}
pre .title,pre .class .title,pre .css .class{color:#a6e22e}
pre .attribute,pre .symbol,pre .symbol .string,pre .tag .title,pre .value,pre .css .tag{color:#2ecc71}
pre .number,pre .preprocessor,pre .pragma,pre .regexp{color:#ae81ff}
pre .tag .value,pre .string,pre .css .id,pre .subst,pre .haskell .type,pre .ruby .class .parent,pre .built_in,pre .sql .aggregate,pre .django .template_tag,pre .django .variable,pre .smalltalk .class,pre .django .filter .argument,pre .smalltalk .localvars,pre .smalltalk .array,pre .attr_selector,pre .pseudo,pre .addition,pre .stream,pre .envvar,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .prompt{color:#e6db74}
pre .comment,pre .javadoc,pre .java .annotation,pre .python .decorator,pre .template_comment,pre .pi,pre .doctype,pre .deletion,pre .shebang,pre .apache .sqbracket,pre .tex .formula{color:#75715e}
pre .keyword,pre .function,pre .literal,pre .change,pre .winutils,pre .flow,pre .lisp .title,pre .clojure .built_in,pre .nginx .title,pre .tex .special,pre .constant{color:#66d9ef}
pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}

Để hiển thị code các bạn dùng các câu lệnh như sau

<pre data-codetype="HTML">
Để hiện thị code dạng HTML
</pre>

<pre data-codetype="CSS">
Để hiện thị code dạng CSS
</pre>

<pre data-codetype="JavaScript">
Để hiện thị code dạng JavaScript
</pre>

<pre data-codetype="jQuery">
Để hiện thị code dạng jQuery
</pre>









0 Bình Luận:

Monetize your website traffic with yX Media