Como usar Syntax Highlighter 3

Syntax Highlighter es un conjunto de scripts desarrollados en Javascript que te permite poner trozos de código en tu web (especialmente un blog) de manera que quede prácticamente como si estuvieras usando un IDE. Admite una gran cantidad de lenguajes, la lista completa podemos encontrarla aquí.

Después de probar distintos métodos para usarlo la más fácil que he encontrado es usar la versión "hosted", esto es, una versión en la que no tienes que bajarte nada si no que enlazas desde una página los archivos.

La forma de usarlo (en este caso con blogger) es irnos a la pestaña de Diseño->Editar html , e introducir en el head de la página el siguiente código.

<!-- Syntax Highlighter Additions START -->
<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.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/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
 
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Additions END -->

Simplemente tenemos que eliminar los script que no nos interese usar (borrar la linea de script de x lenguaje).

Guardamos el template y ya lo tendremos funcionando.

Ahora podemos hacer alguna configuración extra si nos interesa, podeis encontrarlas aquí. Además podemos cambiar el theme/template que usa el script, simplemente reemplazando en la línea:

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

el último archivo css por uno de los siguientes:

• Django - shThemeDjango
• Eclipse - shThemeEclipse
• Emacs - shThemeEmacs
• Fade to Grey - shThemeFadeToGrey
• Midnight - shThemeMidnight
• RDark - shThemeRDark

Pero ahora la cuestión es ¿Cómo uso esto?. Debemos encerrar el código que queramos entre las siguientes etiquetas:

<pre class="brush:[brush_name];[optional_params]">CODE</pre>

Sustituyendo correctamente cada cosa, por ejemplo si quiero usar html pues:

<pre class="brush:html">CODE</pre>

Además tendremos que sustituir < por &lt; y > por &gt. Para hacer esto podemos usar la siguiente web, con la que podremos realizar automáticamente este cambio: Quick Scape.

Un saludo!

Fuente: commonitman.com