# Source Viewer > Was der Source Viewer kann: Code-Editor mit Syntax-Highlighting für 100+ Sprachen, Laden per URL, HTML-zu-Markdown und Beautify — der Einstieg. Source: https://www.jpkc.com/db/tools/source/ ## Quelltext ansehen, highlighten und bearbeiten Der [Source Viewer](https://www.jpkc.com/tools/source/) ist ein vollwertiger Code-Editor im Browser. Du fügst Quelltext ein, lädst eine Datei von der Festplatte oder ziehst dir den Quelltext einer fremden URL herein — und bekommst ihn sofort mit **Syntax-Highlighting für über 100 Sprachen** angezeigt: von HTML, CSS, JavaScript, PHP und Python über YAML, SQL und Dockerfile bis zu Rust, Go, Swift und Kotlin. Zeilennummern, Code-Faltung, Suchen-und-Ersetzen und ein dunkles Editor-Theme sind von Anfang an dabei. Es ist also mehr als ein reiner Betrachter: Du kannst den Code direkt bearbeiten, ihn mit dem eingebauten **Beautifier** für JavaScript, CSS und HTML formatieren, HTML in sauberes **Markdown** oder reinen Text umwandeln und Markdown live als HTML vorschauen. Alles läuft im Browser, ohne Account und ohne Installation; der Editor speichert deinen Stand automatisch im lokalen Browser-Speicher und stellt ihn beim nächsten Besuch wieder her. Gedacht ist das Tool für alle, die schnell an Code heranmüssen: **Entwicklerinnen und Entwickler**, die den Quelltext einer Live-Seite ansehen oder ein Snippet sauber formatieren wollen; **Content- und SEO-Leute**, die HTML in Markdown überführen oder die Meta-Daten einer URL prüfen; und alle, die einfach einen ordentlichen Editor mit Highlighting brauchen, ohne erst eine IDE zu öffnen. > Im Live-Tool trägt der Editor schlicht den Namen **„Source"** (Titel: „Source: Code Editor with Syntax Highlighting"). Die Oberfläche ist durchgängig auf Englisch — die Button- und Menü-Bezeichnungen werden in dieser Doku deshalb in ihrer englischen Original-Schreibweise genannt. ## Was der Source Viewer kann — auf einen Blick Die Funktionen gruppieren sich in vier Bereiche: - **Editor & Highlighting** — der Editor basiert auf dem [ACE Editor](https://ace.c9.io/) und bringt dessen volles Programm mit: Syntax-Highlighting für 100+ Sprachen (Sprachwähler oben rechts), Zeilennummern, Code-Faltung, Mehrfach-Cursor, Autovervollständigung, Syntax-Prüfung (Linting), Suchen/Ersetzen, Gehe-zu-Zeile und ein Dunkel-Theme (**Dracula**, alternativ **Monokai**). - **Inhalt laden** — drei Wege: Code **einfügen/tippen**, eine **lokale Datei öffnen** (HTML5 File API) oder den Quelltext einer **URL laden** (über den JPKCom-Proxy, siehe unten). Speichern als Datei und ein „Clear" zum Leeren gehören dazu. - **Umwandeln** — **Beautify** (Code formatieren via JS Beautifier), **HTML → Markdown** (inklusive automatisch erzeugtem YAML-Frontmatter aus den Meta-Daten), **HTML → Plain Text** sowie eine **Markdown-/Text-Vorschau**, die das Ergebnis als HTML rendert und Code-Blöcke highlightet. - **URL-Analyse** — neben dem reinen Quelltext kann das Tool zu einer URL eine **SEO**-Auswertung (Meta-Daten, Überschriften, Links, Bilder) und eine **Verbindungs-Analyse** (HTTP-Header, SSL-Zertifikat, Timing) als Markdown-Bericht in den Editor laden. Dazu kommen Komfort-Funktionen: Schriftgröße ändern, Zeilenumbruch umschalten, Vollbildmodus, Drucken, eine Übersicht der Tastenkürzel und ein Einstellungs-Dialog (Tab-Größe, Theme, sichtbare Sonderzeichen, Einrück-Hilfslinien, Zeilennummern, Autovervollständigung, Linting). ## Serverseitiger Abruf, Highlighting im Browser Wenn du eine URL lädst, ist das ein bewusster Hybrid — genau wie beim [SEO & GEO Analyzer](https://www.jpkc.com/db/tools/seo/): Die fremde Seite wird **serverseitig über den JPKCom-Proxy** geholt (ein direkter Abruf aus deinem Browser scheitert sonst an CORS). Das Syntax-Highlighting, die Konvertierung und die Vorschau passieren anschließend **lokal in deinem Browser**. Für den Datenschutz heißt das: Die geladene Seite sieht einen Request vom JPKCom-Server, nicht deine IP-Adresse. Der Proxy ist gegen Missbrauch gehärtet — er blockiert interne und private Adressen (SSRF-Schutz), erlaubt nur HTTP/HTTPS und begrenzt Größe und Laufzeit der Abrufe. Wie das genau funktioniert und welche Grenzen gelten, steht im [Manual](https://www.jpkc.com/db/tools/source/manual/). Was du **nicht** per URL laden kannst: Seiten hinter einem Login, lokale Dev-Instanzen oder Intranet-Adressen. ## Jetzt ausprobieren **[→ Source Viewer öffnen](https://www.jpkc.com/tools/source/)** — Code einfügen oder eine URL laden, Sprache wählen, fertig. Ohne Account, kostenlos, direkt im Browser. ## Verwandte JPKCom-Tools - **[SEO & GEO Analyzer](https://www.jpkc.com/db/tools/seo/)** — nutzt denselben serverseitigen Proxy und hat selbst einen *Source Code*-Tab mit demselben ACE-Editor; der direkte Verwandte, wenn es um die Analyse einer URL geht. - **[Beautify](https://www.jpkc.com/db/tools/beautify/)** — der spezialisierte Formatierer für JavaScript, CSS und HTML (dieselbe JS-Beautifier-Engine), inklusive Deobfuskierung. - **[Compiler](https://www.jpkc.com/db/tools/compiler/)** — SASS/SCSS zu CSS kompilieren sowie HTML, JavaScript und CSS minifizieren und verschönern. - **[Playground](https://www.jpkc.com/db/tools/playground/)** — HTML/CSS/JavaScript live im Browser ausführen statt nur ansehen. - **[Markdown Editor](https://www.jpkc.com/db/tools/md/)** — wenn du das per HTML-zu-Markdown gewonnene Ergebnis weiterschreiben willst. --- Tiefer geht es auf den Unterseiten: das **[Manual](https://www.jpkc.com/db/tools/source/manual/)** mit jeder Funktion und der Proxy-Architektur im Detail, **[Beispiele](https://www.jpkc.com/db/tools/source/examples/)** aus der Praxis und gesammelte **[Tipps & Tricks](https://www.jpkc.com/db/tools/source/tips/)**.