[Webmaster] Coloreado de sintaxis en páginas web

Si tienes un sitio web conteniendo ejemplos de código (php, javascript, C#, Delphi, Python...), quizás te sea útil que hagas un coloreado de la sintaxis.

A veces es un poco difícil de realizar, pero existe una librería Javascript que te permite colorear automáticamente tu código C#, Delphi, Javascript, php, Python, Sql, VB, SQL y XML:
dp.SyntaxHighlighter

Esta bien hecho, es ligero, eficaz y no tiene problemas en las máquinas que no poseen Javascript.

Homepage:
http://code.google.com/p/syntaxhighlighter/

Ejemplo:


Para ponerlo en práctica:
1) Copia SyntaxHighlighter.css y todos los archivos .js en el mismo directorio que tu página.

2) Incluye la hoja de estilo que viene en el head de tu página:

<link type="text/css" rel="stylesheet" href="SyntaxHighlighter.css">

3)Agrega el siguiente código Javascript al final de la página:

<script language="JavaScript" src="shBrushPython.js" type="text/javascript"></script><script language="JavaScript" type="text/javascript">dp.SyntaxHighlighter.HighlightAll('code');</script>

(Aquí hemos incluido el Javascript para el lenguaje Python. Podemos incluir el lenguaje que nos interese entre los disponibles)

4) Coloca el código que deseas colorear en un <textarea>.
Por ejemplo:

<textarea name="code" class="python">
class client:

    def __init__(self,number,name):
        self.number = number  # Client number
        self.name = name      # Full client name
        
    def __repr__(self):
        return '<client id="%s" name="%s">' % (self.number, self.name)        
</textarea>

name=”code” sirve para indicar que este bloque deberá ser coloreado.
Class="Python" indica qué lenguaje utilizar.

Podemos utilizar opciones, como:

nogutter: oculta los números de línea.
Nocontrols: retira la barra "view plain | print | copy to clipborard"
collapse: ocultar el código (hacer clic para mostrar el código)
firstline[n]: indica el número de la primera línea (permite cambiar la numeración, practica para fragmentos de código)

Las opciones se agregan a la class, por ejemplo:
<textarea name="code" class="python:nogutter:nocontrols">

Fácilmente podemos personalizar los colores del coloreado modificando la hoja de estilo SyntaxHighlighter.css

Otra alternativa es, si tu sitio web está en PHP, utilizar el excelente GesHI, también muy simple y eficaz http://qbnz.com/highlighter/. Posee, por defecto, varias decenas de lenguajes y es extensible casi hasta el infinito.

Ver también

• [ Mostrar fácilmente el código php/xhtml de páginas web]

PD: El artículo original fue escrito por sebsauvage, contribuidor de CommentCaMarche