Después de mucho tiempo alejados del blog, hemos vuelto, y esta vez para quedarnos (o por lo menos eso esperamos). Una pregunta muy frecuente en los creadores de contenido o blogueros, ¿Como puedo mostrar código de programación en mi blog de Blogger? (en el caso de los que usamos Blogger como plataforma), esta pregunta es muy común, especialmente si te dedicas a crear contenido relacionado con la programación, ya sea web o de algún lenguaje de programación en particular.
Bueno, pero que es realmente lo que nos hace preguntarnos ¿Como puedo mostrar código de programación en mi blog de Blogger?, pues esto se debe a que a la hora de querer crear una entrada de determinado tema de programación nos es imposible mostrar el código tal cual es, así como nosotros quisiéramos que aparezca para que este, siga un lineamiento establecido y no distorsione lo que queremos explicarle a nuestro lector.
Esto conlleva un suplicio ya que las herramientas que usamos normalmente para editar nuestras entradas, ya sea Word open office (únicamente para la edición de texto plano) etc. no nos brindan la opción de poder crear código de programación de ninguna manera, de hecho lo que estos editores hacen es agregar caracteres extraños e inútiles a lo que queremos realizar con código, para ello, existen varias opciones muy elegantes que resaltan nuestro código, pero el ejemplo que nos compete en este caso es prettify cuyo enlace te dejamos aquí
Prettify
es un conjunto de scripts creados en JavaScript por Google para resaltar la sintaxis de varios lenguajes de programación, por no decir, los más usados este Script nos permitirá embellecer nuestro código de la forma que deseamos que se vea en nuestro blog, y a continuación veremos cómo se configura correctamente y a su vez aplicaremos nuevos temas, ya que cuenta con variedad de temas que nos serán de mucho.
haz lo siguiente:
incluiremos el script principal dentro de nuestro blog siguiendo esta dirección; Temas > Editar HTM > Ctrl+F > head
Entramos a la configuración de nuestro blog, buscamos la opción Temas, luego hacemos clic en la opción Editar HTML del lado derecho de nuestra pantalla, una vez ingresando aquí, veremos el código fuente de nuestro blog, haremos clic dentro de él (En cualquier parte) y presionamos las teclas, CTRL + F nos aparecer aun cuadro de búsqueda y ahí pondremos el parámetro de búsqueda, en este caso, será, <head>, así tal cual se escribe, de lo contrario, podría dificultarse el encontrarlo, una vez encontrada la etiqueta head copiaremos la siguiente instrucción:
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
Una vez echo esto, solo queda agregar el fragmento de código a mostrar en nuestra entrada y aplicarle los temas que queramos. Esto lo haremos utilizando el siguiente código:
<pre class="prettyprint"><span style="font-size: large;"><code class="language-php"> </code></span></pre>
Dentro de estas etiquetas es donde ingresaremos el código a mostrar, por ejemplo, en nuestro caso lo haremos con HTML.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo con PHP</title>
</head>
<body>
<?php
echo "Hola PHP";
?>
</body>
</html>
Antes de todo, aclarar que en nuestro caso se muestra de una manera muy distinta al resultado que puedas obtener, ya que hemos realizado algunas modificaciones al código CSS del tema aplicado, si quieres saber cómo se realiza este proceso lee este articulo
Si has realizado los pasos anteriores correctamente, ya solo queda crear una entrada nueva en nuestro blog de Blogger e insertar el código a mostrar.
No olvides insertar tu código dentro de las etiquetas <pre> y </pre> para que el resultado sea el esperado, de lo contrario, no esperes que pase algo,
Esto es todo por el momento, espero que te haya servido y sido de ayuda este post, si crees que te aporto algun valor compartelo en tus redes sociales con amigos y familiares y siguenos en nuestro facebook.
Esto es todo por el momento, espero que te haya servido y sido de ayuda este post, si crees que te aporto algun valor compartelo en tus redes sociales con amigos y familiares y siguenos en nuestro facebook.
Redes Sociales