SyntaxHighlighter es un resaltador de sintaxis escrito en JavaScript, es gratuito y una de las mejores opciones para Blogger, ya que es posible su instalación a través de la plantilla fácilmente.

Instalación

Como se ha comentado, la instalación se hace añadiendo a la plantilla el código JavaScript necesario para el resaltado. Para editar el HTML de la plantilla, se accede a la Configuración, se accede a la opción «Plantilla», y se pulsa en «Edición en HTML».

Para instalar con la configuración por defecto, se añade dentro de la etiqueta «HEAD» de la plantilla el siguiente código:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />

Se añaden también los lenguajes para los que se quiera usar el resaltado. Los lenguajes disponibles se pueden consultar aqui. En caso siguiente, se incluiría JavaScript, Java y XML (que incluye, html, xhtml,…):

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

Para terminar la configuración, en el caso de Blogger hay que activar la opción «bloggerMode», y después se arranca el Script:

<script type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all()
</script>

Esta configuración usa los archivos alojados en la página del creador (Alex Gorbatchev) que los ofrece de forma gratuita. Si quieres colaborar para que se siga desarrollando y siga ofreciendo el alojamiento puedes hacerlo desde su página. Si tienes un servidor donde alojar los Scripts y los estilos, también puedes descargarlos y usarlos desde tu servidor.

Añadir en la entrada el código a resaltar

Cuando se quiera añadir a la entrada código que deba aparecer resaltado, se hará incluyéndolo entre etiquetas pre, e indicando el tipo de código que se resalta, igual que en el ejemplo siguiente:

<pre class="brush: js">
 /**
 * SyntaxHighlighter
 */
 function foo()
 {
 if (counter <= 10)
 return;
 // it works!
 }
</pre>

Hay que tener cuidado al añadir código HTML, ya que en este caso, hay que sustituir los caracteres conflictivos por códigos de escape. Para ello, podemos usar la utilidad SimpleCode.

Aun no tengo mucha experiencia en su uso, en algunas páginas recomiendan escribir el artículo entero en modo «Redactar», dejar los huecos para el código e incluirlo al final en modo edición «HTML». En el momento de escribir ese artículo he ido cambiando de modo de edición y no he tenido mayores problemas.

Con WordPress puedes instalar el plugin SyntaxHighlighter Evolved, tal como explican en la página de soporte: Posting Source Code