Colorazione della sintassi
Colorare un listato, copiare il markup
Questa colorazione della sintassi tokenizza un file in stringhe, commenti, parole chiave e numeri, poi dipinge ciascuno. Copiate il risultato come HTML con escape, come blocco per l’elaboratore di testi, o come testo semplice senza colore. Nulla di ciò che incollate lascia il browser.
- GratisPrezzo
- 12Linguaggi
- 4Output
- NessunoCaricamenti
Colorazione della sintassi
Colorate un listato in dodici linguaggi, poi copiate l’HTML con escape, un blocco per l’elaboratore di testi, testo semplice o il solo foglio di stile
Se usate un lettore di schermo, la scheda testo semplice è la copia leggibile: le altre portano uno span intorno a ogni token.
Pronto. Incollate un listato, o premete uno dei pulsanti di esempio.
Cosa fa una colorazione della sintassi
Un colore è un’affermazione su cosa è un pezzo di testo. Di conseguenza un listato colorato è più facile da leggere. Il lettore coglie la forma di un file prima di leggere una sua riga.
È tutto il lavoro di questa colorazione della sintassi. Divide il testo in token, decide cosa è ciascuno, e dà una classe di colore a ognuno.
Conosce dodici linguaggi, e tratta una stringa, un commento, una parola chiave, un numero e un nome come cose diverse. Poiché la decisione viene da un tokenizer e non da un pattern, una parola chiave dentro un commento resta un commento.
Quattro output escono da una sola passata. HTML con escape da incollare in una pagina, un blocco per l’elaboratore di testi, testo semplice, e un piccolo foglio di stile per i soli colori.
Tutto gira in questa scheda. Di conseguenza un listato incompleto si colora esattamente come uno pubblicato.
Come una colorazione della sintassi divide il codice in token
Il lettore percorre il testo una volta, portando uno stato e una pila. A ogni carattere decide se si trova dentro una stringa, un commento, un numero o codice normale. Emette un token quando quello stato cambia.
Un elenco di parole chiave per linguaggio fornisce il resto. L’elenco è corto di proposito, perché la domanda utile è quali parole il linguaggio riserva. Quell’elenco di parole riservate è ciò che pubblicano i documenti di riferimento.
Poiché il lettore porta quello stato, una parola dentro un commento non è una parola chiave. È la differenza tra un coloratore e un trova e sostituisci. È anche la prima cosa da guardare quando un listato colorato sembra sbagliato.
Un linguaggio che annida i commenti di blocco ha bisogno di un contatore di profondità invece che di una bandiera. Uno che consente un template literal ha bisogno di una pila. Entrambe sono tenute perché un delimitatore interno non possa chiudere un blocco esterno.
Nulla qui cambia il testo che un lettore riceve. Una copia dell’output semplice è byte per byte ciò che avete incollato, cosa che conta quando il listato viene da un terminale.
Perché l’output fa l’escape prima di colorare
Del codice colorato è markup, e del markup incollato in una pagina è markup che il browser esegue. Quindi le parentesi angolari di un listato devono diventare entità prima di tutto il resto.
Non è un dettaglio di formattazione. Un frammento copiato da un issue tracker può portare un tag script, e una pagina che lo incolla grezzo ha appena eseguito il codice di uno sconosciuto.
Qui ogni output fa l’escape prima e colora dopo. Poiché l’escape avviene prima che lo strumento scriva un solo span, un listato non può introdurre un elemento suo.
La stessa regola copre un attributo. Un commento che contiene un virgoletta finisce nel testo dello span invece che in un attributo. Quindi non può chiudere nulla in anticipo.
Ecco perché vale la pena copiare l’output HTML da qui invece che da un editor che colora solo per l’anteprima. I colori sembrano identici e solo uno dei due è sicuro da incollare.
I dodici linguaggi, e cosa serve a ciascuno
Quattro di loro condividono una grammatica con un fratello. JavaScript, TypeScript e JSON sono abbastanza vicini perché un solo lettore li copra tutti e tre. CSS e SCSS condividono un lettore allo stesso modo.
La famiglia C aggiunge una riga di preprocessore. Il lettore prende una riga con cancelletto a parte prima di tokenizzare il resto di quella riga. Ecco perché include e define escono di un colore diverso dal codice intorno.
Python e Ruby hanno entrambi bisogno di attenzione all’indentazione. Una stringa con triplici virgolette e un heredoc non finiscono a un fine riga. Quindi il lettore deve tenere la stringa aperta tra le righe.
PHP e HTML si intrecciano, quindi il lettore cambia modalità al tag di apertura. Poiché le due grammatiche sono diverse, una passata unica che ignorasse il cambio colorerebbe l’HTML come se fosse PHP.
SQL e Bash sono gli ultimi due, ed entrambi sono orientati alla riga. Un marcatore di commento differisce tra loro, che è il tipo di dettaglio che decide se un listato si legge bene.
I quattro output, e quando usare ciascuno
L’HTML con escape è il primo, ed è quello per una pagina. Ogni token diventa uno span con una classe. Lo strumento fa l’escape del testo dentro in entità, quindi il blocco cade in un articolo senza altro lavoro.
Il blocco per l’elaboratore di testi è il secondo. Poiché un elaboratore di testi ignora il vostro foglio di stile, i colori arrivano come stili inline su ogni span, che sopravvive a un incolla in un documento.
Il testo semplice è il terzo, e tiene l’indentazione e il numero di righe senza un solo colore. Usatelo quando il listato va in un terminale o in un messaggio di commit, dove il markup sarebbe rumore.
Il foglio di stile è il quarto. Porta le dodici regole di colore senza markup allegato. Quindi un sito che già avvolge i suoi span può adottare la tavolozza senza adottare l’output.
In questa pagina
- Lo strumento
- Cosa fa una colorazione della sintassi
- Come usare la colorazione della sintassi
- Perché usare questa colorazione della sintassi
- Abitudini che tengono leggibile un listato
- Sei modi in cui un listato colorato va storto
- Domande sulla colorazione della sintassi
- Strumenti che vanno con questo
Continua
Come usare la colorazione della sintassi
Quattro passi, e nessuno ha bisogno di un account.
- 1
Scegli il linguaggio
Quindi scegliete tra i dodici. L’elenco di parole chiave e i marcatori di commento vengono entrambi da questa impostazione. Perciò una scelta sbagliata è la ragione più comune di un listato mezzo colorato.
- 2
Incolla il listato
Poi incollate il codice. L’indentazione è tenuta come incollata, quindi un file già impaginato si legge come in un editor.
- 3
Imposta la colonna e il tema
Poi decidete se i numeri di riga appartengono all’output e prendete una tavolozza chiara o scura. Poiché entrambe le scelte entrano nel markup, impostatele prima di copiare.
- 4
Copia la forma che ti serve
Infine prendete l’HTML, il blocco per l’elaboratore di testi, il testo semplice o il foglio di stile. Dopo di che, incollatelo dove il listato ha il suo posto.
Perché usare questa colorazione della sintassi
Cinque ragioni, e la seconda è quella che conta di più.
Fa l’escape prima di colorare
Poiché il testo è prima portato a entità, un listato incollato non può introdurre un elemento né un attributo suo. Quindi l’output è sicuro da mettere su una pagina.
Porta uno stato, non dei pattern
Una parola chiave dentro un commento resta un commento, e una graffa dentro una stringa resta testo. Perciò i colori corrispondono a ciò che il linguaggio vuole davvero dire.
Quattro output da una sola passata
Una pagina, un elaboratore di testi, un terminale e un foglio di stile vogliono ciascuno una forma diversa. Quindi un solo incolla copre quello che vi serve dopo.
Niente viene caricato
La tokenizzazione e la colorazione avvengono entrambe in questa sola scheda. Quindi un foglio di stile non pubblicato riceve lo stesso trattamento.
Le regole di colore sono tue
L’output foglio di stile porta la tavolozza senza markup allegato. Quindi un sito che già avvolge i suoi span può adottare i colori e nient’altro.
Abitudini che tengono leggibile un listato
Sei abitudini che decidono se il codice colorato aiuta davvero.
- Mostra il frammento più corto che dimostra il punto Un listato di trenta righe viene sfogliato e uno di sei righe viene letto. Poiché un lettore cerca la forma e non tutto il file, tagliate prima di colorare.
- Tieni l’indentazione come l’ha scritta l’autore Reindentare un frammento cambia il suo aspetto nel file da cui viene. Quindi lasciate stare la profondità e fate sì che il lettore la confronti con la sorgente.
- Ricorri alla colonna solo oltre le dieci righe I numeri di riga aiutano quando un lettore deve citare una riga. Sotto le dieci righe sono rumore accanto a codice che un lettore può contare.
- Fai combaciare la tavolozza con la pagina Un blocco scuro in un articolo chiaro porta l’occhio via dall’argomento. Poiché entrambe le tavolozze sono offerte, prendete quella che è d’accordo con la pagina intorno.
- Copia l’HTML invece del blocco renderizzato Trascinare un blocco colorato fuori da un browser perde le classi e tiene un pasticcio di stili inline. Perciò usate il pulsante copia, che scrive il markup che potete leggere.
- Tieni una copia testo semplice per il terminale Il markup in un messaggio di commit o in una sessione shell diventa caratteri invece che colore. Quindi tenete l’output semplice accanto a quello colorato.
Sei modi in cui un listato colorato va storto
Ciascuno sembra a posto nell’anteprima e fallisce dove arriva.
Incollare markup grezzo in una pagina
Attenzione qui. Un listato incollato senza escape è markup che il browser esegue, e un solo tag script in un commento basta. Quindi usate l’output HTML invece di una copia da un altro editor.
Scegliere il linguaggio sbagliato
Un elenco di parole chiave di un linguaggio lascia le parole di un altro non colorate. Poiché il risultato sembra comunque voluto, è facile pubblicarlo per sbaglio.
Aspettarsi che un template literal finisca al fine riga
Un backtick tiene una stringa aperta tra le righe. Quindi un template non chiuso in alto colora il resto del file come una sola stringa, che si legge come un bug dello strumento.
Colorare un diff come sorgente
Un più o un meno a inizio riga non fa parte del linguaggio. Quindi incollate i due lati separatamente, altrimenti il primo carattere di ogni riga è già sbagliato.
Accendere la colonna per un frammento copiato
Un lettore che copia un listato numerato riceve i numeri con il codice. Poiché l’incolla poi non parte, tenete la colonna per una pagina che un lettore legge e basta.
Credere che i colori portino un significato
Un colore da solo è un segnale debole per un lettore che non lo vede. Perciò le parole contano più della tavolozza, e un listato deve avere senso anche senza colore.
Domande sulla colorazione della sintassi
Questa colorazione della sintassi è gratuita?
Sì. Non c’è account, né limite, né livello a pagamento. Quindi colorate tutti i listati che volete.
Quali linguaggi supporta?
Dodici: JavaScript, TypeScript, JSON, HTML, CSS, SCSS, PHP, Python, Ruby, Java, SQL e Bash. Quattro di loro condividono un lettore con un fratello.
L’output è sicuro da incollare in una pagina?
Quello HTML sì, perché lo strumento fa l’escape del testo in entità prima ancora di scrivere il primo span. Così un tag script dentro un frammento incollato arriva come testo e non come elemento.
Dove finiscono le parentesi angolari?
Diventano entità, quindi il browser le mostra invece di leggerle come markup. È tutto il motivo per cui esiste l’output con escape.
Perché una parola chiave nel mio commento non è colorata?
Perché è dentro un commento, e il lettore lo sa. Un coloratore che decide solo dalla grafia sbaglierebbe qui, e questo decide dallo stato.
Posso avere il risultato senza alcun markup?
Sì. L’output testo semplice tiene l’indentazione e il numero di righe e non aggiunge colore. È la copia per un messaggio di commit o un terminale.
Funziona in un elaboratore di testi?
Sì, tramite l’output per l’elaboratore di testi. Poiché un documento ignora un foglio di stile, i colori arrivano come stili inline su ogni span.
Posso usare i colori sul mio sito?
Sì. L’output foglio di stile porta le dodici regole senza markup allegato, quindi i vostri span possono adottare la tavolozza.
Il mio codice viene caricato da qualche parte?
No. La tokenizzazione e la colorazione avvengono entrambe in questa scheda. Quindi un file non pubblicato non attraversa mai la rete.
Modifica il mio codice?
No. L’output semplice è byte per byte ciò che avete incollato, e l’output colorato differisce solo per gli span intorno al testo.
Posso colorare un intero file?
Sì. Un file di qualche migliaio di righe si colora in un attimo, e il limite è la vostra macchina più che una quota del server.
Controlla gli errori del mio codice?
No. Un coloratore risponde a cosa è un token, non se il programma è valido. Quindi lanciate il validatore per quella domanda.
Posso colorare un diff?
Non direttamente, perché un più o un meno a inizio riga non fa parte del linguaggio. Quindi incollate i due lati separatamente.
Numera le righe?
Sì, se glielo chiedete. La colonna entra nell’output, quindi decidete prima di copiare, e lasciatela fuori per un frammento che un lettore potrebbe incollare.
A cosa serve l’opzione chiaro e scuro?
Scambia la tavolozza perché il blocco sia d’accordo con la pagina intorno. I token sono gli stessi in entrambi i casi, e si muovono solo i colori.
Gestisce un template literal su più righe?
Sì. Poiché il lettore tiene la stringa aperta al fine riga, un template multilinea si colora come una sola stringa invece che come codice.
Posso colorare un listato per una slide?
L’output per l’elaboratore di testi è quello giusto. Quindi incollate il blocco nel documento e mantiene i suoi colori.
Perché il mio listato è mezzo colorato?
La causa di solito è una stringa o un commento non chiuso sopra, che inghiotte le righe dopo. Quindi controllate prima la parte alta dell’incolla.
Funziona su telefono?
Sì. I riquadri si impilano e le schede si avvolgono in righe. Quindi un listato corto è possibile lontano da una scrivania, anche se un file lungo è più facile con una tastiera.
Serve un account o un’estensione?
No. Non c’è iscrizione, né plugin, né estensione da aggiungere. Quindi chiudete la scheda una volta che il listato è negli appunti.
Strumenti che vanno con questo
Quattro pagine a cui di solito porta lo stesso lavoro.
Codificatore di entità HTML
Il passo dell’escape da solo. Poiché un frammento può portare markup, codificare prima le parentesi è l’abitudine da tenere.
Apri lo strumento →Beautifier di codice
Un listato si legge meglio quando il layout è stabile. Quindi reindentate il file prima di colorarlo.
Apri lo strumento →Minificatore JavaScript
Una volta che il blocco è su una pagina, lo script accanto può rimpicciolirsi. Quindi il download che un visitatore attende diventa più piccolo.
Apri lo strumento →Minificatore HTML
Una volta che il blocco è su una pagina, il markup intorno può rimpicciolirsi. Poiché un browser scarica ogni commento, è l’ultimo passo.
Apri lo strumento →
Colorare il listato e copiare il markup
Scegliete il linguaggio, incollate il codice, prendete una tavolozza e poi la forma di output che vi serve. Nulla viene caricato, perché lo strumento fa l’escape del testo prima di colorarlo, quindi il blocco è sicuro da mettere su una pagina. Quasi tutti i listati sono pronti prima che il tè si raffreddi.