Crear una caja con resaltador de códigos en Blogger es bastante común para todos los que se dedican a compartir tutoriales en su blog, para todos los que están familiarizados con la aplicación de códigos como HTML, CSS, JavaScript, jQuery, Script, etc.
Cada vez que necesitemos aplicar códigos extensos en nuestras publicaciones, es importante envolver cada código en una etiqueta previa, para que nuestra publicación se vea mas ordenado y estéticamente presentable.
Ejemplos de códigos publicados en blogger código normal y código envuelto en una caja de etiqueta vista previa:
Código normal no Caja
<pre><code><button>Código html</button></code></pre>
Código Envuelto Caja
<pre><code><button>Código html</button></code></pre>El ejemplo anterior es un código HTML, es un ejemplo simple de implementación de una caja que envuelve el código. Se puede desarrollar el Resaltador de códigos para que se vea diferente de lo habitual dentro de nuestro blog.
En el siguiente tutorial vamos a compartir un tutorial de como crear caja de códigos con resaltador en Blogger de una manera simple sin la necesidad de un script externo.
1º Abrir Blogger / Tema / Editar HTML, aquí colocar el siguiente código CSS arriba del código de cierre ]]></b:skin> o </style>
/* CSS Simple Pre Code */
pre {
background: #333;
white-space: pre;
word-wrap: break-word;
overflow: auto;
}
pre.code {
margin: 20px 25px;
border-radius: 4px;
border: 1px solid #292929;
position: relative;
}
pre.code label {
font-family: sans-serif;
font-weight: bold;
font-size: 13px;
color: #ddd;
position: absolute;
left: 1px;
top: 15px;
text-align: center;
width: 60px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
pointer-events: none;
}
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 solid #555;
overflow-x: auto;
font-size: 13px;
line-height: 19px;
color: #ddd;
}
pre::after {
content: "doble clic para seleccionar";
padding: 0;
width: auto;
height: auto;
position: absolute;
right: 18px;
top: 14px;
font-size: 12px;
color: #ddd;
line-height: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
transition: all 0.3s ease;
}
pre:hover::after {
opacity: 0;
visibility: visible;
}
pre.code-css code {
color: #91a7ff;
}
pre.code-html code {
color: #aed581;
}
pre.code-javascript code {
color: #ffa726;
}
pre.code-jquery code {
color: #4dd0e1;
}2º A continuación, debemos colocar el código script antes de la etiqueta de cierre </body>
<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
//]]>
</script>El script anterior funciona para seleccionar automáticamente todo el código al hacer doble clic en el área envuelta de la caja, sirve para copiar mas rápido el código envuelto.
3º Después de eso guardar los cambios en la plantilla.
4º Para la aplicación de la caja de códigos dentro de las publicaciones o edición de entradas, utilizar el siguiente código en la pestaña Vista HTML, es obligatorio parsear el código html que deseamos compartir. Podemos elegir entre 4 tipos de resaltador de códigos HTML, CSS. JAVASCRIPT y JQUERY.
<pre class='code code-html'><label>HTML</label><code>CÓDIGO HTML</code></pre>
<pre class='code code-css'><label>CSS</label><code>CÓDIGO CSS</code></pre>
<pre class='code code-javascript'><label>JS</label><code>CÓDIGO JAVASCRIPT</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>CÓDIGO JQUERY</code></pre>
