Syntax Highlighter — Coloration syntaxique en ligne

Code source

Langage

Aperçu du code

const palette = ['graphite', 'mint'];

function createSnippet(language) {
  return {
    language,
    theme: palette[0],
    accent: palette[1],
  };
}

console.log(createSnippet('javascript'));

{
  "language": "javascript",
  "theme": "github-dark",
  "output": "inline",
  "highlight": [],
  "highlightColor": "#60a5fa",
  "highlightOpacity": 25,
  "focusColor": "#60a5fa",
  "focusOpacity": 25,
  "addColor": "#22c55e",
  "addOpacity": 20,
  "removeColor": "#b91c1c",
  "removeOpacity": 30,
  "lineNumbers": false,
  "lineNumbersStart": 1,
  "lineNumberColor": "#888888",
  "focus": [],
  "add": [],
  "remove": [],
  "collapse": [],
  "diffIndicators": true,
  "diffInGutter": false,
  "autolink": false,
  "summary": "…"
}

La coloration syntaxique en ligne, prête à partager

Préparez des exemples de code lisibles pour vos documents, votre blog ou vos cours. Collez un extrait, ouvrez un fichier texte ou chargez un exemple, puis choisissez un thème clair ou sombre. Syntax Highlighter distingue les mots-clés, les chaînes et les commentaires sans modifier les retraits ni les sauts de ligne.

Mettez certaines lignes en évidence, attirez l’attention sur un bloc ou signalez les ajouts et les suppressions. Réglez leurs couleurs et leur opacité, ajoutez des numéros de ligne ou repliez une section longue en vérifiant le résultat. La coloration et l’export se font dans le navigateur, sans envoyer le code à un serveur pour le colorer.

Illustration de code coloré avec une ligne mise en évidence, un document HTML et une image du code

Un catalogue de langages avec recherche
Choisissez parmi 242 langages et formats, dont TypeScript, Java, C++, Go, Rust, JSON et YAML. Recherchez par nom ou alias et chargez un exemple depuis les cartes ci-dessous.
Aperçu en direct et thèmes de couleurs
Modifiez le code pour actualiser l’aperçu. Parcourez les thèmes de couleurs ou filtrez les thèmes clairs et sombres pour comparer le même extrait sur différents fonds.
Exportez du HTML ou une image
Copiez le HTML, téléchargez les fichiers avec des styles en ligne, un CSS séparé ou Tailwind CSS, ou enregistrez le rendu en PNG. L’aperçu utilise le format de sortie choisi pour vous permettre de vérifier la présentation avant de la partager.

Comment colorer du code en ligne

Collez du code ou essayez un exemple
Saisissez votre extrait dans l’éditeur. Cliquez sur la carte d’un langage pour remplacer le contenu par son exemple.
Choisissez le bon langage
Recherchez par nom ou alias, comme JavaScript ou js. Changer de langage conserve votre saisie ; la bonne grammaire applique les règles syntaxiques adaptées.
Comparez les thèmes dans l’aperçu
Choisissez un thème et observez le résultat pendant l’édition. Les longs blocs défilent dans l’aperçu sans modifier leur disposition d’origine.

Pour lire du code au quotidien

Tutoriels et documentation technique
Comparez la lisibilité des exemples avant de préparer un guide ou un cours. Testez des thèmes clairs et sombres sur un extrait contenant commentaires, chaînes et mots-clés.
Configuration et données structurées
Examinez JSON, YAML, SQL et les scripts shell grâce aux couleurs. La coloration facilite le repérage des motifs, mais ne valide pas les données et n’exécute aucune commande.
Découvrir un langage
Consultez son exemple, ses alias et sa référence, puis modifiez l’extrait pour observer sa coloration. Chaque carte charge directement l’exemple dans cet espace.

Explorer les 242 langages et exemples

Questions sur la coloration syntaxique

Qu’est-ce que la coloration syntaxique ?

Elle attribue des couleurs aux éléments du code, comme les mots-clés, chaînes et commentaires. Elle facilite la lecture de la structure, sans garantir que le code est correct.

Quels langages sont pris en charge ?

Le catalogue comprend 242 langages et formats. Recherchez dans le sélecteur ou parcourez la liste complète. Les alias comme js et py désignent des langages existants, sans augmenter leur nombre.

Mon code est-il envoyé ou exécuté ?

La coloration s’effectue dans le navigateur sans envoyer le code à un serveur. La page télécharge grammaires, thèmes et moteur au besoin. Le code saisi est affiché comme du texte, jamais exécuté.

Est-ce un formateur ou un vérificateur de syntaxe ?

Non. L’aperçu ajoute des couleurs en conservant le texte, l’indentation et les retours à la ligne. Il ne formate, compile, valide ni débogue votre code. Choisissez manuellement le bon langage.

Puis-je copier ou télécharger le HTML coloré ?

Oui. Choisissez des styles en ligne, un fichier CSS séparé ou Tailwind CSS. Copiez les fichiers générés individuellement ou téléchargez le paquet complet. L’aperçu utilise exactement le même HTML et les mêmes styles.

Puis-je mettre des lignes en évidence ou importer un fichier ?

Oui. Saisissez des numéros ou plages dans Lignes mises en évidence, puis choisissez couleur et opacité. Les fichiers UTF-8 non vides jusqu’à 1 MiB sont lus localement dans votre navigateur.

Explorer les exemples de code

Parcourez les 242 langages et formats pris en charge. Cliquez sur une carte pour charger l’exemple ou consultez sa référence pour en savoir plus.

ABAP

ABAP est le langage de programmation propriétaire de SAP utilisé pour développer des applications SAP et personnaliser les systèmes SAP.

La coloration syntaxique en ligne, prête à partager

Un catalogue de langages avec recherche

Aperçu en direct et thèmes de couleurs

Exportez du HTML ou une image

Comment colorer du code en ligne

Collez du code ou essayez un exemple

Choisissez le bon langage

Comparez les thèmes dans l’aperçu

Pour lire du code au quotidien

Tutoriels et documentation technique

Configuration et données structurées

Découvrir un langage

Questions sur la coloration syntaxique

Explorer les exemples de code

ABAP

ActionScript

Ada

AutoHotkey

AutoHotkey2

Angular HTML

Angular TypeScript

Apache Conf

Apex

APL

AppleScript

Ara

AsciiDoc

Assembly

Astro

AWK

Ballerina

Batch File

Beancount

Berry

BibTeX

Bicep

BIRD2 Configuration

Blade

1C (Enterprise)

C

C3

Cadence

Cairo

Chapel

Clarity

Clojure

CMake

COBOL

CODEOWNERS

CodeQL

CoffeeScript

Common Lisp

Rocq

C++

Crystal

C#

CSS

CSV

CUE

Cypher

D

Dart

DAX

Desktop

Diff

Dockerfile

dotEnv

Dream Maker

Edge

Elixir

Elm

Emacs Lisp

ERB

Erlang

Fennel

Fish

Fluent

Fortran (Fixed Form)

Fortran (Free Form)

F#