viernes, 2 de abril de 2021

Agregar resaltado de código fuente a tu blogger

¿Cómo resaltar el código java, javascript, html, php y otros lenguajes en tu blog? Muy fácil usando SyntaxHighlighter. En este caso, explicaré de cómo hacerlo en el Blogger a fecha 01 de Abril de 2021. 

¿Porqué indico la fecha? Simplemente, por que suelen cambiar los diseños del Blogger con el paso del tiempo y enseguida quedan desactualizadas las pantallas.

 El proyecto OpenSource SyntaxHighlighter esta creado en Javascript y tiene la intención de ayudar a que un programador pueda resaltar en una página web, el código fuente de un lenguaje de programación con un formato adecuado.

Pasos para instalarlo en el Blogger

1.- Entramos en la página principal de blogger, y en el control principal seleccionaremos Tema.

2.- Seleccionaremos el botón "flecha hacia abajo" que esta al lado de Personalizar. Este Desplegará un menú que se muestro en el siguiente paso.

3.- Seleccionamos Editar HTML.

4.- Presionamos CTRL+F (buscar) y aparece una caja de texto "Search". Escribimos </head> ya que nos interesa introducirlo después de esta etiqueta html.


5.- Introducimos el siguiente código en la página. Dicho código lo proporciono en el siguiente paso.

El código que incluyo en la imagen, te lo facilito a continuación:

    
    



6.-Guardamos. Ahora nuestro blog ya esta preparado para introducir entradas resaltado nuestro código fuente. 

Agregar otros lenguajes de programación o cambiar de tema

 

Para agregar otros lenguajes de programación o cambiar de tema, solo tienes que inlcuir el script correspondiente que te facilita el proyecto en el lugar correspondiente. En el codigo anterior, entre comentarios se encuentra las diferentes sintaxis de los lenguajes que deseo que resalte mi blog: shBrushPowerShell.min.js, shBrushJScript.min.js, shBrushBash.min.js entre otros. La siguiente pagina web te ayuda a copiar el script necesario: https://cdnjs.com/libraries/SyntaxHighlighter

Para resaltar el código fuente en la entrada del blogger

 

Simplemente tenemos que introducirlo entre la etiqueta HTML <pre></pre>. Un ejemplo de un código java, se incluirá de la siguiente manera:

  
public class Main {

    public static void main(String[] args) {
        System.out.println("Hola mundo");
    }
}