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