# Markdown Editor — Tips & Tricks

> Tricks for the Markdown Editor: use the live preview smartly, common rendering pitfalls (breaks, typographer, KaTeX), and combining it with other JPKCom tools.

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

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/)

The [manual](https://www.jpkc.com/db/en/tools/md/manual/) describes every function, the [examples](https://www.jpkc.com/db/en/tools/md/examples/) show the workflows. This page is about what both assume but rarely state: how to make the live preview really work for you, which rendering quirks would otherwise surprise you, and how to wire the editor up with other JPKCom tools. The interface is in English, so the real button names are used as they appear.

## Use the live preview smartly

- **Synchronized scrolling is your proofreading mode.** In long documents, the coupled columns always show the rendered state of the spot you're typing at. Turn it off with **Toggle synchronized scrolling** only when you deliberately want to look at a different place in the source than in the preview.
- **Switch the view to match the phase.** For structuring and typing, **Editor + Preview** is ideal. For writing in one stretch (or on a narrow screen), **Editor only** gives you room; for a final read-through or presenting, use **Preview only** or **Preview (Fullscreen)**.
- **The table-of-contents panel is jump navigation.** **Table of Contents** is built from your headings — in long documents you jump through it faster than scrolling. That assumes a clean heading hierarchy, which is good practice anyway.
- **Pick the reading theme to match the target medium.** The preview has **Dark**, **Light**, and **Sepia**. Dark is comfortable for on-screen work; if you want to gauge how the document looks printed or as a light PDF, switch to **Light** first.

## Know the rendering pitfalls

The editor renders with markdown-it plus a few enabled options — convenient, but they deviate from strict CommonMark. Knowing this saves surprises:

- **`breaks` is on: every single line break becomes a `<br>`.** That's pleasant while typing, but it deviates from GFM/CommonMark, where a single break within the same paragraph does *not* create a line break. If you later use your Markdown somewhere that does **not** set `breaks` (many static site generators, GitHub in body text), the break will look different there. When in doubt, separate paragraphs with a **blank line** so it renders the same everywhere.
- **The typographer substitutes automatically.** Straight quotes become curly, `--` becomes an en dash, `---` an em dash, `...` an ellipsis. But `---` alone on a line is a **horizontal rule** — not every run of dashes becomes a dash. If you literally need three hyphens in the text, escape them.
- **`html` is on: embedded HTML is rendered.** That's powerful (you can mix in HTML), but keep it in mind when pasting foreign content or loading from a URL — `<script>` and friends from an unknown source don't belong in the preview unchecked.
- **KaTeX uses dollar delimiters.** `$…$` is inline math, `$$…$$` a math block. A single `$` in body text (prices, shell variables) can therefore be misread as the start of a formula — escape it as `\$` if the preview misbehaves.
- **Mermaid needs the exact language tag.** Only a code block with `mermaid` as its language becomes a diagram; a typo in the language line turns it into an ordinary, syntax-highlighted code block.
- **`linkify` auto-links bare URLs.** An address written in the text becomes a link, even without `[…](…)` syntax. Usually handy — if you want to show a URL as text only, put it in inline code.

## Saving, loading, discarding — without losing data

- **Auto-save is convenient but browser-bound.** Your text is automatically kept in **this** browser's `localStorage` (see the [manual](https://www.jpkc.com/db/en/tools/md/manual/#architecture-storage-and-privacy)). Another browser, another device, or a cleared browser store won't know it. For anything you want to keep, the rule is: **Save as .md** once.
- **New and Clear are final.** Both empty the editor — save first if the content isn't a file yet.
- **Load Markdown from URL replaces, it doesn't append.** The loaded content fully overwrites the current editor text. If you still have something unsaved there, save it first.
- **The status badge is your save indicator.** When it turns green in the editor header, the current state is in `localStorage`.

## Export cleanly

- **For PDF/HTML the preview theme doesn't matter.** On **Save as PDF** and **Save as HTML** export, code blocks and Mermaid diagrams are automatically switched to a **light** theme so they're legible on a white background — regardless of whether you're currently viewing Dark, Light, or Sepia.
- **Save as HTML delivers a standalone document.** The necessary styles (KaTeX, code highlighting, Mermaid layout) are embedded, so the file looks correct even without internet access and external stylesheets.
- **Copy HTML for the quick path.** If you just want to drop the result somewhere else, **Copy HTML** is faster than a file — paste the rendered code straight into the target system.

## Combining with other JPKCom tools

- **Prefer visual over syntax? The [WYSIWYG Editor](https://www.jpkc.com/db/en/tools/wysiwyg/)** is the closest relative: a rich-text HTML editor based on TipTap with Markdown import and export. You can move content back and forth between the two tools — structure it in the Markdown Editor, polish it visually in the WYSIWYG tool, or the other way around.
- **Inspect and tidy exported HTML.** The markup produced by **Copy HTML**/**Save as HTML** can be viewed with syntax highlighting in the **[Source Viewer](https://www.jpkc.com/db/en/tools/source/)** and formatted as needed with **[Beautify](https://www.jpkc.com/db/en/tools/beautify/)**.
- **Markdown is the AI format.** When you provide content for AI systems, Markdown is the lowest-noise format. Build a matching, valid `llms.txt` for your site with the **[llms.txt Generator](https://www.jpkc.com/db/en/tools/llms/)**.

---

More context: the [overview](https://www.jpkc.com/db/en/tools/md/) for the big picture, the [manual](https://www.jpkc.com/db/en/tools/md/manual/) for every function, and the [examples](https://www.jpkc.com/db/en/tools/md/examples/) for the step-by-step workflows. You can try it all directly in the [tool](https://www.jpkc.com/tools/md/).