DE

Syntax-Highlighter

Mit diesem Syntax-Highlighter färben Sie Quelltext ein, ohne etwas zu installieren: Code einfügen, Sprache und helles oder dunkles Farbschema wählen und das fertige HTML kopieren. Die Farben stecken direkt im Code, sodass er sich in Blogs, Mails und Dokumenten ohne zusätzliches Stylesheet richtig darstellt.

Quelle: WCAG 2.2 – Success Criterion 1.4.3 Contrast (Minimum): 4,5:1 für Text (Farben der beiden Themen geprüft). Stand: .

Quelltext einfügen. Die Hervorhebung erscheint bei jeder Eingabe neu in der Vorschau.

Ihr Text bleibt in Ihrem Browser – er wird nicht gesendet, nicht gespeichert und nicht in die Adresszeile geschrieben.

Vorschau

// Begrüßung ausgeben
function greet(name) {
  const text = "Hallo, " + name + "!";
  console.log(text);
  return text.length;
}

greet("Welt");
Meine Toolbox

Ergebnis

Eingefärbtes HTML
<pre style="background:#ffffff;color:#1f2328;padding:12px 14px;border-radius:6px;overflow:auto;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;tab-size:4;margin:0"><code style="font:inherit"><span style="color:#57606a;font-style:italic">// Begrüßung ausgeben</span> <span style="color:#cf222e">function</span> <span style="color:#8250df">greet</span>(name) { <span style="color:#cf222e">const</span> text = <span style="color:#0a3069">"Hallo, "</span> + name + <span style="color:#0a3069">"!"</span>; console.<span style="color:#8250df">log</span>(text); <span style="color:#cf222e">return</span> text.length; } <span style="color:#8250df">greet</span>(<span style="color:#0a3069">"Welt"</span>);</code></pre>
Erkannt
JavaScript / TypeScript, 8 Zeilen, 144 Zeichen
Das HTML enthält die Farben als style-Angaben und lässt sich überall einfügen, wo HTML erlaubt ist. Die Erkennung ist eine Näherung auf Basis von Mustern, kein vollständiger Parser; bei seltenen Schreibweisen kann eine Stelle ungefärbt bleiben. Der Code wird nur im Browser verarbeitet, nicht gespeichert und nicht gesendet.

So wird gerechnet

Syntax-Highlighting hebt die Bausteine von Quelltext farbig hervor: Schlüsselwörter, Zeichenketten, Zahlen, Kommentare und Funktionsnamen erhalten je eine Farbe. Das macht Code lesbarer, besonders in Texten, Dokumentationen und E-Mails, wo ein Editor mit Farbschema fehlt.

Was der Highlighter kann

Sicher und verlustfrei

Der Quelltext wird nicht verändert, sondern nur in Abschnitte zerlegt und mit Farbangaben umgeben. Zeichen wie < und & werden dabei maskiert, damit Code mit HTML-Fragmenten den Rest der Seite nicht beeinflusst. Wer Code vorher aufräumen möchte, nutzt den JSON-Formatierer, den SQL-Formatierer oder den HTML-Formatierer.

Häufige Fragen

Wie färbe ich Code für einen Blogbeitrag ein?

Code einfügen, Sprache und Farbschema wählen und das HTML aus dem Ergebnisfeld kopieren. Im Blog-Editor als HTML-Block einfügen. Die Farben stehen direkt im Code, ein zusätzliches Stylesheet ist nicht nötig.

Kann ich den eingefärbten Code in Word oder eine Mail einfügen?

Ja, meist über die Vorschau: Markieren, kopieren und einfügen, die Farben bleiben erhalten. In Programmen, die HTML nicht annehmen, hilft ein Screenshot der Vorschau.

Welche Sprachen werden unterstützt?

JavaScript und TypeScript, JSON, HTML mit eingebettetem Skript und Stil, CSS, SQL, Python und Bash. Für alle anderen Sprachen kann „Klartext“ gewählt werden, dann bleibt nur das Format des Blocks.

Wird mein Code gespeichert oder gesendet?

Nein. Die Verarbeitung läuft in Ihrem Browser. Der Code steht nicht in der Adresszeile und wird nicht gespeichert.

Warum sind einzelne Stellen nicht eingefärbt?

Der Highlighter erkennt Muster wie Schlüsselwörter, Zeichenketten und Kommentare, ist aber kein vollständiger Parser. Ungewöhnliche Schreibweisen oder Sprachvarianten bleiben deshalb gelegentlich schwarz.

Quellen und Rechtsgrundlagen

Stand: · So prüfen wir

Passende Werkzeuge