JPKCom DB

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.

Quelltext ansehen, highlighten und bearbeiten

Der Source Viewer 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 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: 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. Was du nicht per URL laden kannst: Seiten hinter einem Login, lokale Dev-Instanzen oder Intranet-Adressen.

Jetzt ausprobieren

→ Source Viewer öffnen — Code einfügen oder eine URL laden, Sprache wählen, fertig. Ohne Account, kostenlos, direkt im Browser.

Verwandte JPKCom-Tools

  • SEO & GEO Analyzer — 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 — der spezialisierte Formatierer für JavaScript, CSS und HTML (dieselbe JS-Beautifier-Engine), inklusive Deobfuskierung.
  • Compiler — SASS/SCSS zu CSS kompilieren sowie HTML, JavaScript und CSS minifizieren und verschönern.
  • Playground — HTML/CSS/JavaScript live im Browser ausführen statt nur ansehen.
  • Markdown Editor — wenn du das per HTML-zu-Markdown gewonnene Ergebnis weiterschreiben willst.

Tiefer geht es auf den Unterseiten: das Manual mit jeder Funktion und der Proxy-Architektur im Detail, Beispiele aus der Praxis und gesammelte Tipps & Tricks.