[Webmaster] Coloreado de sintaxis en páginas web

última actualización el 10 de noviembre de 2008, 02:41 por Carlos-vialfa
Publicado por Carlos-vialfa
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
Mejores respuestas para « Coloreado de sintaxis en páginas web » en :
Elegir una imagen y optimizarla para ponerla en su página Web Ver Elegir una imagen y optimizarla para ponerla en su página Web Para que sus imágenes se visualicen de la mejor manera en su sitio Web, la elección del formato debe ser realizado, necesariamente, en función del uso que se le va a dar. Elegir...
No me aparecen las imágenes en mi página web Ver Para insertar imágenes en una página web utilizamos la etiqueta IMG, cuya sintaxis es la siguiente: Los formatos de las imágenes soportados en la web son los formatos GIF, JPG y PNG. El formato BMP no es...
Webmastering - Introducción a la creación de páginas web Ver Sitios web Un sitio web, también llamado sitio de Internet, consiste en un grupo de archivos HTML conectados a través de hipervínculos y almacenados en un servidor web, o sea, un equipo que aloja páginas web y que está conectado a Internet...
Insertar un documento PDF en nuestra página web VerÍndice: Inserta un documento PDF en tu página web Consejos Inserta completamente un documento PDF en tu página web Descarga del programa Convertir de formato PDF a SWF (Flash) Publicar el SWF Trucos Inserta un documento PDF en tu...
Cómo convertir una página web en PDF VerSi queremos convertir una página web, un manual, nuestros emails en PDF, pero no sabemos como utilizar los programas que existen para ello, entonces podemos utilizar una página web que lo hace fácil y gratis. Esta página convierte la URL de...
Guardar páginas Web en el PC VerCómo guardar páginas Web en el PC IE Haz clic en el menú Archivo de Internet Explorer Luego selecciona Guardar como… En la ventana “Guardar página Web”, en “Tipo” despliega la lista y selecciona Archivo web, archivo único Firefox Haz...
Ataques de secuencia de comandos entre páginas Web (XSS) VerInyección de código malintencionado Los ataques por secuencias de comandos entre páginas Web (también conocidos como XSS o CSS) son ataques dirigidos a los páginas Web que muestran de forma dinámica el contenido de los usuarios sin verificar ni...
Formularios HTML VerFormularios Los formularios interactivos permiten a los autores de páginas Web poner elementos interactivos en sus páginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar a las cartas de respuestas que se encuentra en algunas...
Webmastering - Lenguajes web VerIntroducción a la Web El término "Web" se refiere al servicio de Internet que permite a los usuarios navegar a través de las páginas web. El protocolo que se usa para este tipo de comunicación es el protocolo HTTP ("HyperText Transfer Protocol",...