Khung chứa code đẹp cho blogger Ver2

Ở 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..



Các bạn có thể xem khung chứa code ver 1 của mình tại đây

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>