# Source Viewer — Examples

> Hands-on runs with the Source Viewer: view a URL's source, paste and highlight code, switch language, convert HTML to Markdown.

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

Back to the overview: [Source Viewer](https://www.jpkc.com/db/en/tools/source/) · Open the tool live: [www.jpkc.com/tools/source/](https://www.jpkc.com/tools/source/)

The [manual](https://www.jpkc.com/db/en/tools/source/manual/) explains every function and the proxy architecture in detail. This page adds **concrete workflows** — typical tasks walked through step by step. The tool's interface is in English, so button and menu names are given in their original spelling.

## Example 1: View the source of a URL

The classic — you want to see how a remote page is built.

1. Open the [Source Viewer](https://www.jpkc.com/tools/source/) and enter an absolute address in the URL field at the top (e.g. `https://example.com/`).
2. Click **Load** (download icon). The source is fetched server-side via the JPKCom proxy and written into the editor (toast "Content loaded from URL.").
3. The editor is now in **HTML** mode — that's the case after every URL load. Highlighting kicks in immediately: tags, attributes, and values are color-coded, with line numbers down the left.
4. Use **Find** (`Ctrl+F`) or the **More tools** menu to jump to a specific spot, and collapse large blocks with code folding.

What you will **not** see this way: anything loaded later via JavaScript in the browser, and anything behind a login. What is loaded is the delivered raw HTML, not the fully rendered DOM.

## Example 2: Paste and highlight code

You have a snippet from a log file, a chat, or an email and want to read it cleanly.

1. Click into the editor and paste the code with `Ctrl+V` (or via the **Paste** button).
2. Pick the right language in the selector at the top right — say **PHP**, **Python**, or **YAML**. The highlighting switches instantly.
3. If the rendering bothers you, open **Settings**: there you can adjust font size, tab size, visible whitespace, and the theme (**Dracula** or **Monokai**).

Because there is no content-based auto-detection, picking the language manually is the decisive step — see also [Example 3](#example-3-switch-the-language).

## Example 3: Switch the language

The highlighting is off because the language is wrong — typical right after a URL load, which always assumes HTML.

1. Open the **language selector** (dropdown at the top right of the editor bar).
2. Pick the correct language. The common languages are at the top for quick access, with the full rest listed alphabetically below (100+ entries).
3. Highlighting and linting switch instantly; the chosen language is saved alongside the content in browser storage and restored on your next visit.

If you load a `style.css` by URL, for instance, the editor starts in HTML — switch it to **CSS** and the selectors, properties, and values get colored correctly.

## Example 4: Convert HTML to Markdown

You want to extract a clean Markdown version from an HTML page — say as a low-noise source for an AI system or for your wiki.

1. Load the page via **Load** from its URL (or paste the HTML) — the editor is then in HTML mode.
2. Click the **Markdown** button (Markdown icon). The html-to-markdown converter (WebAssembly, Rust core) converts the HTML in the browser.
3. The editor now holds Markdown — with a leading **YAML frontmatter** block that the tool built from the page's meta data (title, description, Open Graph, Twitter, and so on).
4. Set the language selector to **Markdown** and click **Preview** (eye): the fullscreen preview renders the Markdown as HTML, code blocks get highlighted, and the frontmatter appears as a `yaml` block. From the preview you can **copy or save the result as HTML**.
5. If you only need the bare text without markup, use the **plain-text** button instead.

## Example 5: Format code (Beautify)

A minified or sloppily indented file should become readable again.

1. Paste or load the code, and pick the matching language (**HTML**, **CSS**, or **JavaScript** — that determines which beautify routine runs).
2. Click **Beautify** (magic wand). The JS Beautifier indents, wraps, and restores the structure.
3. For heavily obfuscated JavaScript the bundled unpackers also kick in, so packed code becomes readable again.

If you need this often, or for SASS/SCSS compilation, the specialized **[Compiler](https://www.jpkc.com/db/en/tools/compiler/)** or the **[Beautify](https://www.jpkc.com/db/en/tools/beautify/)** tool is the sharper choice.

## Example 6: Check a URL's meta data and connection

You don't want the source but a quick evaluation of a page.

1. Enter the URL. For an **on-page/meta analysis** click **SEO** (bar-chart icon): title, meta tags, headings, links, images, keyword density, and SEO recommendations land as a Markdown report in the editor.
2. For a **technical check** click **Analyze connection** (shield icon) instead: you get IP, protocol/HTTP version, timing, SSL certificate, security and caching headers, and the raw HTTP headers — also as Markdown.
3. Set the language selector to **Markdown** and use **Preview** to read the report rendered.

For a complete, scored analysis with two scores and tabs, the **[SEO & GEO Analyzer](https://www.jpkc.com/db/en/tools/seo/)** is the bigger tool — the Source Viewer delivers the compact variant right in the editor.

---

There's more depth elsewhere: the [overview](https://www.jpkc.com/db/en/tools/source/) for the big picture, the [manual](https://www.jpkc.com/db/en/tools/source/manual/) for every function in detail, and the [tips & tricks](https://www.jpkc.com/db/en/tools/source/tips/) for the clever bits. You can try everything directly in the [tool](https://www.jpkc.com/tools/source/).