Caja con Resaltador de Códigos para Blogger

/* ========== 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 */
  --code-h: 380px;   /* alto fijo del área de código */
  --code-w: 720px;   /* ancho fijo del cuadro */
}

.code-wrap{
  position:relative;
  margin:18px auto;
  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;
  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)}

pre.code{
  margin:0; position:relative; background:transparent; border:0; border-radius:0;
  box-sizing:border-box;
}
pre.code label{display:none}

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);
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  white-space:pre;
  word-wrap:normal;
}

.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;
}

.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(){
  if (window.jQuery) {
    jQuery('i[rel="pre"]').replaceWith(function(){
      return jQuery('<pre class="code"><code>' + jQuery(this).html() + '</code></pre>');
    });
  } else {
    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);
    }
  }

  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);
  }

  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;

      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'; }

      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);

      var hint = document.createElement('span');
      hint.className = 'code-hint';
      hint.appendChild(document.createTextNode('doble clic para seleccionar'));

      pre.parentNode.insertBefore(wrap, pre);
      wrap.appendChild(top);
      wrap.appendChild(pre);
      wrap.appendChild(hint);

      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);
        }
        if (navigator.clipboard && navigator.clipboard.writeText){
          navigator.clipboard.writeText(txt).then(ok);
        }
      };
    })(nodes[k]);
  }
})();
//]]>
</script>

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