Como Agregar Syntax Highlighter Code en Blogger
El Syntax Highlighter o resaltador de código puede ayudar a los lectores a comprender mejor el contexto del código. Además, instalado de forma predeterminada en Blogger, agrega automáticamente un botón Copiar para cualquier texto resaltado en el que los lectores puedan hacer clic y luego pegar el código en sus propios documentos. El editor de resaltado de sintaxis también es personalizable, al igual que el resaltador de sintaxis de Visual Code.
Que es Syntax Highlighter
Syntax Highlighter es una herramienta basada en web para crear código resaltado por sintaxis en más de 50 idiomas (HTML, C, C++, Java, JavaScript a Fortran y TeX). Esto es particularmente útil para las personas que escriben sobre programación y comparten código de muestra, ya sea como fragmentos de resaltado de sintaxis o programas completos.
Como funciona Syntax Highlighter
El complemento identifica palabras clave en el código fuente y las reemplaza con etiquetas HTML, coloreadas o diseñadas por CSS para crear bloques de código resaltados atractivos.
🔺 Incluir fragmento de código en Blogger .... 🔺 Syntax Highlighter
Blogger website | Prism.js
Paso a paso para agregar Syntax Highlighter
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #1E1E1E;
color: #DCDCDC;
font-weight: normal;
font-size: 1.15em !important;
}
.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
color: #569CD6;
}
.hljs-link {
color: #569CD6;
text-decoration: underline;
}
.hljs-built_in,
.hljs-type {
color: #4EC9B0;
}
.hljs-number,
.hljs-class {
color: #B8D7A3;
}
.hljs-string,
.hljs-meta-string {
color: #D69D85;
}
.hljs-regexp,
.hljs-template-tag {
color: #9A5334;
}
.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
color: #DCDCDC;
}
.hljs-comment,
.hljs-quote {
color: #57A64A;
font-style: italic;
}
.hljs-doctag {
color: #608B4E;
}
.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
color: #9B9B9B;
}
.hljs-variable,
.hljs-template-variable {
color: #BD63C5;
}
.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
color: #9CDCFE;
}
.hljs-section {
color: gold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #D7BA7D;
}
.hljs-addition {
background-color: #144212;
display: inline-block;
width: 100%;
}
.hljs-deletion {
background-color: #600;
display: inline-block;
width: 100%;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<script src='https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js'/>
<script>
//<![CDATA[
setTimeout(function(){for(var e=document.querySelectorAll("pre>code"),o=0;o<e.length;o++)hljs.highlightBlock(e[o]);window.highlightJsBadge({contentSelector:".container",loadDelay:0,copyIconClass:"fa fa-copy",checkIconClass:"fa fa-check text-success",onBeforeTextCopied:function(e,o){return e}})},10);
//]]>
</script>
Paso 6: Ir a la entrada que se esta editando y en la sección que se quiere agregar el código, pegar el siguiente código en la edición HTML.
<div class="container" style="margin-top: 20px;">
<pre><code class="hljs" id="code">
Agregar el código AQUI
</code></pre>
</div>
Paso 7: Agregar el código en la sección de vista de redacción.
Agregar el código AQUI
Paso 8: Ir a la sección de vista en HTML y pegar el siguiente código.
<div class="container" style="margin-top: 20px;">
<pre><code class="hljs" id="code">
Agregar el código AQUI
</code></pre>
</div>
Paso 9: Haga clic en Guardar y revisa por medio de una vista previa.