En este tutorial veremos como resaltar de forma simple códigos CSS, HTML, JQuery o otro código que necesites. Muchos bloguers usan Blockquote para resaltar
sus códigos, por lo que no podemos diferenciar un código HTML, CSS, JQuery o cualquier otro código, con este tutorial podremos diferenciar dichos códigos.
sus códigos, por lo que no podemos diferenciar un código HTML, CSS, JQuery o cualquier otro código, con este tutorial podremos diferenciar dichos códigos.
Vamos a Blogger>>Plantilla>>Edicion HTML.
Buscamos la siguiente linea
]]></b:skin>Justo por encima de ]]></b:skin> pegamos el siguiente código CSS.
pre.code {
margin:20px 25px;
border:1px solid;
border-color:#CDD2D6 #BFC6CB #B3BBC1 #BFC6CB;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
position:relative;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.08);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.08);
box-shadow:0 1px 1px rgba(0,0,0,.08);
}
pre.code label {
font-family:sans-serif;
font-weight:bold;
font-size:13px;
color:#4b555c;
position:absolute;
left:1px;
top:16px;
text-align:center;
width:60px;
}
pre.code code {
font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
display:block;
margin:0 0 0 60px;
padding:15px 16px 14px;
border-left:1px #E5EAEE solid;
overflow-x:auto;
font-size:13px;
line-height:19px;
color:#333;
}
pre.code-css code {
color:#D84400;
}
pre.code-html code {
color:#4576D5;
}
pre.code-jquery code{
color: #38761d;
}
pre.code-otro code
color: #7f6000;
}
NOTA: Como ven hay una linea llamada otro podemos cambiarlo por lo queramos, así también jquery, css, html por lo que deseamos.
Guardamos los cambios realizados en la plantilla.
Ahora agregaremos nuestro re-saltador de codigos CSS, HTML, JQuery u otro
Dentro de una entrada agregaremos el código HTML.<pre class="code code-html"> <label>HTML</label>
<code>
Código HTML iría aquí </code>
</pre>
<pre class="code code-css"> <label>CSS</label>
<code>
Código CSS iría Aquí </code>
</pre>
<pre class="code code-jquery"> <label>Jquery</label>
<code>
Código JQuery iría qui </code>
</pre>
</div>
<pre class="code code-otro"> <label>Otro</label>
<code>
Código Otro iría aquí
</code>
</pre>