Markdown Editor — Manual

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. Button and menu names are given exactly as they appear in the interface.

Layout of the interface

The editor has three areas:

1. The two-row toolbar at the top — row 1 holds the File menu (document, templates, saving, and export) plus view and tool actions, row 2 the actual Markdown formatting.
2. The editor column (left, titled "Markdown") — where you type. A small badge on the right of its header shows the localStorage status: green when the current state is saved, red when saving fails. Below the editor sits a status line with the size in bytes, words, lines, and the estimated reading time (200 words per minute, at least one minute), plus the cursor position (Ln, Col).
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. Below 992 px width (phones, tablets in portrait) the columns no longer sit side by side: the Markdown and Preview tabs switch between editor and preview, while the view you picked for the desktop stays saved. On narrow screens the clipboard buttons (below 768 px) and the fullscreen button (below 576 px) also hide.

The toolbar works from the keyboard too: it is one tab stop, and inside it you move with the arrow keys, Home, and End. On narrow touch devices each toolbar row becomes a strip you swipe sideways; arrows ‹ › at the edges signal that more buttons are waiting. With a mouse or trackpad the rows wrap instead.

GitHub Flavored Markdown and extensions

Rendering uses markdown-it (version 15), configured with linkify on (bare URLs and even domains without a protocol such as example.com 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 — with a language highlight.js knows (e.g. javascript, php, bash) the block is syntax-highlighted; without a language tag it stays uncolored in the live preview, while in the fullscreen preview and in the exports highlight.js guesses the language automatically and colors it
• 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
• Front matter — if the document starts on line 1 with --- (YAML) or +++ (TOML) and the same marker closes the block later, the preview shows it as a set-off code block with a rule below, instead of reading it as text and a horizontal line
• Raw HTML — embedded HTML tags are rendered in the preview; before that, the DOMPurify sanitizer strips everything executable (see Limits)

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

Toolbar, row 1 — file and view

File menu — document, templates, saving, and export

The blue File button on the far left bundles everything that concerns the document as a whole, in three sections.

Document:

• New document — replaces the content with the editor's welcome text, a sample document that walks through the supported syntax. For a truly empty page, use Clear document.
• Open file… (Ctrl+O) — opens a local file (.md, .markdown, .txt) through a file dialog. You can also simply drag text files onto the editor column (see Images and files).
• Load from URL… — opens the "Load Markdown from URL" dialog, where you enter an address and confirm with Fetch Content (or Enter); the content is fetched server-side and replaces the current editor content. Mechanics and limits in Architecture.
• Snapshots… — manage saved versions of the document (see Snapshots).
• Tidy up Markdown — cleans up the source without changing the rendered result (see Tidy up Markdown).
• Clear document — empties the editor.

Before New document, Clear document, a template, or a dropped file replaces real content, the editor asks first (for New, Clear, and dropped files "… will replace the current document. Continue?", for templates "Replace current content with template?"). With an empty editor or the untouched welcome text, there's no question. On top of that, the editor automatically takes a snapshot of the previous content before replacing it, and Ctrl+Z undoes the replacement.

New from template: six templates, see the next section.

Save & export:

• Save as Markdown (Ctrl+S) — saves the editor content as a .md file.
• Save as HTML, Save as PDF — a standalone HTML file or a PDF.
• Copy as formatted text — copies the rendered result so that it pastes with formatting into email clients, Word, or Google Docs.
• Copy as HTML — copies a complete HTML document to the clipboard.
• Print preview… — prints the rendered preview.
• Print Markdown source… — prints the raw Markdown source.

The file name comes from the document's first heading ("My Notes" becomes my-notes.md); without a heading the first line of text is used, and failing that, document. Details on every export under Export and printing.

Templates — document templates

In the File menu under New from template you'll find six ready-made skeletons that fill the editor: README.md, Changelog, Blog Post (with YAML front matter for title, date, author, tags, and description), Meeting Notes, API Documentation, and License (MIT). A good starting point instead of a blank page. If the editor already holds your own text, the tool asks first ("Replace current content with template?").

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 font size of editor and preview by 1 px each, within a range of 8 to 32 px (also settable as a number in Settings).

View options

• Editor + Preview — split view (default).
• Editor only — just the editor.
• Preview only — just the preview.
• Table of Contents — opens a table-of-contents panel on the left (see Table of contents and synchronized scrolling).
• 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). On narrow screens the Markdown/Preview tabs stay available below the toolbar.

The editor remembers the view, line wrapping, and scroll sync across reloads.

Tools menu (⋮)

• Go to Line (Ctrl+G) — opens a small dialog that shows the valid line range; Go jumps to the line you enter.
• Find (Ctrl+F), Replace (Ctrl+H) — open the ACE editor's search bar.
• Markdown Cheat Sheet — the built-in syntax reference.
• Keyboard Shortcuts — an overview of the main keyboard shortcuts.
• Settings — the editor settings (see Settings).

Preview (Fullscreen)

The Preview button opens the rendered preview full-screen in a modal, in the reading theme you currently have selected. Its header has its own buttons: Copy (same as Copy as HTML), Save (same as Save as HTML), PDF, and Print. All other export functions live in the File menu; 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`).

The formatting buttons toggle: if the selected text is already bold (the asterisks sit directly outside or inside the selection), a second click on Bold removes the markers again. The text stays selected afterwards, so you can keep formatting right away. Without a selection, the button inserts a selected placeholder (such as bold text) that you simply type over.

Headings apply line by line to every line in the selection: a different level replaces the existing one (## Title becomes ### Title with Heading 3, not ### ## Title), and the same level removes it.

Block elements

• Lists — menu for Unordered List, Ordered List, Task List, and Definition List. List types work like headings on all selected lines: a different type replaces the existing list marker, the same type removes it; ordered lists are numbered consecutively. Definition List inserts a Term / : Definition skeleton.
• Blockquote (> quote) — adds or removes > in front of all selected lines.
• Code block — wraps the selection in a triple-backtick code block on its own lines; without a selection the placeholder code is selected, and you add the language right after the opening backticks.
• Insert table — opens the table dialog (see Tables).
• Horizontal rule (---).
• Insert Mermaid diagram — inserts a Mermaid skeleton (graph TD with two nodes).

References & extras

• Insert link, Insert image — with text selected you get [Text](url) or ![Text](url), with url already selected so you can type the address straight away. Without a selection, [link text](url) or ![alt text](image-url) is inserted, with the link text or alt text selected.
• Footnote — inserts a reference [^1] and, below it, the definition [^1]: Footnote text here.
• Emoji — opens an emoji picker with a search field ("Search emojis…"). Clicking an emoji inserts its shortcode, such as :rocket:, not the character itself — that keeps your Markdown portable. The picker shows at most 160 emojis at a time; you find all the others through the search field. Note: every click on the Emoji button itself, including the one that closes the picker, also inserts :smile: at the cursor position. Alternatively, type a colon and a few letters in the editor (:thu): a suggestion list pops up with up to 20 emojis whose name contains the typed characters, such as :thumbsup:.
• Abbreviation — inserts a definition line *[ABBR]: Full text here.
• Math (KaTeX) — menu for Math Inline ($…$ around the selection, or the placeholder E = mc^2) and Math Block ($$…$$ on lines of its own).

Table of contents and synchronized scrolling

Table of Contents opens a panel on the left listing every heading in the document, indented by level. Next to each heading is the number of words in its section up to the next heading — handy for gauging chapter length. The list is built from markdown-it's parse result: lines starting with # inside code blocks don't show up, Setext headings (text with === or --- underneath) do. Clicking an entry puts the heading at the top edge of the editor, and the preview follows. The panel updates as you type.

Synchronized scrolling works in both directions: scroll the editor and the preview follows, and vice versa. How the two areas map onto each other is set in Settings:

• Line-accurate (default) — follows the source lines of the rendered blocks. The preview therefore shows exactly the paragraph, heading, image, or diagram you're at in the editor. Over tall images and diagrams that take up only one line in the source, the preview briefly moves faster in exchange.
• Proportional (classic, evenly paced) — maps the scroll position as a percentage. That runs evenly, but can be noticeably off in documents with lots of images or diagrams.

Tables: dialog, CSV, and pasting from Excel

Insert table opens the "Insert table" dialog:

• Columns (1–20, default 3) and Body rows (1–100, default 2) — create an empty table with the header cells Column 1, Column 2 …
• Alignment — Default, Left, Center, or Right for all columns (via colons in the separator row).
• …or paste data — paste data here instead: CSV, semicolon- or tab-separated, for example copied straight from Excel. The first row becomes the header. The dialog detects the delimiter from the first row; quoted values may contain delimiters, line breaks, and doubled quotes (""). Pipe characters in cells are escaped as \|, line breaks become <br>.
• Preview — shows the finished Markdown that lands at the cursor position when you click Insert, with a blank line before and after.

The columns are already aligned in the source.

Pasting is even more direct: copy a cell range from Excel, LibreOffice, or Google Sheets (at least two rows and two columns), paste it into the editor with Ctrl+V, and it automatically becomes an aligned Markdown table. One Ctrl+Z removes the pasted table again; this doesn't bring back the raw, tab-separated cells. Inside a code block, pasted text stays as it is.

Images and files via drag & drop or the clipboard

• Drag an image onto the editor column — the image is embedded at the cursor position as a data URI (Base64), as ![filename.png](data:image/png;base64,…).
• Paste an image from the clipboard (a screenshot, say) — it's embedded the same way, as ![pasted image](data:…). From 500 KB the tool warns you, because the browser storage behind auto-save only holds about 5 MB.
• Drag a text file onto the editor column — Markdown or text files (.md, .markdown, .mdown, .mkd, .mkdn, .txt, .text, or any text/* file type) replace the document after a confirmation. Other files (PDF, ZIP …) are rejected with an error message.

Embedded images make the document self-contained but bloat it: as Base64 text an image is larger than the original file, and all of it sits in the source and in the auto-save. For larger images, a link to a hosted file is the better choice.

Snapshots

Snapshots are named versions of your document, stored in this browser's localStorage. You open them via File → Snapshots…:

• Save current document — saves the current state; the name in the field before it is optional (up to 80 characters). Without a name, the tool uses the document title (the first heading, otherwise the first line, otherwise "Untitled").
• The list shows each snapshot's name, date, size, and the label "automatic" for automatically created ones. Restore brings a snapshot back, the trash icon deletes it.

The editor takes a snapshot automatically before a document is replaced: on New document, a template, Open file…, a dropped file, Load from URL…, Clear document, and also before Restore. Such snapshots are named something like "Project X — before clearing". If the content matches the most recent snapshot, no further automatic one is created; for an empty editor or the untouched welcome text, none is created at all.

At most 20 snapshots are kept. When a new one comes in or storage is full, the oldest automatic ones go first, and only then the oldest manual ones.

Tidy up Markdown

File → Tidy up Markdown cleans up the source without changing what gets rendered:

• Tables are aligned; the alignment set in the separator row (:--, :-:, --:) is preserved.
• Trailing spaces are removed — except for a hard line break (two or more spaces before a following line), which is normalized to exactly two spaces.
• Runs of blank lines are collapsed into one; the file ends with exactly one line break.
• The contents of code blocks with backticks or tildes and the front matter stay untouched. In indented code (four spaces or a tab), blank lines are kept, but trailing spaces are removed there as well.

The change is a single undo step. A message reports how many tables were aligned; if there's nothing to do, the tool says "Already tidy — nothing to change."

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.

Auto-save stores the current content one second after your last change under the key md_editor_content in your browser's localStorage; the editor settings (including view, reading theme, and scroll mode) live under md_editor_settings, the snapshots under md_editor_snapshots. Everything persists between sessions and is back after a reload; on start-up the tool reports "Content restored from local storage." The status badge in the editor header turns green when the state has been saved. If storage is full (typically after several embedded images) or blocked, it turns red, and a one-time message warns that the document is no longer being auto-saved — at that point only Save as Markdown helps.

The only feature that sends anything of yours to the server is Load from URL…. (Besides that, the editor loads the static emoji list emoji-data.json from the JPKCom server as soon as you open the emoji picker, or when typing or pasting puts a colon followed by at least one lowercase letter, digit, or _, +, - directly before the cursor. A time such as 12:30 counts too. The picker and the autocomplete load the list independently of each other; nothing of yours goes along.) 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: HTTP/HTTPS only; private, local, internal, and other non-public IP ranges are blocked, including detours via NAT64 or 6to4 addresses. Only ports 80, 443, 3000, 5000, 8000, 8008, 8080, and 8443 are allowed.
• Size limit: at most 950 KB of response body; the proxy aborts larger responses ("The file is too large.").
• Timeout: 10 s per fetch or per redirect (at most 5 s of that for connecting), at most 30 s for the whole chain of up to 5 redirects.
• Rate limit: at most 120 fetches per minute per IP address; beyond that the tool reports "Too many requests …".

If the proxy reports an error (invalid or internal address, expired token, a response that's too large or empty, rate limit), the text appears as an error message and your document stays untouched. If the target server answers with an error page instead (such as "404: Not Found" or an HTML error page), the proxy passes its text through, and it replaces your document like any other content. When content does arrive, the editor automatically takes a snapshot before replacing anything; Ctrl+Z brings back the previous state as well.

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 live in the File menu under Save & export and are produced locally in the browser. For this the editor renders the document afresh, in a light design and regardless of the reading theme you've chosen:

• Save as Markdown — the source as a .md file (UTF-8).
• Save as HTML — saves a complete, standalone HTML document. The necessary styles are embedded: a plain base layout, a light highlight.js theme for code, and the KaTeX CSS. The <title> comes from the first heading. The file pulls the KaTeX fonts by absolute URL from the JPKCom server, and images stay references to their source (except embedded data URIs). When you print the file, long code lines wrap instead of being cut off.
• Save as PDF — renders a PDF via html2pdf.js (html2canvas), A4 portrait with 10 mm margins. Page breaks are placed so that lines and blocks aren't sliced through the middle.
• Copy as formatted text — puts the rendered result on the clipboard as HTML and the Markdown source as plain text. An email client, Word, or Google Docs picks up the formatting on paste, a plain text field gets the Markdown. If the browser doesn't support this, a message points you to Copy as HTML.
• Copy as HTML — copies the same complete HTML document as Save as HTML (with <head> and styles) to the clipboard as text.
• Print preview… — opens the HTML document in a new window and starts the print dialog there.
• Print Markdown source… — prints the raw source in a monospace font, with a "Markdown Source" header and the print date.

For HTML export, copying, printing, and PDF, Mermaid diagrams are re-rendered in the light theme so they stay legible on a white background. The export strips the preview's internal line markers (data-line). With an empty editor, saving, PDF, printing, and Copy as formatted text stop with a message ("Nothing to save.", "Nothing to export.", "Nothing to print.", "Nothing to copy."); Copy as HTML (including the Copy button in the fullscreen modal), by contrast, copies an HTML skeleton with an empty <body>.

Settings

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

• Font Size — font size of editor and preview 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).
• Synchronized scrolling — Line-accurate (follows headings, images, diagrams) (default) or Proportional (classic, evenly paced); for the difference see Table of contents and synchronized scrolling.
• 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 editor adds its own shortcuts on top of ACE's default bindings. The keys below apply to Windows and Linux, as they actually behave in the editor; on a Mac, use Cmd instead of Ctrl for the file and formatting shortcuts — some of the other ACE shortcuts are bound differently there.

• Formatting: Ctrl+B bold, Ctrl+I italic (both toggle).
• File: Ctrl+S save as Markdown, Ctrl+O open a file.
• Find & replace: Ctrl+F search bar, Ctrl+H find and replace. Inside the search bar, Ctrl+G jumps to the next match and Ctrl+Shift+G to the previous one; outside the search bar, Ctrl+K and Ctrl+Shift+K do the same.
• Editing: Ctrl+Z undo, Ctrl+Y (or Ctrl+Shift+Z) redo, Ctrl+D delete line, Ctrl+Shift+D duplicate line or selection, Alt+↑/↓ move line, Alt+Shift+↓ copy line down, Tab/Shift+Tab indent/outdent.
• Navigation: Ctrl+G "Go to line" dialog, Ctrl+Home/Ctrl+End to the start/end of the document, Ctrl+←/→ by word, Alt+←/→ to the start/end of the line.
• View: Escape exits fullscreen.
• Toolbar: Tab moves into the toolbar, where ←/→, Home, and End move between buttons.

The Keyboard Shortcuts dialog in the tools menu summarizes a selection; a few of its entries (such as Ctrl+D, F3, and Alt+←/→) differ from the actual bindings described here.

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. Preview and export, however, run through the DOMPurify sanitizer: <script> tags, event handlers such as onerror, and other executable parts are removed, including in content you load from a URL. What's left after filtering is plain markup. If DOMPurify fails to load, the preview shows an error message instead of unfiltered HTML.
• Load from URL… is limited to public HTTP/HTTPS addresses (no localhost/intranet), at most 950 KB, 10 s timeout per fetch (at most 30 s with redirects), 120 fetches per minute.
• Auto-save and snapshots live only in this browser; another browser or a cleared localStorage won't know your text. Browser storage typically holds only a few MB — lots of embedded images fill it up quickly.

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.