Al envolver el código en una caja de etiqueta vista previa, podemos lograr que el código se muestre con una fuente monoespaciada y con colores de resaltado para facilitar su lectura y comprensión. A continuación, te mostraré cómo crear una caja con resaltador de códigos en tu página web de Blogger:
1º Abrir Blogger / Tema / Editar HTML, aquí colocar el siguiente código CSS arriba del código de cierre ]]></b:skin> o </style>
/* ========== Code Box – Theme v2 (fijo alto y ancho) ========== */
:root{
--cbg:#0f1320;
--cbd:#1d2540;
--cglow:#2b3a73;
--ink:#eaf2ff;
--muted:#9fb0d1;
--accent:#00e0ff;
--accent-2:#7c4dff;
--ok:#14f195;
/* Tamaños fijos: AJUSTA A TU GUSTO */
--code-h: 380px; /* alto fijo del área de código */
--code-w: 720px; /* ancho fijo del cuadro */
}
.code-wrap{
position:relative;
margin:18px auto; /* centrado */
border-radius:14px;
background:linear-gradient(180deg,var(--cbg),#0b0f1d 70%);
border:1px solid var(--cbd);
box-shadow:0 12px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
overflow:hidden;
/* ancho fijo (no responsive) */
width:var(--code-w);
box-sizing:border-box;
}
.code-top{
display:flex; align-items:center; justify-content:space-between;
gap:10px; padding:10px 12px;
border-bottom:1px solid var(--cbd);
background:linear-gradient(180deg,#12182a,#0e1430);
}
.code-lang{
display:inline-flex; align-items:center; gap:8px;
font:700 12px/1 system-ui,Segoe UI,Roboto,Arial;
color:var(--muted); letter-spacing:.4px; text-transform:uppercase;
}
.code-dots{display:flex; gap:6px}
.code-dots i{width:10px;height:10px;border-radius:50%;display:inline-block}
.code-dots i:nth-child(1){background:#ff5f57}
.code-dots i:nth-child(2){background:#febc2e}
.code-dots i:nth-child(3){background:#28c840}
.code-copy{
appearance:none; border:0; cursor:pointer;
padding:8px 12px; border-radius:10px;
font:700 12px/1 system-ui,Segoe UI,Roboto,Arial;
color:#06101a; display:inline-flex; align-items:center; gap:8px;
background:linear-gradient(135deg,var(--accent),var(--accent-2));
box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
transition:transform .12s ease, filter .12s ease;
white-space:nowrap;
}
.code-copy:hover{transform:translateY(-1px)}
.code-copy:active{transform:translateY(0)}
.code-copy[data-state="ok"]{background:linear-gradient(135deg,var(--ok),#3affc0)}
/* cuerpo */
pre.code{
margin:0; position:relative; background:transparent; border:0; border-radius:0;
box-sizing:border-box;
}
pre.code label{display:none}
/* Alto fijo + scroll interno (vertical y horizontal) */
pre.code code{
display:block; color:var(--ink);
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
font-size:13px; line-height:1.55;
padding:14px 16px;
height:var(--code-h); /* alto fijo */
width:100%; /* ocupa todo el ancho del wrap */
overflow:auto; /* barras internas */
-webkit-overflow-scrolling:touch;
white-space:pre; /* no envuelve líneas */
word-wrap:normal; /* evita cortes raros */
/* (sin min-width:max-content para que no empuje el contenedor) */
}
/* Hint */
.code-hint{
position:absolute; right:12px; top:12px;
color:var(--muted); font:600 11px/1 system-ui,Segoe UI,Roboto,Arial;
opacity:.85; pointer-events:none;
}
/* Colores */
.code-html code{color:#b8f1a6}
.code-css code{color:#a6b7ff}
.code-javascript code{color:#ffbf7a}
.code-jquery code{color:#6be7f0}<script type='text/javascript'>
//<![CDATA[
(function(){
// --- 1) Legacy: <i rel="pre">...</i> -> <pre class="code"><code>...</code></pre>
if (window.jQuery) {
// Con jQuery (como tu versión original)
jQuery('i[rel="pre"]').replaceWith(function(){
return jQuery('<pre class="code"><code>' + jQuery(this).html() + '</code></pre>');
});
} else {
// Sin jQuery
var legacy = document.querySelectorAll('i[rel="pre"]');
for (var L=0; L<legacy.length; L++){
var old = legacy[L];
var pre = document.createElement('pre'); pre.className = 'code';
var code = document.createElement('code'); code.textContent = old.textContent;
pre.appendChild(code);
old.parentNode.replaceChild(pre, old);
}
}
// --- 2) Doble clic para seleccionar (como tu script)
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i=0; i<pres.length; i++){
pres[i].addEventListener('dblclick', function(){
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
// --- 3) Mejora: envolver <pre class="code ..."> con cabecera + botón Copiar
var nodes = document.querySelectorAll('pre.code');
for (var k=0; k<nodes.length; k++){
(function(pre){
if (pre.parentNode && pre.parentNode.classList && pre.parentNode.classList.contains('code-wrap')) return;
// Detectar lenguaje (por <label> o por clase)
var lang = 'CODE';
var lbl = pre.querySelector('label');
if (lbl){
lang = (lbl.textContent || 'CODE').replace(/\s+/g,' ').trim();
lbl.parentNode.removeChild(lbl);
} else if (/\bcode-html\b/.test(pre.className)){ lang='HTML';
} else if (/\bcode-css\b/.test(pre.className)){ lang='CSS';
} else if (/\bcode-javascript\b/.test(pre.className)){ lang='JS';
} else if (/\bcode-jquery\b/.test(pre.className)){ lang='jQuery'; }
// Crear contenedor
var wrap = document.createElement('div'); wrap.className = 'code-wrap';
var top = document.createElement('div'); top.className = 'code-top';
var left = document.createElement('div'); left.className = 'code-lang';
left.innerHTML = '<span class="code-dots"><i></i><i></i><i></i></span><span>'+lang+'</span>';
var btn = document.createElement('button');
btn.className = 'code-copy';
btn.type = 'button';
btn.setAttribute('aria-label','Copiar código');
btn.innerHTML =
'<span style="display:inline-block;vertical-align:middle;">' +
'<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">' +
'<path d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>' +
'</svg></span><span style="margin-left:6px;">Copiar</span>';
top.appendChild(left);
top.appendChild(btn);
// Hint (doble clic)
var hint = document.createElement('span');
hint.className = 'code-hint';
hint.appendChild(document.createTextNode('doble clic para seleccionar'));
// Insertar estructura
pre.parentNode.insertBefore(wrap, pre);
wrap.appendChild(top);
wrap.appendChild(pre);
wrap.appendChild(hint);
// Acción copiar
btn.onclick = function(){
var codeEl = pre.querySelector('code') || pre;
var txt = codeEl.textContent || codeEl.innerText || '';
function ok(){
btn.setAttribute('data-state','ok');
btn.lastChild.textContent = 'Copiado';
setTimeout(function(){
btn.removeAttribute('data-state');
btn.lastChild.textContent = 'Copiar';
}, 1400);
}
function fallback(){
var r = document.createRange(); r.selectNodeContents(codeEl);
var s = window.getSelection(); s.removeAllRanges(); s.addRange(r);
alert('Seleccionado. Usa Ctrl/Cmd+C para copiar.');
}
if (navigator.clipboard && navigator.clipboard.writeText){
navigator.clipboard.writeText(txt).then(ok, fallback);
} else {
fallback();
}
};
})(nodes[k]);
}
})();
//]]>
</script>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>CUANDO QUIERAS AGREAGR LOS CODIGOS A TUS CAJAS CONTENEDORAS NO PUEDES SOLO COPIAR EL CODIGO Y PEGARLO, NECESITAS CONVERTIRLO DE HTML A XML AQUI TE DEJO UN CONVERTOR
0 Comentarios