SyntaxHighlighter 3.0.83

Como poner codigo de ejemplo en mi blog? Eso es lo que me preguntaba al hacer la pasada entrada de XML y sus ventajas. Y la solucion que encontre fue usar SyntaxHighlighter, que es un resaltador de texto desarrollado en JavaScript que sirve para poner codigos de ejemplo de diferentes lenguajes con colorido segun la sintaxis de cada lenguaje.


SyntaxHighlighter es usado por Apache, APtana, Mozilla, Yahoo, Wordpress, Bug Labs y otros.


Aqui un DEMO de este resaltador de texto.


Implementar esta herramienta es sumamente sencillo. Podemos hacerlo de dos maneras: bajando los .js y agregandolos a nuestro proyecto o "jalarlos" desde la pagina del proyecto.


Suponiendo que elegimos la opción de usar los scripts desde la pagina del proyecto, lo unico que tenemos que hacer es buscar la etiqueta

</head>

y agregamos las siguientes lineas justo antes de la etiqueta anterior:

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

De esta manera estaremos agregando a nuestra pagina todos los scripts para todos los lenguajes soportados por SyntaxHighlighter.

La otra opción que tenemos es, bajar los scripts y agregarlos manualmente a nuestro proyecto.

Y para utilizarlo??
Mas sencillo, no puede ser, aquí un pequenio ejemplo, que es la manera en que agregue el codigo anterior de la etiqueta HEAD:

</head>

donde lo que va después de brush: [lenguaje], es el lenguaje del código de ejemplo que estamos poniendo de ejemplo.

Así de simple y de fácil es usar esta herramienta.

Una pequenia nota que es muy importante agregar es que, cuando se usen los caracteres < y > por sus equivalentes HTML:

• < por su equivalente &lt;
• > por su equivalente &gt;

Fuentes:
Integración a otros servicios
Otros resaltadores de texto
Otro tutorial