Cómo agregar Syntax Highlighter a Blogger

Si eres un blogger/desarrollador entonces tienes la necesidad de mostrar algunos segmentos de código o scripts como parte de tus entradas (posts) cuando estás escribiendo un tutorial, algún consejo o un hack. Lo que es importante para mostrar estos segmentos de código es que se encuentres en una parte resaltada, con colores, números de línea, que respete la sintaxis, etc; cuando se trata de Blogger, hace falta un plugin o widget para hacer esto posible. Por lo tanto, aquí, en este tutorial mostraré cómo añadir un resaltador de sintaxis (Syntax Highlighter) a blogger para dar a nuestros segmentos de código un aspecto nuevo y elegante.

Cómo agregar Syntax Highlighter a Blogger

Para hacer esto vamos a utilizar un resaltador de código llamado Syntax Highlighter, desarrollador por Alex Gorbachov, que es un resaltador comúnmente utilizado en sitios web y blogs. 

Aquí los pasos para agregar Syntax Highlighter a Blogger:

Añadir los scripts.

• Copia las siguientes líneas.
  
  
  
• Accede a Blogger con tus credenciales.
• Selecciona tu blog y navega a la sección de Plantillas. 
• En la sección de Plantillas, haz clic en Edición de HTML.
  
  
• Haz clic en un área en el editor y pulsa Ctrl + F para abrir el cuadro de búsqueda. 
• Busque la etiqueta  </ head>. 
• Pega las anteriores líneas de código justo por encima de la etiqueta </ head> y haz clic en el botón Guardar plantilla.
  
  

Resaltar código

Ya añadimos Syntax Highlighter a la plantilla, pero para que los segmentos de código se resalten tenemos que envolver el segmente por la etiqueta <pre> con un atributo especial para definir qué lenguaje estamos utilizando. Para eso hay que hacer lo siguiente:

• Para agregar un segmento de código, hay que agregar colocar el código dentro de un par de etiquetas <pre> </pre> en el modo HTML del editor de entradas.







• Obtendremos el siguiente resultado

print "hola mundo"

Saludos.