Tutoriales Sobre Blogger: Resaltar Syntax usando PRISM y Javascript

En tutorial veremos como darle estilo a nuestro marco Syntax ademas con un botón "copiar" en el portapapeles, le presenté muchos articulos de darle estylo, pero la mayoría de ellas usan jQuery. Entonces, ¿hay alguna forma disponible con JS puro (JavaScript)? La respuesta estará en este artículo.
La ventaja de Prismjs es que su tamaño compacto es inferior a 20 KB, al integrarse con un solo archivo js sin configuración, admite muchos idiomas y muchos estilos para que usted elija.

La demostración la encontraras al final del blog

Comencemos

• Vamos a Blogger> Tema> Edición HTML
• Buscamos la siguiente linea en nuestra plantilla ]]></b:skin>a
• Justo encima pegamos el siguiente código CSS

.code-header {
    text-align: right;
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    font-family: Helvetica, Arial, sans-serif;
    box-sizing: border-box
}

.code-header a {
    font-size: 15px;
    display: inline-block;
    cursor: pointer;
    border-left: 1px solid #e5e5e5;
    box-sizing: border-box;
    padding: 6px 13px
}

.code-header a:hover {
    background: #f3f3f3;
    transition: all 0.1s linear
}

.msg-alert {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #333;
    z-index: 1000;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    padding: 8px 12px;
    border-radius: 4px
}

/* Prism JS */
code[class*="language-"],
pre[class*="language-"] {
    font-size: 14px;
    letter-spacing: .02rem;
    line-height: 1.4;
    color: black;
    background: none;
    text-shadow: 0 1px white;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

pre[class*="language-"]::-moz-selection,
pre[class*="language-"]::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"]::-moz-selection {
    text-shadow: none;
    background: #b3d4fc
}

pre[class*="language-"]::selection,
pre[class*="language-"]::selection,
code[class*="language-"]::selection,
code[class*="language-"]::selection {
    text-shadow: none;
    background: #b3d4fc
}

@media print {
    code[class*="language-"],
    pre[class*="language-"] {
        text-shadow: none
    }
}

pre[class*="language-"] {
    padding: 1em;
    margin: 0;
    overflow: auto;
    border: 1px solid #e5e5e5;
    border-top: 0;
    box-sizing: border-box
}

:not(pre)>code[class*="language-"],
pre[class*="language-"] {
    background: #f8f8f8
}

:not(pre)>code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: slategray
}

.token.punctuation {
    color: #999
}

.namespace {
    opacity: .7
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #905
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #690
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #9a6e3a
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #07a
}

.token.function,
.token.class-name {
    color: #DD4A68
}

.token.regex,
.token.important,
.token.variable {
    color: #e90
}

.token.important,
.token.bold {
    font-weight: bold
}

.token.italic {
    font-style: italic
}

.token.entity {
    cursor: help
}

• Todavía en la plantilla buscamos la siguiente linea </body>
• Justo por encima pegamos el siguiente codigo Javascript

<b:if cond='data:view.isSingleItem'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js'/>
<script>//<![CDATA[
function forEachElement(selector, fn) {
  var elements = document.querySelectorAll(selector);
  for (var i = 0; i < elements.length; i++)
    fn(elements[i], i);
}

forEachElement("pre>code[class*='language-']", function(el, i) {
  el.parentNode.insertAdjacentHTML("beforebegin", "<div class='code-header'><a class='copy-code'>Copy</a></div>");
});

forEachElement(".copy-code", function(el, i) {
  el.addEventListener("click", function() {
    var body = document.getElementsByTagName("body")[0];

    var txt = document.createElement("textarea");
    txt.setAttribute("id", "txt-cpy");
    txt.style.position = "absolute";
    txt.style.left = "-9999em";
    txt.value = el.parentNode.nextElementSibling.textContent;
    body.appendChild(txt);

    document.getElementById("txt-cpy").select();

    var div = document.createElement("div");
    div.setAttribute("class", "msg-alert");
    try {
      var successful = document.execCommand('copy');
      successful ? div.innerHTML = "Copiado con éxito al portapapeles" : div.innerHTML = "¡Fallo al copiar al portapapeles!";
      body.appendChild(div);
    } catch (err) {
      console.log('Oops, unable to copy');
    }

    body.removeChild(txt);
    setTimeout(function() {
      body.removeChild(div);
    }, 2000)
  })
});
//]]>
</script>
</b:if>

• Guardamos los cambios en nuestra plantilla
• Solo queda agregar nuestro código HTMLen nuestra entrada o donde queramos mostrar nuestro condigo Syntax con PRISM

<pre><code class="language-xxx">

<!-- Codigo Syntax a resaltar -->

</code></pre>

solo debes de cambiar -xxx por el leguaje que quieras que resalte obtén la lista en  https://prismjs.com/#languages-list
Recuerda que si te gusto lo compartas con tus amigos, me ayudaría muchísimo