# Markdown Editor — Manual

> The feature reference for the Markdown Editor: every toolbar button, the full GFM and extension syntax, architecture, export, and all keyboard shortcuts.

Source: https://www.jpkc.com/db/en/tools/md/manual/

Back to the overview: [Markdown Editor](https://www.jpkc.com/db/en/tools/md/) · Open the tool live: [www.jpkc.com/tools/md/](https://www.jpkc.com/tools/md/)

This manual describes the **Markdown Editor** in full: every toolbar button, the supported Markdown syntax in its entirety, how the editor saves, how export works, and what limits apply. The tool's interface is in English, so button and menu names are used as they appear.

## Layout of the interface

The editor has three areas:

1. **The two-row toolbar** at the top — row 1 for file, view, and export actions, row 2 for the actual Markdown formatting.
2. **The editor column** (left, titled "Markdown") — where you type. A small badge in its header shows the `localStorage` status: green when the current state is saved.
3. **The preview column** (right, titled "Preview") — the rendered result, switchable between the **Dark**, **Light**, and **Sepia** reading themes.

Both columns scroll **in sync** by default. On narrow screens the columns stack, and some buttons (clipboard, fullscreen) hide.

## GitHub Flavored Markdown and extensions

Rendering uses **markdown-it**, configured with `linkify` on (bare URLs become links), `breaks` (a single line break becomes a `<br>`), `typographer` (typographic substitutions), and `html` (embedded HTML is rendered). On top of that sits a whole set of plugins. The supported range:

### GFM core

- **Headings** `#` through `######`
- **Bold** `**text**`, **italic** `*text*`, **strikethrough** `~~text~~`
- **Inline code** `` `code` `` and **code blocks** with triple backticks and an optional language — rendered with syntax highlighting via **highlight.js**
- **Lists** — unordered (`-`), ordered (`1.`), and **task lists** (`- [x]` / `- [ ]`)
- **Tables** in pipe format `| A | B |`
- **Blockquotes** `> …`, **horizontal rules** `---`
- **Links** `[text](url)`, **images** `![alt](url)`, and **auto-linked** bare URLs

### Extensions beyond GFM

- **Footnotes** — `Text[^1]` with `[^1]: note text`
- **Definition lists** — a line `Term`, then `:   Definition`
- **Subscript** `~text~` (e.g. `H~2~O`) and **superscript** `^text^` (e.g. `x^2^`)
- **Highlight** `==text==` (`<mark>`) and **insertion** `++text++` (`<ins>`)
- **Abbreviations** — `*[HTML]: Hyper Text Markup Language` produces an `<abbr>` with a tooltip
- **Emoji shortcodes** — `:smile:`, `:heart:`, `:rocket:` …
- **Math with KaTeX** — inline `$E = mc^2$`, block `$$\sum_{i=1}^{n} x_i$$` (dollar delimiters)
- **Mermaid diagrams** — a code block with the language `mermaid` renders as a diagram (flowchart, sequence, class, state, ER, Gantt, pie)
- **Typographer** — straight quotes become curly, `--` becomes an en dash, `---` an em dash, `...` an ellipsis
- **Raw HTML** — embedded HTML tags are rendered in the preview

The built-in **Markdown Cheat Sheet** (in the `…` tools menu) lists this syntax compactly with examples.

## Toolbar, row 1 — file and view

### File operations — New / Open / Save / Load from URL / Clear

- **New document** — clears the editor for a new document.
- **Open .md file** — opens a local file (`.md`, `.markdown`, `.txt`) via a file dialog.
- **Save as .md** — saves the current editor content as a Markdown file (also via `Ctrl`+`S`).
- **Load Markdown from URL** — opens a dialog where you enter a URL; the content of that URL is fetched server-side and **replaces** the current editor content. Mechanics and limits in [Architecture](#architecture-storage-and-privacy).
- **Clear editor** — discards the content.

### Templates — document templates

A menu of six ready-made skeletons that fill the editor: **README.md**, **Changelog**, **Blog Post**, **Meeting Notes**, **API Documentation**, and **License (MIT)**. A good starting point instead of a blank page.

### Clipboard — Cut / Copy / Paste

Cut, copy, and paste (visible on larger screens only) — the usual clipboard actions on the editor content.

### Undo / Redo

Undo (`Ctrl`+`Z`) and redo (`Ctrl`+`Y`) across the full ACE history.

### Font size

Two buttons decrease and increase the editor font size (also settable as a numeric value in Settings).

### View options

- **Editor + Preview** — split view (default).
- **Editor only** — just the editor.
- **Preview only** — just the preview.
- **Table of Contents** — shows a TOC panel built from your document's headings.
- **Toggle line wrap** — toggles line wrapping in the editor.
- **Toggle synchronized scrolling** — turns the synced scrolling of editor and preview on/off (default: on).
- **Toggle fullscreen** — fullscreen mode (exit with `Escape`).

### Tools menu (`…`)

- **Go to Line** (`Ctrl`+`G`), **Find** (`Ctrl`+`F`), **Replace** (`Ctrl`+`H`) — navigation and search.
- **Print Markdown** — prints the raw Markdown source.
- **Markdown Cheat Sheet** — the built-in syntax reference.
- **Keyboard Shortcuts** — the overview of all shortcuts.
- **Settings** — the editor settings (see [Settings](#settings)).

### Preview & Export

- **Preview (Fullscreen)** — opens the rendered preview full-screen in a modal, with its own Copy, Save, PDF, and Print buttons.
- The attached export menu offers: **Copy HTML** (rendered HTML to the clipboard), **Save as HTML** (a complete, standalone HTML document with embedded styles), **Save as PDF**, and **Print**. Details under [Export and printing](#export-and-printing).

## Toolbar, row 2 — Markdown formatting

### Text formatting

- **Headings** — menu for heading 1 through 6.
- **Bold** (`**text**`), **Italic** (`*text*`), **Strikethrough** (`~~text~~`).
- **Subscript** (`~text~`), **Superscript** (`^text^`).
- **Highlight** (`==text==`), **Inserted** (`++text++`).
- **Inline code** (`` `code` ``).

### Block elements

- **Lists** — menu for **Unordered List**, **Ordered List**, **Task List**, and **Definition List**.
- **Blockquote** (`> quote`), **Code block**, **Insert table**, **Horizontal rule** (`---`).
- **Insert Mermaid diagram** — inserts a Mermaid skeleton.

### References & extras

- **Insert link** (`[text](url)`), **Insert image** (`![alt](url)`).
- **Footnote** (`[^1]`), **Emoji** (`:smile:`), **Abbreviation**.
- **Math (KaTeX)** — menu for **Math Inline** (`$…$`) and **Math Block** (`$$…$$`).

## Architecture, storage, and privacy

At its core the editor is a **pure client-side application**: rendering, auto-saving, and export all happen in your browser. Your document never leaves your machine — unless you deliberately save or export it as a file.

**Automatic saving** stores the current content under the key `md_editor_content` in your browser's `localStorage`; the editor settings live under `md_editor_settings`. Both persist between sessions and are back after a reload. The status badge in the editor header turns green when the state has been saved.

The **only** feature that contacts the server is **Load Markdown from URL**. The flow:

1. The tool's JavaScript first fetches a fresh, time-limited token pair through an internal token endpoint (`p-api.php`).
2. With that, it calls the fetch proxy (`p.php`), which loads the URL you entered **server-side** via cURL and returns the raw content (typically `text/markdown` or `text/plain`).

These two endpoints are **not a public API** you can call yourself — they're hardened against outside use with tokens, referer checks, and daily-rotating secrets, and are used solely by the tool itself. What matters for privacy: when loading a URL, only the **target URL** goes to the server, never the text you write in the editor. The target page sees a request from the JPKCom server, not your IP address. Server-side limits apply:

- **SSRF protection:** private, local, and internal IP addresses are blocked; HTTP/HTTPS only.
- **Size limit:** at most **950 KB** of response body.
- **Timeout:** about **10 s** per fetch.

### Expert Mode (optional)

If the optional **LocalProxy** (Expert Mode) is active, loading from a URL goes through a self-run local proxy at `http://127.0.0.1:<port>` instead — in which case the target URL never reaches the JPKCom server at all. Setting it up is advanced and not needed for normal use.

## Export and printing

All exports are produced **locally in the browser** from the rendered preview:

- **Copy HTML** — copies the rendered HTML to the clipboard.
- **Save as HTML** — saves a complete, standalone HTML document; the necessary styles (KaTeX CSS, a light highlight.js theme, Mermaid layout) are embedded so the file looks correct on its own.
- **Save as PDF** — renders the preview to a PDF file via html2pdf.js/html2canvas; code blocks and Mermaid diagrams are switched to a light theme for print.
- **Print** / **Print Markdown** — prints the rendered preview or the raw Markdown source, respectively.

For HTML and PDF export, Mermaid diagrams are re-rendered in the light theme before export so they stay legible on a white background.

## Settings

The **Settings** dialog configures the editor; the values are saved to `localStorage`:

- **Font Size** — font size in pixels (8–32, default 15).
- **Tab Size** — 2, 4 (default), or 8 spaces.
- **Theme** — ACE editor theme: **Dracula** (default) or **Monokai** (dark), **GitHub** or **Solarized (Sepia)** (light).
- **Word wrap** — line wrapping (default: on).
- **Show invisible characters** — show whitespace.
- **Show indent guides** — indentation guides (default: on).
- **Show line numbers** — line numbers (default: on).
- **Highlight active line** — highlight the active line (default: on).
- **Reset to Defaults** — reset all values.

## Keyboard shortcuts

The ACE editor brings a full set. The most important:

- **Formatting:** `Ctrl`+`B` bold, `Ctrl`+`I` italic.
- **File:** `Ctrl`+`S` save as `.md`, `Ctrl`+`O` open file.
- **Search & replace:** `Ctrl`+`F` find, `Ctrl`+`H` replace, `F3` next, `Shift`+`F3` previous.
- **Editing:** `Ctrl`+`Z` undo, `Ctrl`+`Y` redo, `Ctrl`+`D` duplicate line, `Ctrl`+`Shift`+`K` delete line, `Tab`/`Shift`+`Tab` indent/outdent, `Alt`+`↑`/`↓` move line.
- **Navigation:** `Ctrl`+`G` go to line, `Ctrl`+`Home`/`Ctrl`+`End` to start/end, `Alt`+`←`/`→` by word.
- **View:** `Escape` exits fullscreen.

The full list is in the **Keyboard Shortcuts** dialog (tools menu).

## Limits

- The editor only renders what markdown-it plus the loaded plugins can do — exotic Markdown dialects or GitHub-specific features such as alerts/callouts are not covered.
- Because `breaks: true`, **every** single line break becomes a `<br>` — this deviates from strict CommonMark/GFM (see [Tips & Tricks](https://www.jpkc.com/db/en/tools/md/tips/)).
- Because `html: true`, embedded HTML is rendered in the preview; that's intentional, but keep it in mind when pasting foreign content.
- **Load Markdown from URL** is limited to public HTTP/HTTPS addresses (no `localhost`/intranet), at most 950 KB, ~10 s timeout.
- Auto-save lives only in **this** browser; another browser or a cleared `localStorage` won't know your text.

For the introduction and the target audiences, see the [overview page](https://www.jpkc.com/db/en/tools/md/). Concrete workflows are in the [examples](https://www.jpkc.com/db/en/tools/md/examples/), strategic tricks in the [tips & tricks](https://www.jpkc.com/db/en/tools/md/tips/). You can try it all directly in the [tool](https://www.jpkc.com/tools/md/).