JPKCom DB

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.

Back to the overview: Markdown Editor · Open the tool live: 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.
  • 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).

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.

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).
  • 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. Concrete workflows are in the examples, strategic tricks in the tips & tricks. You can try it all directly in the tool.