Codice di evidenziazione della sintassi con Javascript [chiuso]


109

Quali librerie Javascript puoi consigliare per evidenziare la sintassi <code> blocchi in HTML?

(Un suggerimento per risposta per favore).


Risposte:


103

StackOverflow utilizza la libreria Prettify .


Secondo questo. Google Code lo utilizza per l'evidenziazione del proprio repository (da quando l'hanno scritto) e rileva automaticamente la lingua.
Karan

Sicuramente usarne uno che rilevi "automaticamente" la lingua dà semplicemente più peso alla macchina / browser del cliente ...
James

2
Puoi dare la lingua a Prettify se la conosci, migliorerà le prestazioni. Questo non viene utilizzato in StackOverflow a causa del vasto pubblico di lingue.
Vincent Robert

L'ho appena aggiunto al mio sito web ed è fantastico e così semplice da usare!
Lawrence Dol,

@ Vincent: migliora più della semplice prestazione ;-)
SamB

44

Di recente ne ho sviluppato uno chiamato arcobaleno.

L'obiettivo principale del progetto era quello di rendere la libreria di base davvero piccola e renderla davvero facile da estendere per gli sviluppatori.

Vedi http://rainbowco.de .


2
Ho appena incontrato Rainbow oggi - mi sembra che possa discriminare più finemente di Prettify (come ad esempio, essere in grado di dire quando rdf:typeè usato come elemento e quando è un attributo).
Roger_S

3
Questo deve salire in cima, Craig. Ho provato tutte le altre soluzioni e solo Rainbow ha gestito correttamente Python e aveva fogli di stile del tema leggibili . Plugin incredibile!
Blender


15

jQuery Syntax Highlighter è uno nuovo basato su Prettify di Google, un evidenziatore di sintassi javascript semplice davvero molto popolare.

Supporta cose come codee preblocchi, in grado di usare nomi di classe come language-javascriptper indicare che vogliamo che sia evidenziato, così come il wordwrap. Puoi copiare e incollare il codice selezionandolo normalmente invece di dover aprire una visualizzazione raw come molte altre. Può essere ulteriormente personalizzato utilizzando l'attributo dati HTML5 data-sho specificando le opzioni durante l'inizializzazione. Un'ottima scelta stabile che viene aggiornata regolarmente.


L'autore dice in realtà che si basa su Prettify di Google, non su SyntaxHighlighter. Sembra proprio come SyntaxHighlighter 3, però, ma sembra richiedere molto meno lavoro per la configurazione. Grazie per il collegamento!
Tieson T.

15

Che dire di Prism di Lea Verou.

Dal suo annuncio sul blog di giugno (2012):

  • È minuscolo. Il core è solo 1,5 KB minimizzato e compresso con gzip.
  • È incredibilmente estensibile. Non solo è facile aggiungere nuove lingue (questo è un dato di fatto con ogni evidenziatore di sintassi in questi giorni), ma anche estendere quelle esistenti.
  • Supporta il parallelismo tramite Web Worker, per prestazioni migliori in alcuni casi.
  • Non ti obbliga a utilizzare alcun markup specifico per Prism, nemmeno un nome di classe specifico per Prism, ma solo markup standard che dovresti usare comunque. Quindi, puoi semplicemente provarlo per un po ', rimuoverlo se non ti piace e non lasciare tracce.

Questa ha finito per essere l'opzione migliore di tutte le risposte per me a causa della facilità di aggiungere nuove definizioni di lingua.
Mike Grace


5

Se stai usando jQuery c'è il peperoncino:

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

Tutto quello che devi fare è includere jquery-chili.js e ricette.js e fare il punto culminante con

$("code").chili();

Dovrebbe capire da solo la lingua.


I collegamenti agli esempi in quella pagina portano tutti a un dominio scaduto pieno di annunci, quindi è un po 'difficile avere un'idea di come appare questo evidenziatore.
Nathan Osman

5

Sono molto soddisfatto di SHJS . Supporta un gran numero di lingue e sembra abbastanza veloce e preciso.

Ecco un esempio in cui lo uso sul mio blog . Sto usando il mio file CSS personalizzato che simula l' evidenziazione della sintassi di Coda . Inviami un'email se desideri utilizzarlo.


4

jQuery.Syntax è un evidenziatore di sintassi estremamente veloce e leggero. Ha il caricamento dinamico dei file di origine della sintassi e si integra in modo pulito utilizzando CSS o modeline.

È stato sviluppato appositamente per colmare una lacuna, ovvero un parser della sintassi lato client veloce, pulito.


sfortunatamente pensava che un messaggio FpML standard fosse SPAM :)
ehosca

@ehosca, puoi darmi qualche chiarimento sul problema che stai riscontrando?
ioquatix

quando incollo l'xml in goo.gl/PPcDx in goo.gl/qSqm9 viene visualizzato il messaggio Contenuto non valido, sembra essere spam. spero che questo ti aiuti.
ehosca

È necessario includere alcune interruzioni di riga nel testo, altrimenti sembra che il link sia spam. Non riesco a ricordare le formule esatte che ho usato, ma penso che se hai più di un URL per riga il testo è considerato spam - questo perché un mucchio di bot stavano inviando spam al sistema ( syntax-highlighing.com ).
ioquatix


3

Non sono polemico, ma ho solo pensato che valesse la pena ricordare che se stai usando un CMS o una piattaforma di blog, è meglio usare un evidenziatore di backend per ovvi motivi - Dai un'occhiata a Geshi ( http://qbnz.com/highlighter/ ) se sei interessato. In realtà potresti configurare il tuo server per analizzare il contenuto HTML tramite una tecnologia di backend, quindi non c'è affatto bisogno degli evidenziatori JS. (L'unica funzionalità che aggiungono è la possibilità di stampare / copiare [usando swf].)


2
Non è ovvio per me. Perché è meglio usare un evidenziatore di backend?
Evan P.

1
Sì, anch'io mi piacerebbe davvero sapere cosa è "ovvio" nel preferire inviare una risposta più ampia al cliente ...
ZenMaster

1
Preferisco che l'evidenziazione della sintassi sia ancora presente sui dispositivi che non hanno JS abilitato. Inoltre, gli evidenziatori lato client hanno costi di runtime che possono essere piuttosto elevati se hai molto codice da evidenziare. Detto questo, dipende dal tuo caso d'uso specifico :)
James il

Quali dispositivi non hanno JS abilitato?
Jack Giffin


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.