Khung chứa code cho Blogger (Blogspot)

Đâ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>

Demo Trực tiếp:

<div>
<style>
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}
</style>

Đây là đoạn code CSS <br />
<br />
<br />
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}<br />
<br />
<br />
Để hiển thị code các bạn dùng các câu lệnh như sau<br />
<br />
<br />
&lt;pre data-codetype="HTML"&gt;Để hiện thị code dạng HTML&lt;/pre&gt;<br />
<br />
<br />
&lt;pre data-codetype="CSS"&gt;Để hiện thị code dạng CSS&lt;/pre&gt;<br />
<br />
<br />
&lt;pre data-codetype="JavaScript"&gt;Để hiện thị code dạng JavaScript&lt;/pre&gt;<br />
<br />
<br />
&lt;pre data-codetype="jQuery"&gt;Để hiện thị code dạng jQuery&lt;/pre&gt;

<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>
</div>

Để hiện thị code dạng CSS

Để hiện thị code dạng JavaScript

Để hiện thị code dạng jQuery

Search This Blog

Blog Lưu Trữ Kiến Thức

Adsense (Top)

Khung chứa code cho Blogger (Blogspot)