Syntax-Highlighter
Listing einfärben, Markup kopieren
Dieser Syntax-Highlighter zerlegt eine Datei in Strings, Kommentare, Schlüsselwörter und Zahlen und färbt dann jedes Teil ein. Kopieren Sie das Ergebnis als maskiertes HTML, als Block für die Textverarbeitung oder als Klartext ohne Farbe. Nichts, was Sie einfügen, verlässt den Browser.
- KostenlosPreis
- 12Sprachen
- 4Ausgaben
- KeineUploads
Syntax Highlighter
Colour a listing in twelve languages, then copy escaped HTML, a word processor block, plain text or the stylesheet
If you use a screen reader, the plain text tab is the readable copy: the coloured ones carry a span around every token.
Ready. Paste a listing, or press one of the sample buttons.
Was ein Syntax-Highlighter macht
Eine Farbe ist eine Aussage darüber, was ein Stück Text ist. Daher ist ein hervorgehobenes Listing leichter zu lesen. Der Leser erfasst die Form einer Datei, bevor er eine Zeile liest.
Genau das ist die ganze Aufgabe dieses Syntax-Highlighters. Er zerlegt den Text in Tokens, entscheidet, was jedes ist, und gibt jeder Klasse eine Farbe.
Er kennt zwölf Sprachen und behandelt einen String, einen Kommentar, ein Schlüsselwort, eine Zahl und einen Namen als verschiedene Dinge. Weil die Entscheidung von einem Tokenizer kommt und nicht von einem Mustervergleich, bleibt ein Schlüsselwort in einem Kommentar ein Kommentar.
Aus einem Durchlauf entstehen vier Ausgaben. Maskiertes HTML für eine Seite, ein Block für die Textverarbeitung, Klartext und ein kleines Stylesheet nur mit den Farben.
Alles läuft in diesem Tab. Daher wird ein unfertiges Listing genauso eingefärbt wie ein veröffentlichtes.
Wie ein Syntax-Highlighter Code in Tokens zerlegt
Der Leser geht den Text einmal durch und trägt dabei einen Zustand und einen Stapel. Bei jedem Zeichen entscheidet er, ob es in einem String, einem Kommentar, einer Zahl oder normalem Code steht. Er gibt ein Token aus, wenn sich dieser Zustand ändert.
Eine Schlüsselwortliste pro Sprache liefert den Rest. Die Liste ist absichtlich kurz, denn die nützliche Frage ist, welche Wörter die Sprache reserviert. Genau diese Liste veröffentlichen die Standarddokumente.
Weil der Leser diesen Zustand mitführt, ist ein Wort in einem Kommentar kein Schlüsselwort. Das ist der Unterschied zwischen einem Highlighter und Suchen und Ersetzen. Außerdem ist es das Erste, worauf Sie schauen sollten, wenn ein eingefärbtes Listing falsch aussieht.
Eine Sprache mit verschachtelten Blockkommentaren braucht einen Tiefenzähler statt eines Merkers. Eine Sprache mit Template-Literalen braucht einen Stapel. Beides wird gehalten, damit ein inneres Trennzeichen keinen äußeren Block beenden kann.
Nichts davon verändert den Text, den ein Leser bekommt. Eine Kopie der Klartext-Ausgabe ist Byte für Byte das, was Sie eingefügt haben, was zählt, wenn das Listing aus einem Terminal kam.
Warum die Ausgabe maskiert, bevor sie einfärbt
Hervorgehobener Code ist Markup, und Markup in einer Seite ist Markup, das der Browser ausführt. Deshalb müssen die spitzen Klammern eines Listings zu Entities werden, bevor irgendetwas anderes passiert.
Das ist kein Formatierungsdetail. Ein Ausschnitt aus einem Issue-Tracker kann ein script-Tag enthalten, und eine Seite, die ihn roh einfügt, hat gerade fremden Code ausgeführt.
Jede Ausgabe hier maskiert zuerst und färbt danach. Weil die Maskierung passiert, bevor das Tool ein einziges span schreibt, kann ein Listing kein eigenes Element einschleusen.
Dieselbe Regel gilt für ein Attribut. Ein Kommentar mit Anführungszeichen landet im Text des span und nicht in einem Attribut. Also kann er nichts vorzeitig schließen.
Darum lohnt es sich, die HTML-Ausgabe von hier zu kopieren statt aus einem Editor, der nur für die Anzeige färbt. Die Farben sehen gleich aus, aber nur eine Variante ist sicher einzufügen.
Die zwölf Sprachen und was jede braucht
Vier teilen eine Grammatik mit einer verwandten Sprache. JavaScript, TypeScript und JSON liegen so nah beieinander, dass ein Leser alle drei abdeckt. CSS und SCSS teilen sich den Leser auf dieselbe Weise.
Die C-Familie bringt eine Präprozessorzeile mit. Der Leser nimmt eine Zeile mit Raute gesondert, bevor er den Rest zerlegt. Deshalb erscheinen include und define in einer anderen Farbe als der Code um sie herum.
Python und Ruby brauchen ein Gespür für Einrückung. Ein String in dreifachen Anführungszeichen und ein Heredoc enden nicht am Zeilenumbruch. Der Leser muss den String also über Zeilen hinweg offen halten.
PHP und HTML greifen ineinander, daher wechselt der Leser am öffnenden Tag den Modus. Weil die beiden Grammatiken verschieden sind, würde ein einziger Durchlauf ohne diesen Wechsel das HTML wie PHP einfärben.
SQL und Bash sind die letzten beiden, und beide sind zeilenorientiert. Das Kommentarzeichen unterscheidet sich zwischen ihnen, und genau solche Details entscheiden, ob sich ein Listing richtig liest.
Die vier Ausgaben und wann Sie welche nutzen
Maskiertes HTML ist die erste, und sie ist für eine Seite. Jedes Token wird zu einem span mit einer Klasse. Das Tool maskiert den Text als Entities, sodass der Block ohne weitere Arbeit in einen Beitrag passt.
Der Block für die Textverarbeitung ist die zweite. Weil eine Textverarbeitung Ihr Stylesheet ignoriert, kommen die Farben als Inline-Styles an jedem span an, was das Einfügen in ein Dokument übersteht.
Klartext ist die dritte, und sie behält Einrückung und Zeilenzahl ohne eine einzige Farbe. Nutzen Sie sie, wenn das Listing in ein Terminal oder eine Commit-Nachricht geht, wo Markup nur stören würde.
Das Stylesheet ist die vierte. Es enthält die zwölf Farbregeln ohne Markup. So kann eine Website, die ihre spans schon selbst setzt, die Palette übernehmen, ohne die Ausgabe zu übernehmen.
So nutzen Sie den Syntax-Highlighter
Vier Schritte, und keiner braucht ein Konto.
- 1
Die Sprache wählen
Wählen Sie aus den zwölf. Die Schlüsselwortliste und die Kommentarzeichen kommen aus dieser Einstellung. Daher ist eine falsche Wahl der häufigste Grund für ein halb eingefärbtes Listing.
- 2
Das Listing einfügen
Fügen Sie dann den Code ein. Die Einrückung bleibt wie eingefügt, sodass eine bereits gegliederte Datei so aussieht wie im Editor.
- 3
Nummern und Theme festlegen
Entscheiden Sie als Nächstes, ob Zeilennummern in die Ausgabe gehören, und wählen Sie eine helle oder dunkle Palette. Da beides ins Markup geht, legen Sie es vor dem Kopieren fest.
- 4
Das passende Format kopieren
Nehmen Sie zum Schluss das HTML, den Block für die Textverarbeitung, den Klartext oder das Stylesheet. Danach fügen Sie es dort ein, wo das Listing hingehört.
Warum dieser Syntax-Highlighter
Fünf Gründe, und der zweite ist der wichtigste.
Er maskiert, bevor er einfärbt
Weil der Text zuerst als Entities maskiert wird, kann ein eingefügtes Listing weder ein Element noch ein Attribut einschleusen. Die Ausgabe ist also sicher für eine Seite.
Er folgt dem Zustand, nicht Mustern
Ein Schlüsselwort in einem Kommentar bleibt ein Kommentar, und eine Klammer in einem String bleibt Text. Daher passen die Farben zu dem, was die Sprache tatsächlich bedeutet.
Vier Ausgaben aus einem Durchlauf
Eine Seite, eine Textverarbeitung, ein Terminal und ein Stylesheet wollen jeweils eine andere Form. So deckt ein einziges Einfügen ab, was Sie als Nächstes brauchen.
Nichts wird hochgeladen
Zerlegen und Einfärben passieren allein in diesem Tab. Daher wird ein unveröffentlichtes Stylesheet genauso behandelt.
Die Farbregeln gehören Ihnen
Die Stylesheet-Ausgabe enthält die Palette ohne Markup. Daher kann eine Website, die ihre spans schon selbst setzt, die Farben übernehmen und sonst nichts.
Gewohnheiten für lesbare Listings
Sechs Gewohnheiten, die entscheiden, ob eingefärbter Code wirklich hilft.
- Den kürzesten Ausschnitt zeigen, der den Punkt belegt Ein Listing mit dreißig Zeilen wird überflogen, eines mit sechs wird gelesen. Weil ein Leser die Form sucht und nicht die ganze Datei, kürzen Sie vor dem Einfärben.
- Die Einrückung so lassen, wie der Autor sie schrieb Ein neu eingerückter Ausschnitt sieht anders aus als in seiner Ursprungsdatei. Lassen Sie die Tiefe also stehen, damit der Leser sie mit der Quelle abgleichen kann.
- Nummern erst ab zehn Zeilen verwenden Zeilennummern helfen, wenn jemand eine Zeile zitieren muss. Unter zehn Zeilen sind sie nur Rauschen neben Code, den man zählen kann.
- Die Palette an die Seite anpassen Ein dunkler Block in einem hellen Artikel lenkt den Blick vom Argument ab. Da beide Paletten zur Wahl stehen, nehmen Sie die, die zur umgebenden Seite passt.
- Das HTML kopieren, nicht den angezeigten Block Wer einen eingefärbten Block aus dem Browser zieht, verliert die Klassen und behält ein Durcheinander aus Inline-Styles. Nutzen Sie daher die Kopieren-Schaltfläche, die lesbares Markup schreibt.
- Eine Klartext-Kopie für das Terminal behalten Markup in einer Commit-Nachricht oder einer Shell-Sitzung wird zu Zeichen statt zu Farbe. Behalten Sie die Klartext-Ausgabe also neben der farbigen.
Sechs Wege, wie ein hervorgehobenes Listing schiefgeht
Jeder davon sieht in der Vorschau gut aus und scheitert dort, wo er landet.
Rohes Markup in eine Seite einfügen
Vorsicht hier. Ein ohne Maskierung eingefügtes Listing ist Markup, das der Browser ausführt, und ein script-Tag in einem Kommentar reicht schon. Nutzen Sie also die HTML-Ausgabe statt einer Kopie aus einem anderen Editor.
Die falsche Sprache wählen
Die Schlüsselwortliste einer Sprache lässt die Wörter einer anderen ungefärbt. Weil das Ergebnis trotzdem gewollt aussieht, geht so etwas leicht versehentlich live.
Erwarten, dass ein Template-Literal am Zeilenumbruch endet
Ein Backtick hält einen String über Zeilen offen. Daher färbt ein offenes Template ganz oben den Rest der Datei als einen einzigen String, was wie ein Fehler des Tools wirkt.
Einen Diff wie Quellcode einfärben
Ein Plus oder Minus am Zeilenanfang gehört nicht zur Sprache. Fügen Sie die beiden Seiten also getrennt ein, sonst ist das erste Zeichen jeder Zeile schon falsch.
Die Nummernspalte für einen kopierbaren Ausschnitt einschalten
Wer ein nummeriertes Listing kopiert, bekommt die Nummern mit dem Code. Weil das Eingefügte dann nicht läuft, behalten Sie die Nummern für eine Seite, die nur gelesen wird.
Annehmen, dass die Farben Bedeutung tragen
Eine Farbe allein ist ein schwaches Signal für jemanden, der sie nicht sehen kann. Daher zählen die Wörter mehr als die Palette, und ein Listing sollte auch ohne Farbe verständlich sein.
Fragen zum Syntax-Highlighter
Ist dieser Syntax-Highlighter kostenlos?
Ja. Es gibt kein Konto, kein Limit und keinen Bezahltarif. Sie färben also so viele Listings ein, wie Sie möchten.
Welche Sprachen unterstützt er?
Zwölf: JavaScript, TypeScript, JSON, HTML, CSS, SCSS, PHP, Python, Ruby, Java, SQL und Bash. Vier davon teilen sich den Leser mit einer verwandten Sprache.
Kann ich die Ausgabe sicher in eine Seite einfügen?
Die HTML-Ausgabe ja, denn das Tool maskiert den Text als Entities, bevor es auch nur ein span schreibt. Deshalb kommt ein script-Tag in einem eingefügten Ausschnitt als Text an und nicht als Element.
Wo bleiben die spitzen Klammern?
Sie werden zu Entities, sodass der Browser sie anzeigt, statt sie als Markup zu lesen. Genau dafür gibt es die maskierte Ausgabe.
Warum wird ein Schlüsselwort in meinem Kommentar nicht eingefärbt?
Weil es in einem Kommentar steht, und der Leser weiß das. Ein Highlighter, der nur nach Schreibweise färbt, läge hier falsch, während dieser nach dem Zustand entscheidet.
Bekomme ich das Ergebnis auch ohne Markup?
Ja. Die Klartext-Ausgabe behält Einrückung und Zeilenzahl und fügt keine Farbe hinzu. Das ist die Kopie für eine Commit-Nachricht oder ein Terminal.
Funktioniert es in einer Textverarbeitung?
Ja, über die Ausgabe für Textverarbeitung. Weil ein Dokument kein Stylesheet beachtet, kommen die Farben stattdessen als Inline-Styles an jedem span an.
Kann ich die Farben auf meiner eigenen Website verwenden?
Ja. Die Stylesheet-Ausgabe enthält die zwölf Regeln ohne Markup, sodass Ihre eigenen spans die Palette übernehmen können.
Wird mein Code irgendwohin hochgeladen?
Nein. Das Zerlegen in Tokens und das Einfärben passieren in diesem Browser-Tab. Deshalb überquert eine unveröffentlichte Datei nie das Netz.
Verändert es meinen Code?
Nein. Die Klartext-Ausgabe ist Byte für Byte das, was Sie eingefügt haben, und die farbige Ausgabe unterscheidet sich nur durch die spans um den Text.
Kann ich eine ganze Datei hervorheben?
Ja. Eine Datei mit einigen tausend Zeilen ist im Nu eingefärbt, und die Grenze ist Ihr Rechner, nicht ein Serverkontingent.
Prüft es meinen Code auf Fehler?
Nein. Ein Highlighter beantwortet, was ein Token ist, nicht, ob das Programm gültig ist. Nutzen Sie für diese Frage also den Validator.
Kann ich einen Diff hervorheben?
Nicht direkt, denn ein Plus oder Minus am Zeilenanfang gehört nicht zur Sprache. Fügen Sie die beiden Seiten also getrennt ein.
Nummeriert es die Zeilen?
Ja, wenn Sie es möchten. Die Nummernspalte kommt in die Ausgabe, entscheiden Sie also vor dem Kopieren, und lassen Sie sie bei einem Ausschnitt weg, den jemand einfügen könnte.
Wozu dient die helle und dunkle Option?
Sie tauscht die Palette, damit der Block zur umgebenden Seite passt. Die Tokens bleiben in beiden Fällen gleich, nur die Farben ändern sich.
Kommt es mit einem Template-Literal über mehrere Zeilen klar?
Ja. Weil der Leser den String an einem Zeilenumbruch offen hält, wird ein mehrzeiliges Template als ein String eingefärbt und nicht als Code.
Kann ich ein Listing für eine Folie einfärben?
Dafür ist die Ausgabe für Textverarbeitung da. Fügen Sie den Block also in das Dokument ein, und er behält seine Farben.
Warum wirkt mein Listing nur halb eingefärbt?
Meist liegt es an einem offenen String oder Kommentar weiter oben, der die folgenden Zeilen verschluckt. Prüfen Sie also zuerst den Anfang des eingefügten Textes.
Funktioniert es auf dem Handy?
Ja. Die Bereiche stapeln sich und die Tabs brechen in Zeilen um. So geht ein kurzes Listing auch unterwegs, auch wenn eine lange Datei mit Tastatur bequemer ist.
Brauche ich ein Konto oder eine Erweiterung?
Nein. Es gibt keine Anmeldung, kein Plugin und keine Erweiterung. Sie schließen den Tab also, sobald das Listing in der Zwischenablage ist.
Tools, die dazu passen
Vier Seiten, zu denen diese Arbeit meist führt.
Der Maskierungsschritt für sich allein. Weil ein Ausschnitt Markup enthalten kann, ist es eine gute Gewohnheit, zuerst die spitzen Klammern zu kodieren.
Tool öffnen →Ein Listing liest sich besser, wenn das Layout stabil ist. Rücken Sie die Datei also vor dem Einfärben neu ein.
Tool öffnen →Steht der Block auf einer Seite, kann das Skript daneben schrumpfen. So wird der Download kleiner, auf den ein Besucher wartet.
Tool öffnen →Steht der Block auf einer Seite, kann das Markup um ihn herum schrumpfen. Da ein Browser jeden Kommentar lädt, ist das der letzte Schritt.
Tool öffnen →
Code einfärben und Markup kopieren
Wählen Sie die Sprache, fügen Sie den Code ein, wählen Sie eine Palette und nehmen Sie das Ausgabeformat, das Sie brauchen. Nichts wird hochgeladen, und das Tool maskiert den Text, bevor es etwas einfärbt, sodass der Block sicher auf eine Seite passt. Außerdem sind die meisten Listings in Sekunden fertig.