▷Como mostrar código fuente en las entrada de blog

Como mostrar una ventana de programación Web en las entrada de tu blog 

Hola hola Blogueros, en este artículos les hablaré cuando agregar una ventana con códigos de programación en una entrada de tu Blog, Post o Pagina Web.

Agregar una ventana de código de programación en una entrada de blog en Blogger puede ser importante en varias situaciones:

👨‍💻 Tutorial o Guía Técnica:

• Cuando estás proporcionando tutoriales o guías técnicas que involucran programación, mostrar el código en una ventana de código facilita la lectura y comprensión para tus lectores.

👨‍💻 Compartir Ejemplos de Código:

• Si estás compartiendo ejemplos de código para ilustrar conceptos o soluciones específicas, una ventana de código ayuda a presentar el código de manera clara y organizada.

👨‍💻 Resolución de Problemas:

• En entradas donde estás abordando problemas específicos y proporcionando soluciones mediante código, una ventana de código ayuda a destacar la parte del código que es esencial para resolver el problema.

👨‍💻 Mostrar Proyectos o Desarrollos Propios:

• Si estás mostrando proyectos personales o desarrollos propios, incluir fragmentos de código en una ventana de código puede hacer que sea más fácil para otros desarrolladores entender y potencialmente colaborar.

👨‍💻 Documentación:

• Al documentar procedimientos, configuraciones o API, la inclusión de código en una ventana de código facilita la lectura y la referencia para aquellos que están utilizando esa documentación.

👨‍💻 Entrenamiento y Aprendizaje:

• En entradas destinadas a enseñar a otros a programar o a aprender conceptos específicos, la inclusión de código con formato adecuado es esencial para la claridad y comprensión.

👨‍💻 Colaboración y Revisión de Código:

• Si estás compartiendo código para que otros lo revisen o colaboren, presentarlo de manera ordenada en una ventana de código facilita el proceso de revisión y colaboración.

En resumen, agregar una ventana de código en una entrada de blog en Blogger es importante cuando el contenido de la entrada involucra código, y deseas que sea presentado de manera clara y legible para tus lectores, especialmente si tu audiencia está compuesta en su mayoría por desarrolladores o personas con conocimientos técnicos.

Sabiendo esto, vamos directo al grano.

Como insertamos un cuadro de códigos de programación en una entrada

Nos vamos apoyar con la poderosa herramienta de nombre PrismJS, la cual es una biblioteca escrita con JavaScrip, que se utilizar para resaltar la sintaxis o el código.

Aunque yo te dejaré todos los códigos por este medio para que lo puedas entender mejor.

Si deseas puedes visitar la página Oficial de PrismJS

Lo primero que tenemos que hacer es pegar el siguiente codigo HTML en la plantilla principal de nuestro blog. Esto es muy sencillo, sigue los siguientes pasos: 

Accede a tu panel de control de Blogger:

👨‍💻Ingresa a tu cuenta de Blogger en https://www.blogger.com

👨‍💻Selecciona el blog para el que deseas agregar la tabla de contenido.

👨‍💻Luego nos vamos a la Configuración HTML de tu plantilla en General.

•   Para ello nos vamos a la pestaña Temas, luego damos en la pestañita que esta a lado de Personalizar.

• Elegimos la opción Editar HTML, al dar clic nos abrirá la plantilla de codigos de nuestro Blog en general. Es aquí donde pegaremos el primero código.

• Use CTRL+F para buscar </head> y pegue el script HTML y la etiqueta de enlace justo encima de </head>. 

<link rel="stylesheet" href="http://prismjs.com/themes/prism.css"/>
<script type='text/javascript' src="http://prismjs.com/prism.js"></script>

El código http://prismjs.com/themes/prism.css en la primera linea de código, establece el tema como predeterminado, mientras que lo siguiente lo establece en su tema correspondiente. 

Temas que puede usar:

A continuación te dejo algunos temas que puedes usar, puedes ir probando de uno en uno para ver cual te gusta mas. Para ello solo debes reemplazar por la primera linea del código anterior ya mencionado. 

1. Akaidia -> Peso 1.35 KB

<link rel="stylesheet" href="http://prismjs.com/themes/prism-okaidia.css"/>

2. Oscuro -> Pesa 1.50 KB

<link rel="stylesheet" href="http://prismjs.com/themes/prism-dark.css"/>

3. Miedoso -> Peso 1.94 KB

<link rel="stylesheet" href="http://prismjs.com/themes/prism-funky.css"/>

4. Crepúsculo ->Peso 2.38

<link rel="stylesheet" href="http://prismjs.com/themes/prism-twilight.css"/>

5. Tímido -> Peso 2.99 KB

<link rel="stylesheet" href="http://prismjs.com/themes/prism-coy.css"/>

Agregamos el Código en la entrada 

Continuando con el Proceso, nos vamos a dirigir a la entdada donde queremos que se muestre el código. Elegimos Vista HTML par poder agregar el Código que te dejo a continuación.

<pre class='language-markup'>
<code>
Aquí va el código a mostrar en la entrada.
</code>
</pre>

Esto va funcionar perfecto para las entradas de Blogger.

Otros lenguajes de Programación

En el caso que quieras cambiar los idiomas idiomas, solo tienes que cambiar el idioma-xxxx en la clase que puedes encontrar en las etiquetas <pre> y <code>.

Ejemplo, para el lenguaje de JavaScrip y JQuery se podra mostrar con el siguiente código:

<pre class='language-javascript'>
<code>
Aquí escribiras tu código
</pre>
</code>

En la Página Oficial de PrismJS puedes encontrar los lenguajes. 

Bueno Bueno Blogueros, espero que les sea muy util esta información que me costó tanto encontrarlo y comprenderlo. Dejame en los comentarios si te ayude en algo. 

Dios te bendiga. Hasta pronto. 

Te puede interesar también: 

 ▷ Cómo Crear una Tabla de Contenido en Blogger - Destaca tu Contenido

 ▷ Descarga y Personaliza: La Guía Completa para Plantillas en Blogger