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>