Coloration syntaxique
Colorer un listing, copier le balisage
Cette coloration syntaxique découpe un fichier en chaînes, commentaires, mots-clés et nombres, puis peint chacun. Copiez le résultat en HTML échappé, en bloc de traitement de texte, ou en texte brut débarrassé de la couleur. Rien de ce que vous collez ne quitte le navigateur.
- GratuitPrix
- 12Langages
- 4Sorties
- AucunEnvois
Coloriseur de syntaxe
Colorisez un listing en douze langages, puis copiez le HTML échappé, un bloc de traitement de texte, du texte brut ou la feuille de style
Si vous utilisez un lecteur d’écran, l’onglet texte brut est la copie lisible : les autres portent un span autour de chaque token.
Prêt. Collez un listing, ou appuyez sur un des boutons d’exemple.
Ce que fait une coloration syntaxique
Une couleur est une affirmation sur ce qu’est un morceau de texte. Par conséquent un listing coloré se lit plus facilement. Le lecteur saisit la forme d’un fichier avant d’en lire une ligne.
C’est tout le travail de cette coloration syntaxique. Elle découpe le texte en tokens, décide de ce qu’est chacun, et donne une couleur à chaque classe.
Elle connaît douze langages, et elle traite une chaîne, un commentaire, un mot-clé, un nombre et un nom comme des choses distinctes. Parce que la décision vient d’un tokeniseur et non d’une correspondance de motif, un mot-clé dans un commentaire reste un commentaire.
Quatre sorties viennent d’une seule passe. Du HTML échappé à coller dans une page, un bloc de traitement de texte, du texte brut, et une petite feuille de style pour les couleurs seules.
Tout tourne dans cet onglet. Par conséquent un listing inachevé se colore exactement comme un listing publié.
Comment une coloration syntaxique découpe le code en tokens
Le lecteur parcourt le texte une fois, en portant un état et une pile. À chaque caractère il décide s’il se trouve dans une chaîne, un commentaire, un nombre ou du code ordinaire. Il émet un token quand cet état change.
Une liste de mots-clés par langage fournit le reste. La liste est courte à dessein, parce que la question utile est de savoir quels mots le langage réserve. Cette liste de mots réservés est ce que publient les documents de référence.
Parce que le lecteur porte cet état, un mot dans un commentaire n’est pas un mot-clé. C’est la différence entre un coloriseur et un chercher-remplacer. C’est aussi la première chose à regarder quand un listing coloré semble faux.
Un langage qui imbrique les commentaires de bloc a besoin d’un compteur de profondeur plutôt que d’un drapeau. Un langage qui autorise un gabarit de chaîne a besoin d’une pile. Les deux sont tenues pour qu’un délimiteur interne ne puisse pas fermer un bloc externe.
Rien ici ne change le texte qu’un lecteur reçoit. Une copie de la sortie brute est octet pour octet ce que vous avez collé, ce qui compte quand le listing vient d’un terminal.
Pourquoi la sortie échappe avant de colorer
Du code coloré est du balisage, et du balisage collé dans une page est du balisage que le navigateur exécute. Donc les chevrons d’un listing doivent devenir des entités avant tout le reste.
Ce n’est pas un détail de mise en forme. Un extrait copié depuis un gestionnaire de tickets peut porter une balise script, et une page qui le colle brut vient d’exécuter le code d’un inconnu.
Ici, chaque sortie échappe d’abord et colore ensuite. Parce que l’échappement a lieu avant que l’outil écrive le moindre span, un listing ne peut pas introduire un élément de son cru.
La même règle couvre un attribut. Un commentaire qui contient un guillemet part dans le texte du span plutôt que dans un attribut. Donc il ne peut rien fermer trop tôt.
C’est pourquoi la sortie HTML vaut la peine d’être copiée d’ici plutôt que d’un éditeur qui colore pour l’affichage seul. Les couleurs paraissent identiques et une seule des deux est sûre à coller.
Les douze langages, et ce qu’il faut à chacun
Quatre d’entre eux partagent une grammaire avec un voisin. JavaScript, TypeScript et JSON sont assez proches pour qu’un seul lecteur couvre les trois. CSS et SCSS partagent un lecteur de la même façon.
La famille C ajoute une ligne de préprocesseur. Le lecteur traite une ligne à dièse à part avant de tokeniser le reste de cette ligne. C’est pourquoi include et define ressortent d’une couleur différente du code autour.
Python et Ruby ont tous deux besoin de tenir compte de l’indentation. Une chaîne à triples guillemets et un heredoc ne finissent pas à un saut de ligne. Donc le lecteur doit garder la chaîne ouverte sur plusieurs lignes.
PHP et HTML s’entrelacent, donc le lecteur change de mode à la balise ouvrante. Parce que les deux grammaires sont différentes, une passe unique qui ignorerait le changement colorerait le HTML comme s’il était du PHP.
SQL et Bash sont les deux derniers, et tous deux sont orientés ligne. Un marqueur de commentaire diffère entre eux, ce qui est le genre de détail qui décide si un listing se lit correctement.
Les quatre sorties, et quand se servir de chacune
Le HTML échappé est la première, et c’est celle d’une page. Chaque token devient un span avec une classe. L’outil échappe le texte à l’intérieur en entités, donc le bloc tombe dans un article sans autre travail.
Le bloc de traitement de texte est la deuxième. Comme un traitement de texte ignore votre feuille de style, les couleurs arrivent en styles en ligne sur chaque span, ce qui survit à un collage dans un document.
Le texte brut est la troisième, et il garde l’indentation et le nombre de lignes sans une seule couleur. Servez-vous-en quand le listing va dans un terminal ou un message de commit, là où le balisage serait du bruit.
La feuille de style est la quatrième. Elle porte les douze règles de couleur sans balisage attaché. Donc un site qui enveloppe déjà ses propres spans peut adopter la palette sans adopter la sortie.
Sur cette page
- L’outil
- Ce que fait une coloration syntaxique
- Comment utiliser la coloration syntaxique
- Pourquoi utiliser cette coloration syntaxique
- Des habitudes qui gardent un listing lisible
- Six façons dont un listing coloré tourne mal
- Questions sur la coloration syntaxique
- Des outils qui vont avec celui-ci
Continuer
Comment utiliser la coloration syntaxique
Quatre étapes, et aucune n’a besoin d’un compte.
- 1
Choisir le langage
Donc choisissez parmi les douze. La liste de mots-clés et les marqueurs de commentaire viennent tous deux de ce réglage. Par conséquent un mauvais choix est la raison habituelle d’un listing à moitié coloré.
- 2
Coller le listing
Puis collez le code. L’indentation est gardée telle que collée, donc un fichier déjà mis en page se lit comme dans un éditeur.
- 3
Régler la gouttière et le thème
Ensuite, décidez si les numéros de ligne appartiennent à la sortie et prenez une palette claire ou sombre. Comme les deux choix entrent dans le balisage, réglez-les avant de copier.
- 4
Copier la forme qu’il vous faut
Enfin, prenez le HTML, le bloc de traitement de texte, le texte brut ou la feuille de style. Après cela, collez-le là où le listing a sa place.
Pourquoi utiliser cette coloration syntaxique
Cinq raisons, et la deuxième est celle qui compte le plus.
Elle échappe avant de colorer
Parce que le texte est échappé en entités d’abord, un listing collé ne peut pas introduire un élément ni un attribut de son cru. Donc la sortie est sûre à poser sur une page.
Elle porte un état, pas des motifs
Un mot-clé dans un commentaire reste un commentaire, et une accolade dans une chaîne reste du texte. Par conséquent les couleurs correspondent à ce que le langage veut vraiment dire.
Quatre sorties d’une seule passe
Une page, un traitement de texte, un terminal et une feuille de style veulent chacun une forme différente. Donc un seul collage couvre celui qu’il vous faut ensuite.
Rien n’est envoyé
La tokenisation et la coloration ont toutes deux lieu dans cet onglet seul. Donc une feuille de style non publiée reçoit un traitement identique.
Les règles de couleur sont à vous
La sortie feuille de style porte la palette sans balisage attaché. Donc un site qui enveloppe déjà ses propres spans peut adopter les couleurs et rien d’autre.
Des habitudes qui gardent un listing lisible
Six habitudes qui décident si du code coloré aide vraiment.
- Montrer l’extrait le plus court qui prouve le point Un listing de trente lignes est survolé et un de six lignes est lu. Comme un lecteur cherche la forme plutôt que tout le fichier, coupez avant de colorer.
- Garder l’indentation telle que l’auteur l’a écrite Réindenter un extrait change son apparence dans le fichier d’origine. Donc laissez la profondeur tranquille et laissez le lecteur la comparer à la source.
- Recourir à la gouttière seulement au-delà de dix lignes Les numéros de ligne aident quand un lecteur doit citer une ligne. Sous dix lignes ils sont du bruit à côté d’un code qu’un lecteur peut compter.
- Accorder la palette à la page Un bloc sombre dans un article clair détourne l’œil de l’argument. Comme les deux palettes sont offertes, prenez celle qui s’accorde avec la page autour.
- Copier le HTML plutôt que le bloc rendu Glisser un bloc coloré hors d’un navigateur perd les classes et garde un fouillis de styles en ligne. Par conséquent servez-vous du bouton copier, qui écrit le balisage que vous pouvez lire.
- Garder une copie texte brut pour le terminal Du balisage dans un message de commit ou une session shell devient des caractères plutôt que de la couleur. Donc gardez la sortie brute à côté de la colorée.
Six façons dont un listing coloré tourne mal
Chacune a l’air correcte dans l’aperçu et échoue là où elle arrive.
Coller du balisage brut dans une page
Attention ici. Un listing collé sans échappement est du balisage que le navigateur exécute, et une seule balise script dans un commentaire suffit. Donc utilisez la sortie HTML plutôt qu’une copie d’un autre éditeur.
Choisir le mauvais langage
Une liste de mots-clés d’un langage laisse les mots d’un autre non colorés. Comme le résultat a encore l’air voulu, il est facile à livrer par accident.
S’attendre à ce qu’un gabarit de chaîne finisse au saut de ligne
Un accent grave garde une chaîne ouverte sur plusieurs lignes. Donc un gabarit non fermé en haut colore le reste du fichier comme une seule chaîne, ce qui se lit comme un bug de l’outil.
Colorer un diff comme du source
Un plus ou un moins en début de ligne ne fait pas partie du langage. Donc collez les deux côtés séparément, sinon le premier caractère de chaque ligne est déjà faux.
Activer la gouttière pour un extrait copié
Un lecteur qui copie un listing numéroté reçoit les numéros avec le code. Comme le collage refuse alors de s’exécuter, gardez la gouttière pour une page qu’un lecteur ne fait que lire.
Croire que les couleurs portent un sens
Une couleur seule est un signal faible pour un lecteur qui ne la voit pas. Par conséquent les mots comptent plus que la palette, et un listing doit rester sensé sans couleur.
Questions sur la coloration syntaxique
Cette coloration syntaxique est-elle gratuite ?
Oui. Il n’y a ni compte, ni limite, ni offre payante. Donc vous colorez autant de listings que vous voulez.
Quels langages sont pris en charge ?
Douze : JavaScript, TypeScript, JSON, HTML, CSS, SCSS, PHP, Python, Ruby, Java, SQL et Bash. Quatre d’entre eux partagent un lecteur avec un voisin.
La sortie est-elle sûre à coller dans une page ?
La sortie HTML l’est, car l’outil échappe le texte en entités avant même d’écrire le premier span. Ainsi une balise script glissée dans un extrait arrive comme texte et non comme élément.
Où vont les chevrons ?
Ils deviennent des entités, donc le navigateur les affiche au lieu de les lire comme du balisage. C’est toute la raison d’être de la sortie échappée.
Pourquoi un mot-clé dans mon commentaire n’est-il pas coloré ?
Parce qu’il est à l’intérieur d’un commentaire, et le lecteur le sait. Un coloriseur qui décide d’après l’orthographe seule se tromperait ici, et celui-ci décide d’après l’état.
Puis-je avoir le résultat sans aucun balisage ?
Oui. La sortie texte brut garde l’indentation et le nombre de lignes et n’ajoute aucune couleur. C’est la copie pour un message de commit ou un terminal.
Fonctionne-t-elle dans un traitement de texte ?
Oui, par la sortie traitement de texte. Comme un document ignore une feuille de style, les couleurs arrivent en styles en ligne sur chaque span.
Puis-je réutiliser les couleurs sur mon site ?
Oui. La sortie feuille de style porte les douze règles sans balisage attaché, donc vos propres spans peuvent adopter la palette.
Mon code est-il envoyé quelque part ?
Non. La tokenisation et la coloration ont toutes deux lieu dans cet onglet. Donc un fichier non publié ne franchit jamais le réseau.
Modifie-t-il mon code ?
Non. La sortie brute est octet pour octet ce que vous avez collé, et la sortie colorée ne diffère que par les spans autour du texte.
Puis-je colorer tout un fichier ?
Oui. Un fichier de quelques milliers de lignes se colore en un instant, et la limite tient à votre machine plutôt qu’à un quota serveur.
Vérifie-t-il les erreurs de mon code ?
Non. Un coloriseur répond à la question de ce qu’est un token, pas de la validité du programme. Donc lancez le validateur pour cette question.
Puis-je colorer un diff ?
Pas directement, car un plus ou un moins en début de ligne ne fait pas partie du langage. Donc collez les deux côtés séparément.
Numérote-t-il les lignes ?
Oui, si vous le demandez. La gouttière entre dans la sortie, donc décidez avant de copier, et laissez-la de côté pour un extrait qu’un lecteur pourrait coller.
À quoi sert l’option clair et sombre ?
Elle échange la palette pour que le bloc s’accorde avec la page autour. Les tokens restent les mêmes dans les deux cas, et seules les couleurs bougent.
Gère-t-il un gabarit de chaîne sur plusieurs lignes ?
Oui. Parce que le lecteur garde la chaîne ouverte au saut de ligne, un gabarit multiligne se colore comme une seule chaîne plutôt que comme du code.
Puis-je colorer un listing pour une diapo ?
La sortie traitement de texte est celle qu’il faut. Donc collez le bloc dans le document et il garde ses couleurs.
Pourquoi mon listing est-il à moitié coloré ?
La cause habituelle est une chaîne ou un commentaire non fermé au-dessus, qui avale les lignes suivantes. Donc vérifiez le haut du collage d’abord.
Fonctionne-t-elle sur téléphone ?
Oui. Les volets s’empilent et les onglets se replient en rangées. Donc un listing court est possible loin d’un bureau, même si un long fichier est plus simple au clavier.
Faut-il un compte ou une extension ?
Non. Il n’y a ni inscription, ni plugin, ni extension à ajouter. Donc vous fermez l’onglet une fois le listing dans le presse-papiers.
Des outils qui vont avec celui-ci
Quatre pages où mène souvent le même travail.
Encodeur d’entités HTML
L’étape d’échappement à elle seule. Comme un extrait peut porter du balisage, encoder les chevrons d’abord est l’habitude à garder.
Ouvrir l’outil →Beautificateur de code
Un listing se lit mieux quand la mise en page est stable. Donc réindentez le fichier avant de le colorer.
Ouvrir l’outil →Minificateur JavaScript
Une fois le bloc sur une page, le script à côté peut maigrir. Donc le téléchargement qu’attend un visiteur rétrécit.
Ouvrir l’outil →Minificateur HTML
Une fois le bloc sur une page, le balisage autour peut maigrir. Comme un navigateur télécharge chaque commentaire, c’est la dernière étape.
Ouvrir l’outil →
Colorer le listing et copier le balisage
Choisissez le langage, collez le code, prenez une palette puis la forme de sortie qu’il vous faut. Rien n’est envoyé, car l’outil échappe le texte avant de le colorer, donc le bloc est sûr à poser sur une page. La plupart des listings sont prêts avant que le thé refroidisse.