JPKCom DB

Source Viewer

Was der Source Viewer kann: Code-Editor für 100+ Sprachen, Laden per URL, HTML-Live-Vorschau, Beautify und Minify, HTML zu Markdown — 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. Beim Öffnen und Laden erkennt das Tool die Sprache am Dateinamen bzw. am URL-Pfad selbst. Zeilennummern, Code-Faltung, Suchen-und-Ersetzen und das dunkle Dracula-Theme sind von Anfang an dabei, helle Themes gibt es auf Wunsch.

Es ist also mehr als ein reiner Betrachter: Du kannst den Code direkt bearbeiten, ihn mit dem eingebauten Beautifier formatieren oder minifizieren, eine HTML-Seite in einer abgeschotteten Live-Vorschau ansehen, HTML in sauberes Markdown oder reinen Text umwandeln, Links, Bilder und Skripte einer Seite extrahieren und Markdown gerendert vorschauen. Alles läuft im Browser, ohne Account und ohne Installation; der Editor speichert deinen Stand automatisch im lokalen Browser-Speicher, stellt ihn beim nächsten Besuch wieder her und hält auf Wunsch benannte Snapshots vor.

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 Viewer & Editor"). 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 fünf Bereiche:

  • Editor & Highlighting — der Editor basiert auf dem ACE Editor (öffnet in neuem Tab) und bringt dessen volles Programm mit: Syntax-Highlighting für 100+ Sprachen (Sprachwähler in der Werkzeugleiste), automatische Spracherkennung beim Laden, Zeilennummern, Code-Faltung, Mehrfach-Cursor, Autovervollständigung, Syntax-Prüfung (Linting), Suchen/Ersetzen, Gehe-zu-Zeile, eine Statuszeile mit Größe und Zeilenzahl sowie vier Themes (Dracula als Standard, Monokai, GitHub und Solarized hell).
  • Inhalt laden und sichern — drei Wege: Code einfügen/tippen, eine lokale Datei öffnen (Datei-Menü oder Drag & Drop) oder den Quelltext einer URL laden (über den JPKCom-Proxy, siehe unten). Das Menü File bündelt Neu, Öffnen, Speichern (mit passender Dateiendung), Drucken, Leeren und die Snapshots; zuletzt geladene URLs stehen in einer Verlaufsliste. Ein neuer Inhalt überschreibt selbst bearbeiteten Code nie ohne Rückfrage.
  • Umwandeln — Beautify (Code formatieren via JS Beautifier), Minify für HTML, CSS, JavaScript und JSON, HTML → Markdown (inklusive automatisch erzeugtem YAML-Frontmatter aus den Meta-Daten und absolut gemachten Links) und HTML → Plain Text.
  • Vorschau & Extrahieren — eine HTML-Live-Vorschau in einem abgeschotteten Frame ohne Skripte (wahlweise in Tablet- oder Smartphone-Breite), eine Markdown-/Text-Vorschau mit gehighlighteten Code-Blöcken und Export als HTML sowie ein Dialog, der Links, Bilder, Skripte, Stylesheets und Überschriften als kopierfertige Liste ausgibt.
  • URL-Analyse — neben dem reinen Quelltext kann das Tool zu einer URL eine SEO-Auswertung (Meta-Daten, Überschriften, Links, Bilder, Score) und eine Verbindungs-Analyse (HTTP-Header, Timing, SSL-Zertifikat samt Kette — auch bei fehlerhaften Zertifikaten) als Markdown-Bericht in den Editor laden.

Dazu kommen Komfort-Funktionen: Schriftgröße ändern, Zeilenumbruch umschalten, Vollbildmodus, Tastenkürzel wie Strg+S und Strg+O, eine Werkzeugleiste, die sich per Pfeiltasten bedienen lässt, eine Übersicht der Tastenkürzel und ein Einstellungs-Dialog (Schriftgröße, Tab-Größe, Theme, sichtbare Sonderzeichen, Einrück-Hilfslinien, Zeilennummern, aktive Zeile, 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, das Formatieren, die Konvertierung, die Vorschau und das Extrahieren passieren anschließend lokal in deinem Browser. Die HTML-Live-Vorschau führt dabei keine Skripte der geladenen Seite aus.

Für den Datenschutz heißt das: Beim Abruf selbst sieht die geladene Seite einen Request vom JPKCom-Server, nicht deine IP-Adresse. Anders bei der Vorschau: Stylesheets, Webfonts und Bilder in der HTML-Live-Vorschau und Bilder in der Markdown-Vorschau lädt dein Browser direkt von den jeweiligen Servern — die sehen dabei deine IP-Adresse. Der Proxy ist gegen Missbrauch gehärtet — er blockiert interne und private Adressen (SSRF-Schutz, auch bei Weiterleitungen), erlaubt nur HTTP/HTTPS, begrenzt Größe (950 KB) und Laufzeit der Abrufe und drosselt die Zahl der Anfragen. 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 und derselbe Unpacker ohne Code-Ausführung).
  • Compiler — SASS/SCSS zu CSS kompilieren sowie HTML, JavaScript und CSS minifizieren und verschönern; die HTML- und CSS-Minifier dort folgen denselben Sicherheitsprinzipien wie hier, setzen aber eigene Regeln um (der Compiler minifiziert etwa auch <style>-Blöcke im HTML).
  • 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.