Micaela 30 de agosto de 2009 a las 09.02
   Imprimir artículo
elWebmaster.com

Los mejores resaltadores de sintaxis de código para tu web


highlightCuando el código que ofreces en tu web incluye variedad de términos complejos, probablemente tus visitantes necesiten un poco de asistencia para no naufragar en un mar de variables.

Por eso en esta nota te traemos un listado de resaltadores de sintaxis que se encargan de distinguir cada uno de los elementos, de gran utilidad para su mejor comprensión. ¡Que los disfrutes!

1. SyntaxHighlighter

Esta herramienta posee un amplio soporte y ofrece muchas opciones, extensiones e integraciones con otros programas y plataformas. Es verdaderamente increíble.

SyntaxHighlighter ayuda al desarrollador a postear snippets de código con facilidad y de forma bonita. Está 100% basada en JavaScript y no se preocupa por lo que tengas en tu servidor.

La idea de SyntaxHighlighter es permitir la inserci√≥n de snippets de c√≥digo coloreados en una p√°gina web sin tener que utilizar ning√ļn script de lado del servidor.

Haz clic aqu√≠ para descargar SyntaxHighlighter ¬Ľ

2. GeSHi ‚Äď Generic Syntax Highlighter

GeSHi soporta PHP5 y Windows, y ha sido utilizado inclusive para resaltar código en páginas ASP, verdaderamente soporta casi cualquier lenguaje de codificación. Es una herramienta muy poderosa.

GeSHi es una herramienta de resaltado simple pero poderosa que posee las siguientes metas:

  • Soporta un amplio rango de lenguajes populares
  • Es f√°cil a√Īadir un nuevo lenguaje para resaltado
  • Formatos de exteriorizaci√≥n altamente personalizables

geshi-generic-syntax-highlighter

Haz clic aqu√≠ para descargar Generic Syntax Highlighter ¬Ľ

3. Quick Highlighter

No hay forma más fácil de crear una página web en base a tu código fuente. Este resaltador online ofrece muchos lenguajes de codificación para elegir, con muchas opciones distintas:

  • Combinar c√≥digo de estilo y HTML
  • Palabras claves de resaltado incorporados, tipos de informaci√≥n, etc.
  • Modo estricto
  • Envoltura de texto sobrante

quick-highlighter-syntax-highlighter

quick-highlighter-syntax-highlighter

Haz clic aqu√≠ para descargar Quick Highlighter ¬Ľ

4. Google Code Prettify

Un módulo Javascript y archivo CSS que permite la sintaxis de resaltado de snippets del código fuente en una página HTML.

Los comentarios en prettify.js son autorizados pero el lexer deber√≠a funcionar en un gran n√ļmero de lenguajes incluyendo C, Java, Python, Bash, SQL, HTML, XML, CSS, y Javascript. Funciona de forma pasable en Ruby, PHP, VB, y Awk pero debido a convenciones de comentado no funciona en Smalltalk, o lenguajes tipo-CAML.

Propiedades:

  • Funciona en p√°ginas HTML
  • Funciona incluso si el c√≥digo posee links embebidos, l√≠neas de n√ļmeros, etc.
  • API simple : incluye algo de¬† JS&CSS y a√Īade un handler de control.
  • Peso liviano: descarga peque√Īa y no bloquea la carga de la p√°gina mientras funciona.
  • Estilos personalizables mediante CSS.
  • Suporta todos los lenguajes tipo-C, tipo-Bash y tipo XML. No se necesita especificar el lenguaje.
  • Manejadores de lenguajes extensibles a otros lenguajes. Puedes especificar el lenguaje.
  • Ampliamente utilizado con soporte en varios navegadores.

google-code-prettify-javascript-syntax-highlighter

Haz clic aqu√≠ para ver el demo ¬Ľ

5. Pygments

Pygments es un resaltador de sintaxis genérico para uso en todo tipo de software, ya sea sistemas de foros, wikis o cualquier otra aplicación que necesite embellecer tu código.

Pygments soporta un creciente rango de lenguajes, para ver la lista completa haz clic aquí.

pygments-python-syntax-highlighter

Haz clic aqu√≠ para ver el demo ¬Ľ

Haz clic aqu√≠ para descargar Pygments ¬Ľ

6. Highlight.JS

Highlight.js resalta sintaxis en ejemplos de código en blogs, foros y de hecho en cualquier otra página. Es muy fácil de usar porque funciona de forma automática: encuentra el bloque de código, detecta el lenguaje, lo resalta.

Este programa soporta los siguiente lenguajes ‚Äď 1C, AVR Assembler, Apache, Axapta, Bash, C#, C++, CSS, DOS .bat, Delphi, Django, HTML, XML, Ini, Java, Javascript, Lisp, MEL (Maya Embedded Language), PHP, Perl, Python, Python profile, RenderMan (RIB, RSL), Ruby, SQL, Smalltalk, VBScript, diff.

highlight-javascript-syntax-highlighter

Mira el demo ¬Ľ

Haz clic aqu√≠ para descargar Highlight.JS ¬Ľ

7. Lighter.js

Escrito en MooTools. Es un resaltador muy f√°cil de utilizar.

lighter-syntax-highlighter-written-in-mootools

Haz clic aqu√≠ para descargar Lighter.js ¬Ľ

8. SHJS ‚Äď Syntax Highlighting in JavaScript

SHJS es un programa JavaScript que resalta pasajes de código en documentos HTML. Los documentos que usan SHJS son resaltados en el lado del cliente por el navegador web.

SHJS Suporta muchos lenguajes tambi√©n ‚Äď Bison, CC++, C#, ChangeLog, CSS, Desktop files, DiffFlex, GLSL, Haxe, HTML, Java, JavaScript, LaTeX. LDAP files, Log files, LSM (Linux Software Map) files, M4, Makefile, Objective Caml, Oracle SQL, Pascal, Perl, PHP,Prolog, Python, Ruby, S-Lang, Scala, Shell, SQL, Standard ML, Tcl, XML, Xorg configuration files.

shjs-syntax-highlighter

Haz clic aqu√≠ para descargar SHJS ¬Ľ

9. CodePress ‚Äď Online Real Time Syntax Highlighting Editor

CodePress es un editor de código fuente basado en la web con resaltado de sintaxis escrito en  JavaScript que colorea el texto a tiempo real mientras está siendo tipeado en el navegador.

Este editor ofrece varias propiedades como resaltado de sintaxis a tiempo real, snippets de c√≥digo, auto-completaci√≥n y ventanas m√ļltiples.

codepress-online-syntax-highlighter

Haz clic aqu√≠ para ver el Demo y decargar CodePress ¬Ľ

10. Chili 2.2 jQuery code highlighter plugin

Chili es el plugin jQuery de resaltado de código que resalta muy rápidamente, es completamente personalizable, muy bien documentado y posee licencia MIT.

El Plugin soporta varios lenguajes como C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, y XHTML y posee muchas opciones de configuración distintas.

chili-jquery-code-highlighter-plugin

Haz clic aqu√≠ para ver el demo ¬Ľ

Haz clic aqu√≠ para descargar Chili jQuery Code Highlighter Plugin ¬Ľ

11. Highlight ‚Äď Code & Syntax highlighting by Andre Simon

Highlight convierte el código fuente en texto formateado con resaltado de sintaxis:

  • Exteriorizaci√≥n coloreada en formato HTML, XHTML, RTF, TeX, LaTeX, SVG, BBCode y XML
  • Soporta m√°s de 140 leguajes de programaci√≥n
  • Incluye 40 themes de color
  • Plataforma independiente

highlight-andre-simon-syntax-highlighter

Haz clic aqu√≠ para mirar el demo ¬Ľ

Haz clic aqu√≠ para descargar Highlight ¬Ľ

12. BeautyOfCode: jQuery Plugin for Syntax Highlighting

BeautyOfCode habilita la compilación de sintaxis xhtml de una forma agradable.

beauty-of-codejquery-code-highlighter-plugin

Haz clic aqu√≠ para descargar BeautyOfCode ¬Ľ

13. JUSH ‚Äď JavaScript Syntax Highlighter

JavaScript Syntax Highlighter puede ser utilizado para resaltado de sintaxis de lado de cliente en los siguientes lenguajes: HTML, CSS, Javascript, Php, Mysql, SQLlite, Apache, PostgreSQL.

Propiedades:

  • Resalta lenguajes embebidos uno dentro de otro.
  • Enlaza a documentaci√≥n de todos los lenguajes.
  • Los colores pueden ser f√°cilmente modificables por CSS.
  • Reconoce sintaxis PHP completa, incluyendo __halt_compiler, heredoc, backticks, {$} variables inside strings, namespaces.
  • Funciona en los navegadores m√°s importantes incluyendo Internet Explorer, Firefox y Opera.

jush-javascript-syntax-highlighter

Haz clic para ver el demo ¬Ľ

Haz clic aqu√≠ para descargar Jush ¬Ľ

14. Ultraviolet ‚Äď Syntax Highlighting Engine

Ultraviolet es un motor de resaltado de sintaxis basado en Textpow (debes instalar éste primero para usar Ultraviolet). Dado que usa archivos Textmatesyntax, ofrece sintaxis fuera de serie para más de 50 lenguajes y 20 plantillas.

ultraviolet-synax-highlighter-engine

Haz clic aqu√≠ para ver el demo ¬Ľ

Haz clic aqu√≠ para descargar Ultraviolet ¬Ľ

15. DlHighlight ‚Äď JavaScript Syntax Highlighting Engine

Este proyecto es un motor de resaltado de sintaxis basado en Javascript.

dlhighlight-code-highlighter-plugin

Haz clic aqu√≠ para descargar DlHighlight ¬Ľ

16. Syntax highlighter for JavaScript

Esta herramienta online resaltará sintaxis de código JavaScript 1.2. El restado está basado en patrones, no buscará JavaScript válido. Puede demorarse un poco, pero tengan paciencia.

El formato de exteriorización es HTML.

syntax-highlightning-javascript

Por supuesto que también existen una gran cantidad de programar que poseen soporte de resaltado de sintaxis incorporado, pero estas versiones online y scripts JS ofrecen un gran control sobre el resaltado y la flexibilidad.

Fuente: 1stwebdesigner


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (4)

  1. Luis dice:

    Hablando de sintaxis, la ortograf√≠a es uno de sus terrenos. Escribir la palabra “sintaxis” acentuada es una terrible falta para cualquier persona, experto medio, novato o profesional webmaster, dado que forma parte del aprendizaje b√°sico de cualquiera.

  2. Alejandra dice:

    Gracias. Lamentablemente qued√≥ el t√≠tulo mal escrito. Ya fue corregido ūüėõ

  3. Pili dice:

    me pareci√≥ muy √ļtil tu publicaci√≥n, pero estoy haciendo un proyecto, en el que realizamos una interfaz gr√°fica de latex, y al apretar los botones con su respectiva imagen, el codigo se escribe en un textarea, y estaba intentando utilizar tu punto 8, pero si pongo el textarea adentro del pre… no funciona

  4. Raziel2099 dice:

    Creo que lo que estan buscando son resaltadores de codigo

    http://www.elwebmaster.com/general/los-mejores-resaltadores-de-sintaxis-de-codigo-para-tu-web

    Para los blogs El punto 11 es el que mas mola, diablos!, incluso para desarrollar en modo local o una web, pues te da el archivo CSS y ofrece una gran variedad de dise√Īos, ademas es compatible con varios tipos de sistemas operativos.

    Yo lo postearia en mi blog, pero no tendria sentido (quisas en otra ocasion). si quieren visitenlo y vallan a

    http://raziel2099.blogspot.com/2009/04/analizadorlexjava.html

    Veran un ejemplo.

    Aunque para mas seguridad he sustituido los espacios en blanco y tabs por &_n_b_s_p;_ (espacio HTML) jeje… pero el codigo que ofrece es bastante bueno… lo unico que hay que fijarse es que no haya espacios en blanco al final de las lineas del codigo fuente que se va a convertir… el editor de blogger da ese problema, pues le agrega una linea mas al codigo que ofrece el programa (en el caso de que haya espacios en blanco al final).

    Tambien te da la opcion de embeber el codigo CSS en las etiquetas y asi tener todo el codigo.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder