# Source Viewer — Beispiele

> Praxisnahe Durchläufe mit dem Source Viewer: Quelltext einer URL ansehen, Code einfügen und highlighten, Sprache wechseln, HTML zu Markdown konvertieren.

Source: https://www.jpkc.com/db/tools/source/examples/

Zurück zur Übersicht: [Source Viewer](https://www.jpkc.com/db/tools/source/) · Tool live öffnen: [www.jpkc.com/tools/source/](https://www.jpkc.com/tools/source/)

Das [Manual](https://www.jpkc.com/db/tools/source/manual/) erklärt jede Funktion und die Proxy-Architektur im Detail. Diese Seite ergänzt das um **konkrete Arbeitsabläufe** — typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche des Tools ist auf Englisch; Button- und Menü-Namen stehen deshalb im Original, bei Bedarf mit deutscher Erläuterung.

## Beispiel 1: Den Quelltext einer URL ansehen

Der Klassiker — du willst sehen, wie eine fremde Seite aufgebaut ist.

1. Öffne den [Source Viewer](https://www.jpkc.com/tools/source/) und trag oben im URL-Feld eine absolute Adresse ein (z. B. `https://example.com/`).
2. Klick auf **Load** (Download-Symbol). Der Quelltext wird serverseitig über den JPKCom-Proxy geholt und in den Editor geschrieben (Toast „Content loaded from URL.").
3. Der Editor steht jetzt im **HTML**-Modus — das ist nach jedem URL-Load so. Das Highlighting greift sofort: Tags, Attribute und Werte sind farblich getrennt, links laufen die Zeilennummern.
4. Nutze **Find** (`Strg+F`) oder das **More tools**-Menü, um gezielt nach einer Stelle zu suchen, und klapp große Blöcke per Code-Faltung zu.

Was du so **nicht** siehst: alles, was erst per JavaScript im Browser nachgeladen wird, und alles hinter einem Login. Geladen wird das ausgelieferte Roh-HTML, nicht das fertig gerenderte DOM.

## Beispiel 2: Code einfügen und highlighten

Du hast ein Snippet aus einer Log-Datei, einem Chat oder einer Mail und willst es ordentlich lesen.

1. Klick in den Editor und füge den Code mit `Strg+V` ein (oder über den **Paste**-Button).
2. Wähl im Sprachwähler oben rechts die passende Sprache — etwa **PHP**, **Python** oder **YAML**. Das Highlighting stellt sich sofort um.
3. Stört dich etwas an der Darstellung, öffne **Settings**: Dort lassen sich Schriftgröße, Tab-Größe, sichtbare Sonderzeichen und das Theme (**Dracula** oder **Monokai**) anpassen.

Weil es keine inhaltsbasierte Auto-Erkennung gibt, ist die manuelle Sprachwahl der entscheidende Schritt — siehe auch [Beispiel 3](#beispiel-3-die-sprache-wechseln).

## Beispiel 3: Die Sprache wechseln

Das Highlighting passt nicht, weil die Sprache falsch steht — typisch direkt nach einem URL-Load, der ja immer HTML annimmt.

1. Öffne den **Sprachwähler** (Dropdown oben rechts in der Editor-Leiste).
2. Wähl die richtige Sprache. Oben findest du die gängigen Sprachen schnell, darunter alphabetisch den kompletten Rest (100+ Einträge).
3. Das Highlighting und das Linting stellen sich sofort um; die gewählte Sprache wird zusammen mit dem Inhalt im Browser-Speicher gesichert und beim nächsten Besuch wiederhergestellt.

Lädst du z. B. eine `style.css` per URL, steht der Editor erst auf HTML — stell ihn auf **CSS** um, und die Selektoren, Eigenschaften und Werte werden korrekt eingefärbt.

## Beispiel 4: HTML in Markdown umwandeln

Du willst aus einer HTML-Seite eine saubere Markdown-Version gewinnen — etwa als rauscharme Quelle für ein KI-System oder fürs Wiki.

1. Lade die Seite per **Load** von ihrer URL (oder füge das HTML ein) — der Editor steht danach im HTML-Modus.
2. Klick auf den **Markdown**-Button (Markdown-Symbol). Der html-to-markdown-Konverter (WebAssembly, Rust-Kern) wandelt das HTML im Browser um.
3. Im Editor steht jetzt Markdown — mit einem vorangestellten **YAML-Frontmatter**, das das Tool aus den Meta-Daten der Seite gebaut hat (Titel, Description, Open Graph, Twitter usw.).
4. Stell den Sprachwähler auf **Markdown** und klick **Preview** (Auge): Die Vollbild-Vorschau rendert das Markdown als HTML, Code-Blöcke werden gehighlightet, das Frontmatter erscheint als `yaml`-Block. Aus der Vorschau kannst du das Ergebnis **als HTML kopieren oder speichern**.
5. Brauchst du nur den nackten Text ohne Auszeichnung, nimm stattdessen den **Plain-Text**-Button.

## Beispiel 5: Code formatieren (Beautify)

Eine minifizierte oder unsauber eingerückte Datei soll wieder lesbar werden.

1. Füge den Code ein oder lade ihn, und wähl die passende Sprache (**HTML**, **CSS** oder **JavaScript** — danach richtet sich, welche Beautify-Routine läuft).
2. Klick auf **Beautify** (Zauberstab). Der JS Beautifier rückt ein, bricht um und stellt die Struktur wieder her.
3. Bei stark verschleiertem JavaScript greifen zusätzlich die mitgelieferten Unpacker, sodass auch gepackter Code wieder lesbar wird.

Brauchst du das öfter oder auch für SASS/SCSS-Kompilierung, ist der spezialisierte **[Compiler](https://www.jpkc.com/db/tools/compiler/)** oder das **[Beautify](https://www.jpkc.com/db/tools/beautify/)**-Tool die schärfere Wahl.

## Beispiel 6: Die Meta-Daten und die Verbindung einer URL prüfen

Du willst nicht den Quelltext, sondern eine schnelle Auswertung einer Seite.

1. Trag die URL ein. Für eine **On-Page-/Meta-Analyse** klick auf **SEO** (Balken-Symbol): Titel, Meta-Tags, Überschriften, Links, Bilder, Keyword-Dichte und SEO-Empfehlungen landen als Markdown-Bericht im Editor.
2. Für einen **Technik-Check** klick stattdessen auf **Analyze connection** (Schild-Symbol): Du bekommst IP, Protokoll/HTTP-Version, Timing, SSL-Zertifikat, Security- und Caching-Header sowie die rohen HTTP-Header — ebenfalls als Markdown.
3. Stell den Sprachwähler auf **Markdown** und nutz **Preview**, um den Bericht gerendert zu lesen.

Für eine vollständige, bewertete Analyse mit zwei Scores und Tabs ist der **[SEO & GEO Analyzer](https://www.jpkc.com/db/tools/seo/)** das größere Werkzeug — der Source Viewer liefert die kompakte Variante direkt im Editor.

---

Noch tiefer: die [Übersicht](https://www.jpkc.com/db/tools/source/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/source/manual/) für jede Funktion im Detail und die [Tipps & Tricks](https://www.jpkc.com/db/tools/source/tips/) für die Kniffe. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/source/).