Código de resaltado de sintaxis con Javascript [cerrado]

109

¿Qué bibliotecas de Javascript puede recomendar para resaltar la sintaxis de los bloques <code> en HTML?

(Una sugerencia por respuesta por favor).

javascript html syntax syntax-highlighting mlambie
fuente
shjs.sourceforge.net
Firoz Khan

Respuestas:

103

StackOverflow usa la biblioteca Prettify .

AaronSieb
fuente
Secundo esto. Google Code lo usa para resaltar su propio repositorio (desde que lo escribieron) y detecta automáticamente el idioma.
Karan
Seguramente usar uno que detecte "automáticamente" el idioma simplemente pone más peso en la máquina / navegador del cliente ...
James
2
Puedes darle el idioma a Prettify si lo conoces, mejorará el rendimiento. Esto simplemente no se usa en StackOverflow debido a la gran audiencia de idiomas.
Vincent Robert
Acabo de agregar esto a mi sitio web, ¡y es genial y muy fácil de usar!
Lawrence Dol
@Vincent: mejora más que el rendimiento ;-)
SamB
44

Recientemente desarrollé uno llamado arcoíris.

El objetivo principal del diseño era hacer que la biblioteca principal fuera realmente pequeña y que fuera realmente fácil de ampliar para los desarrolladores.

Ver http://rainbowco.de .

Craig
fuente
2
Hoy me encontré con Rainbow; me parece que puede discriminar más finamente que Prettify (como, por ejemplo, poder decir cuándo rdf:typese usa como un elemento y cuándo es un atributo).
Roger_S
3
Esto tiene que llegar a la cima, Craig. Probé todas las otras soluciones y solo Rainbow manejó Python correctamente y tenía hojas de estilo de tema legibles . ¡Complemento increíble!
Blender
15

jQuery Syntax Highlighter es uno nuevo basado en Prettify de Google un resaltador de sintaxis simple de JavaScript realmente muy popular.

Es compatible con cosas como codey prebloques, capaz de usar nombres de clase como language-javascriptpara indicar que queremos que se destaque, así como el ajuste de palabras. Puede copiar y pegar código seleccionándolo normalmente en lugar de tener que abrir una vista sin procesar como muchas otras. Se puede personalizar aún más utilizando el atributo de datos HTML5 data-sho especificando opciones en la inicialización. Una gran elección estable que se actualiza periódicamente.

balupton
fuente
El autor en realidad dice que se basa en Prettify de Google, no en SyntaxHighlighter. Sin embargo, se parece a SyntaxHighlighter 3, pero parece requerir mucho menos trabajo para configurarlo. Gracias por el enlace!
Tieson T.
15

¿Qué pasa con Prism de Lea Verou?

De su anuncio de publicación de blog en junio (2012):

  • Es diminuto. El núcleo tiene solo 1,5 KB minificado y comprimido con gzip.
  • Es increíblemente extensible. No solo es fácil agregar nuevos idiomas (eso es un hecho con cada resaltador de sintaxis en estos días), sino también extender los existentes.
  • Admite el paralelismo a través de Web Workers, para un mejor rendimiento en determinados casos.
  • No lo obliga a usar ningún marcado específico de Prism, ni siquiera un nombre de clase específico de Prism, solo el marcado estándar que debería usar de todos modos. Entonces, puedes probarlo por un tiempo, eliminarlo si no te gusta y no dejar rastros.
Ilya Tuvschev
fuente
Esta terminó siendo la mejor opción de todas las respuestas para mí debido a la facilidad de agregar nuevas definiciones de idioma.
Mike Grace
5

Si está usando jQuery, hay Chilli:

http://code.google.com/p/jquery-chili-js/

Todo lo que tienes que hacer es incluir jquery-chili.js y recipes.js, y resaltar con 

$("code").chili();

Debería descubrir el idioma por sí mismo.

Edu Felipe
fuente
Todos los enlaces a ejemplos en esa página conducen a un dominio vencido lleno de anuncios, por lo que es un poco difícil hacerse una idea de cómo se ve este resaltador.
Nathan Osman
5

Estoy muy contento con SHJS . Es compatible con varios idiomas y parece bastante rápido y preciso.

Aquí hay un ejemplo donde lo uso en mi blog . Estoy usando mi propio archivo CSS personalizado que simula el resaltado de sintaxis de Coda . Envíeme un correo electrónico si desea utilizarlo.

Andrew Hedges
fuente
4

jQuery.Syntax es un resaltador de sintaxis extremadamente rápido y ligero. Tiene carga dinámica de archivos fuente de sintaxis y se integra limpiamente usando CSS o modelos.

Fue desarrollado específicamente para llenar un vacío, es decir: un analizador de sintaxis del lado del cliente rápido y limpio.

ioquatix
fuente
desafortunadamente pensó que un mensaje FpML estándar era SPAM :)
ehosca
@ehosca, ¿puedes darme alguna aclaración sobre el problema que tienes?
ioquatix
cuando pego el xml en goo.gl/PPcDx en goo.gl/qSqm9 , dice Contenido no válido, parece ser spam. espero que esto ayude.
ehosca
Debe incluir algunos saltos de línea en el texto, de lo contrario, parece un enlace spam. No recuerdo las fórmulas exactas que utilicé, pero creo que si tienes más de una URL por línea, el texto se considera spam; esto se debe a que un montón de bots estaban enviando spam al sistema ( syntax-highlighing.com ).
ioquatix
3

Si está buscando resaltado de sintaxis en un editor en el navegador, pruebe CodeMirror .

rplevy
fuente
3

No estoy discutiendo, pero pensé que valía la pena mencionar que si estás usando un CMS o una plataforma de blog, entonces usar un resaltador de backend es mejor por razones obvias: echa un vistazo a Geshi ( http://qbnz.com/highlighter/ ) si está interesado. En realidad, podría configurar su servidor para analizar contenido HTML a través de una tecnología de backend, por lo que no hay necesidad de los resaltadores JS en absoluto. (La única funcionalidad que agregan es la capacidad de imprimir / copiar [usando swf]).

James
fuente
2
No es obvio para mí. ¿Por qué es mejor usar un resaltador de backend?
Evan P.
1
Sí, a mí también me encantaría saber qué es "obvio" acerca de preferir enviar una respuesta más amplia al cliente ...
ZenMaster
1
Prefiero que el resaltado de sintaxis todavía esté presente en dispositivos que no tienen JS habilitado. Además, los resaltadores del lado del cliente tienen costos de tiempo de ejecución que pueden ser bastante elevados si tiene mucho código para resaltar. Dicho esto, depende de su caso de uso específico :)
James
¿Qué dispositivos no tienen JS habilitado?
Jack Giffin