Syntax Highlighter — Syntaxhervorhebung online

Quellcode

Programmiersprache

Code-Vorschau

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": "…"
}

Syntaxhervorhebung online – Code zum Teilen

Erstelle gut lesbare Codebeispiele für Dokumentationen, Blogbeiträge oder Unterrichtsmaterial. Füge Code ein, öffne eine Textdatei oder lade ein Sprachbeispiel und wähle ein helles oder dunkles Theme. Syntax Highlighter färbt Schlüsselwörter, Zeichenketten und Kommentare ein. Einrückungen und Zeilenumbrüche bleiben erhalten.

Hebe wichtige Zeilen hervor, fokussiere einen Abschnitt oder kennzeichne hinzugefügte und entfernte Zeilen. Passe Farben und Deckkraft an, ergänze Zeilennummern oder klappe längere Abschnitte ein. Die Vorschau aktualisiert sich beim Bearbeiten. Hervorhebung und Export erfolgen im Browser; dein Code wird dafür nicht an einen Server gesendet.

Illustration von Code mit Syntaxhervorhebung und markierter Zeile neben einem HTML-Dokument und einem Codebild

Durchsuchbarer Sprachkatalog
Wähle aus 242 Sprachen und Formaten, darunter TypeScript, Java, C++, Go, Rust, JSON und YAML. Suche nach Namen oder Alias und lade ein Beispiel über die Karten unten.
Live-Vorschau und Farbthemes
Bearbeite den Quellcode und beobachte die aktualisierte Hervorhebung. Durchsuche Themes oder filtere helle und dunkle Themes, um denselben Code auf verschiedenen Hintergründen zu vergleichen.
HTML oder ein Bild exportieren
Kopiere HTML, lade Dateien mit Inline-Styles, separatem CSS oder Tailwind CSS herunter oder speichere die Darstellung als PNG. Die Vorschau verwendet das gewählte Ausgabeformat, damit du das Ergebnis vor dem Teilen prüfen kannst.

So hebst du Code online hervor

Code einfügen oder Beispiel testen
Gib Code in den Editor ein. Klicke zum Ausprobieren einer Sprache auf ihre Karte; ihr Beispiel ersetzt den Editorinhalt.
Passende Sprache wählen
Suche nach Namen oder Alias, etwa JavaScript oder js. Die Sprachauswahl erhält deine Eingabe; die passende Grammatik liefert die richtigen Syntaxregeln.
Themes in der Vorschau vergleichen
Wähle ein Farbtheme und prüfe das Ergebnis beim Bearbeiten. Lange Codeblöcke scrollen innerhalb der Vorschau, ohne ihre ursprüngliche Anordnung zu verändern.

Für das tägliche Lesen von Code

Tutorials und technische Dokumentation
Vergleiche die Lesbarkeit von Beispielen vor dem Erstellen einer Anleitung oder Lektion. Teste helle und dunkle Themes mit Kommentaren, Zeichenketten und Schlüsselwörtern im selben Ausschnitt.
Konfiguration und strukturierte Daten
Betrachte JSON, YAML, SQL und Shell-Code mit Syntaxfarben. Die Hervorhebung macht Muster sichtbar, validiert aber keine Daten und führt keine Befehle aus.
Eine unbekannte Sprache kennenlernen
Entdecke Beispiel, Aliase und Referenz einer Sprache und bearbeite den Code, um die Syntaxfarben zu sehen. Jede Karte lädt direkt in diesen Arbeitsbereich.

Alle 242 Sprachen und Beispiele entdecken

Fragen zur Syntaxhervorhebung

Was ist Syntaxhervorhebung?

Sie färbt Teile des Quellcodes wie Schlüsselwörter, Zeichenketten und Kommentare unterschiedlich ein. Das erleichtert das Lesen der Struktur, beweist aber nicht die Korrektheit des Codes.

Welche Sprachen werden unterstützt?

Der Katalog enthält 242 Sprachen und Formate. Suche im Auswahlfeld oder durchsuche die vollständige Liste. Aliase wie js und py bezeichnen vorhandene Sprachen und zählen nicht zusätzlich.

Wird mein Code hochgeladen oder ausgeführt?

Die Hervorhebung läuft im Browser und sendet den Quellcode nicht an einen Server. Grammatik-, Theme- und Engine-Dateien werden bei Bedarf geladen. Eingaben werden als Text angezeigt, nicht ausgeführt.

Ist dies ein Formatierer oder Syntaxprüfer?

Nein. Die Vorschau ergänzt Farben und erhält Eingaben, Einrückungen und Zeilenumbrüche. Sie formatiert, kompiliert, validiert und debuggt nicht. Wähle die passende Sprache selbst aus.

Kann ich hervorgehobenes HTML kopieren oder herunterladen?

Ja. Wähle Inline-Stile, eine separate CSS-Datei oder Tailwind CSS. Kopiere einzelne generierte Dateien oder lade das ganze Paket herunter. Vorschau und Ausgabe verwenden dasselbe HTML und dieselben Stile.

Kann ich Zeilen hervorheben oder eine Datei importieren?

Ja. Gib unter Hervorgehobene Zeilen Nummern oder Bereiche ein und wähle Farbe und Deckkraft. Nicht leere UTF-8-Dateien bis 1 MiB werden lokal im Browser gelesen.

Codebeispiele entdecken

Entdecke alle 242 unterstützten Sprachen und Formate. Klicke auf eine Karte, um ihr Beispiel zu laden, oder öffne die Referenz für weitere Informationen.

ABAP

ABAP ist die proprietäre Programmiersprache von SAP, die für die Entwicklung von SAP-Anwendungen und die Anpassung von SAP-Systemen verwendet wird.

Syntaxhervorhebung online – Code zum Teilen

Durchsuchbarer Sprachkatalog

Live-Vorschau und Farbthemes

HTML oder ein Bild exportieren

So hebst du Code online hervor

Code einfügen oder Beispiel testen

Passende Sprache wählen

Themes in der Vorschau vergleichen

Für das tägliche Lesen von Code

Tutorials und technische Dokumentation

Konfiguration und strukturierte Daten

Eine unbekannte Sprache kennenlernen

Fragen zur Syntaxhervorhebung

Codebeispiele entdecken

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#