Colorea tu código con Syntax highlighter

Colorea tu código con Syntax highlighter es algo muy útil y fácil. En muchas ocasiones he querido colorear la sintaxis de mis ejemplos pero por alguna razón no había podido lograrlo hasta ahora gracias a syntax highligther.

¿Qué es syntax highligther?

Syntax highligther es una librería de javascript hecha por Alex Gorbatchev. Cuenta con una licencia LGPL 3. Y sirve para colorear sintaxis de códigos en nuestros sitios web.

Existe soporte para varios lenguajes, tal como:

• as3, actionscript3
• bash, shell
• c-sharp, csharp
• cpp, c
• css
• delphi, pas, pascal
• diff, patch
• groovy
• jfx, javafx
• perl, pl
• php
• plain, text
• ps, powersehll
• py, python
• rails, ror, ruby
• scala
• sql
• vb, vbnet
• xml, xhtml, xslt, html, xhtml

Veamos un ejemplo para que sea más fácil entenderlo

function test($x = 0) {
  for ($i = 0; $i < $x; $i++) {
    echo "var i: $i y x: $x";
  }
}

¿Cómo usar syntax highlighter?

Lo primero que tienes que hacer para usar syntax highligther es descargarlo dando en la página oficial aquí.
despues hay que descomprimir todo los archivos y copiar los js y css en sus respectivas carpetas js/ y css/
Pon en tu archivo html los links a los archvios de la siguiente manera.

Despues para definir un bloque de código con sintaxis coloreada podemos hacer lo siguiente

   <pre class="brush:js">
	alert("Hello world");
   </pre>

Si deseas colorear otro tipo de código fuente digamos php hacemos algo como esto

<pre class="brush:php">
function test($x = 0) {
  for ($i = 0; $i < $x; $i++) {
    echo "var i: $i y x: $x";
  }
}
</pre>

Note que lo único que cambia es el class que define que brush vamos a usar. Tabien es necesario saber ue se ocupa cargar el archivo de javascript necesario para ese brush, Espero que le sea útil y hagan apoyen el trabajo de Alex Gorbatchev el cual solo espera que su trabajo les guste y hagan una donación para sus cervezas.

Enviado por joe el Mié, 05/06/2009 - 19:28.

• Versión para impresión
• Send to friend
• PDF version