Cómo Agregar una Caja de Código en Blogger este 2022

¿Qué es una caja de código?, una caja de código es para poner tus códigos de funciones JavaScript, HTML, CSS y entre otros. Normalmente, se utiliza para poner un código de ejemplo para un tutorial o guía.

caja de código en blogger

Aquí, en seoblogariel.online te mostrare como puedes poner una caja de código en Blogger siguiendo unos simples pasos de forma efectiva.

Algunas plantilla de Blogger integran unos shortcodes para añadir su propia caja de código, pero, no todas traen esa funcionalidad dentro de sus características. Por eso, voy desvelarte como ponerlo en caso que tu tema no traiga esta función.

Instalar Highlight.js

highlight.js es un repositorio que nos va permitir agregar nuestra caja de código en nuestro blog de forma nativa. Para insertar highlight.js en nuestro Blogger vamos a copiar el siguiente código antes del tag </body>. Nos permitirá llamar las funciones especiales para nuestra caja de códigos.

Para conseguir la ultima versión de Highlight.js te recomiendo obtenerlo en su web oficial. Luego, reemplazar la URL actualizada.


<script src='//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/src/highlightjs-line-numbers.min.js'/>
	<script>hljs.initHighlightingOnLoad(); </script>
  	<script>hljs.initLineNumbersOnLoad(); </script>
  	<script>hljs.highlightAll();</script>

highlight JS caja de codigo

Función DIV


Ahora que tenemos nuestro highlight.js instalado en Blogger, lo segundo es colocar en alguna parte de nuestro Blog lo siguiente para poner nuestra caja de código.

Para esto, debemos poner la siguiente función en vista HTML de la entrada que estemos editando. NO funciona si estamos editando en vista redacción. Copia el siguiente código en tu entrada:

<Pre><code>

-- tu código va aquí --

</code></Pre>

Darle Formato a nuestros Código


Aunque ya tenemos la función mas importante para poner nuestra caja de código en Blogger, pues, nos faltaría un paso para que se complete satisfactoriamente.

Ingresamos al siguiente enlace para decodificar el código que vamos a colocar dentro de la caja de código en nuestro blog. De esta forma no obtendremos error al pegar nuestro código. Copiamos y pegamos.

html entity encoder decoder

Breve Resumen para poner nuestra Caja de Código en Blogger


Para aclarar de forma sencilla:

  • Agregamos la ultima versión highlight.js antes del tag </body>
  • colocamos en la entrada <pre><code> </code></pre> y ponemos dentro nuestro código.
  • Por ultimo decodificamos nuestro Div, CSS o JS para colocarlo dentro de la caja y con esto tenemos nuestro codigo en una caja de código.

Publicar un comentario

Déjame un mensaje.

Artículo Anterior Artículo Siguiente

نموذج الاتصال