# Source Viewer

> What the Source Viewer does: a code editor with syntax highlighting for 100+ languages, URL loading, HTML-to-Markdown, and beautify — your starting point.

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

## View, highlight, and edit source code

The [Source Viewer](https://www.jpkc.com/tools/source/) is a full code editor in the browser. You paste source code, open a file from disk, or pull in the source of a remote URL — and get it shown instantly with **syntax highlighting for over 100 languages**: from HTML, CSS, JavaScript, PHP, and Python through YAML, SQL, and Dockerfile to Rust, Go, Swift, and Kotlin. Line numbers, code folding, find-and-replace, and a dark editor theme are there from the start.

So it is more than a plain viewer: you can edit the code directly, format it with the built-in **beautifier** for JavaScript, CSS, and HTML, turn HTML into clean **Markdown** or plain text, and preview Markdown live as HTML. Everything runs in the browser, with no account and no installation; the editor auto-saves your work to local browser storage and restores it on your next visit.

The tool is built for everyone who needs to get at code quickly: **developers** who want to inspect the source of a live page or tidy up a snippet; **content and SEO people** who convert HTML to Markdown or check a URL's meta data; and anyone who just needs a decent editor with highlighting without firing up an IDE.

> In the live tool the editor is simply named **"Source"** (title: "Source: Code Editor with Syntax Highlighting"). The interface is in English throughout — this documentation therefore refers to button and menu labels in their original English spelling.

## What the Source Viewer can do — at a glance

The features group into four areas:

- **Editor & highlighting** — the editor is built on the [ACE Editor](https://ace.c9.io/) and brings its full feature set: syntax highlighting for 100+ languages (language selector top right), line numbers, code folding, multiple cursors, autocomplete, syntax checking (linting), find/replace, go-to-line, and a dark theme (**Dracula**, alternatively **Monokai**).
- **Load content** — three ways: **paste/type** code, **open a local file** (HTML5 File API), or **load the source of a URL** (via the JPKCom proxy, see below). Saving as a file and a "Clear" to empty the editor are included.
- **Convert** — **Beautify** (format code via JS Beautifier), **HTML → Markdown** (including auto-generated YAML frontmatter from the meta data), **HTML → plain text**, and a **Markdown/text preview** that renders the result as HTML and highlights code blocks.
- **URL analysis** — beyond the plain source, the tool can load an **SEO** evaluation (meta data, headings, links, images) and a **connection analysis** (HTTP headers, SSL certificate, timing) for a URL as a Markdown report into the editor.

On top of that come convenience functions: change font size, toggle line wrap, fullscreen mode, print, a keyboard-shortcuts overview, and a settings dialog (tab size, theme, visible whitespace, indent guides, line numbers, autocomplete, linting).

## Server-side fetch, highlighting in the browser

When you load a URL, that is a deliberate hybrid — just like the [SEO & GEO Analyzer](https://www.jpkc.com/db/en/tools/seo/): the remote page is fetched **server-side via the JPKCom proxy** (a direct fetch from your browser would otherwise fail on CORS). The syntax highlighting, conversion, and preview then happen **locally in your browser**.

For privacy that means: the loaded page sees a request from the JPKCom server, not your IP address. The proxy is hardened against abuse — it blocks internal and private addresses (SSRF protection), allows only HTTP/HTTPS, and caps the size and runtime of each fetch. How exactly this works and what limits apply is covered in the [manual](https://www.jpkc.com/db/en/tools/source/manual/). What you **cannot** load by URL: pages behind a login, local dev instances, or intranet addresses.

## Try it now

**[→ Open the Source Viewer](https://www.jpkc.com/tools/source/)** — paste code or load a URL, pick a language, done. No account, free, right in the browser.

## Related JPKCom tools

- **[SEO & GEO Analyzer](https://www.jpkc.com/db/en/tools/seo/)** — uses the same server-side proxy and has its own *Source Code* tab running the same ACE editor; the direct relative when it comes to analyzing a URL.
- **[Beautify](https://www.jpkc.com/db/en/tools/beautify/)** — the specialized formatter for JavaScript, CSS, and HTML (the same JS Beautifier engine), including deobfuscation.
- **[Compiler](https://www.jpkc.com/db/en/tools/compiler/)** — compile SASS/SCSS to CSS, and minify and beautify HTML, JavaScript, and CSS.
- **[Playground](https://www.jpkc.com/db/en/tools/playground/)** — run HTML/CSS/JavaScript live in the browser instead of just viewing it.
- **[Markdown Editor](https://www.jpkc.com/db/en/tools/md/)** — for when you want to keep writing the result you got from HTML-to-Markdown.

---

There's more on the subpages: the **[manual](https://www.jpkc.com/db/en/tools/source/manual/)** with every feature and the proxy architecture in detail, hands-on **[examples](https://www.jpkc.com/db/en/tools/source/examples/)**, and a collection of **[tips & tricks](https://www.jpkc.com/db/en/tools/source/tips/)**.

