Code Färben / Syntax Highlighting
Hier habe ich einen Syntax Highlighter gebaut, welcher Code farblich kennzeichnet.
Dies habe ich mithilfe von Javascript und CSS gemacht.
Dabei orientiere ich mich an den Farben aus VSCode. (nach Augenmaß)
Der Content ist editierbar und wird gefärbt nach drücken auf den Button unter der Box.
Für dieses Projekt habe ich 1h gebraucht und damit zeige ich meine Erfahrung mit Regulären Ausdrücken (Regex).
Beispielcode:
function indentation(line) {
const match = line.match(/^\s+(?!:.)/), replaceSpaces = match ? Array(match[0].length).fill(0).reduce(acc=>acc+' ','') : '';
return line.replace(/^\s+(?!:.)/, replaceSpaces);
}
// line = tagComments(line);
const code = something(); // line = tagComments(line);
Disclaimer:
optimiert für die folgenden Programmiersprachen:
optimiert für die folgenden Programmiersprachen:
- Javascript
richtig erkannt und richtig eingefärbt werden:
- Einrückungen
- Funktionen
- Return Statements
- Strings
- Keywords (var, let, function, const)
- Variablen
- Zahlen
- Leerzeilen
- Kommentare
Nicht erkannt bzw falsch eingefärbt werden:
- Klassen
- Escape Sequences
- Regex