JPKCom DB

Markdown Editor — Examples

Hands-on walkthroughs with the Markdown Editor: build a GFM table, keep a task list, draw a Mermaid diagram, load Markdown from a URL, and export to PDF.

Back to the overview: Markdown Editor · Open the tool live: www.jpkc.com/tools/md/

The manual explains every button and the full syntax. This page adds concrete workflows — typical tasks, walked through step by step. The tool's interface is in English, so button and menu names are used as they appear.

Example 1: Write a README from a template

The fastest start is a template instead of a blank page.

  1. Open the editor and click the Templates menu in the toolbar. Choose README.md — the editor fills with a ready-made skeleton, and the preview on the right immediately shows the rendered result.
  2. Overwrite the placeholders. As you type, the Preview updates in real time; because both columns scroll in sync, the spot you're editing stays in view.
  3. Need a table (e.g. for an options overview)? Click Insert table in the second toolbar row. A pipe-table skeleton is inserted that you just fill in.
  4. When you're done, save the result with Save as .md (or Ctrl+S). The text is already auto-saved to localStorage anyway — it'll be back on your next visit.

Example 2: Build a clean GFM table

Tables are the most common source of Markdown mistakes — live preview takes the guessing out of it.

  1. Put the cursor on an empty line and click Insert table. You get a pipe-format skeleton:

    | Column A | Column B |
| -------- | -------- |
| cell     | cell     |

  2. Fill in the cells. The separator row of dashes under the header is mandatory — without it, markdown-it renders text with pipe characters instead of a table. The preview shows immediately whether it works.

  3. Align columns with colons in the separator row: :-- left, :-: center, --: right.

  4. The columns don't have to be aligned in the source — that's purely for readability. If you like things tidy, keep them aligned anyway.

Example 3: Keep a task list

Task lists (GFM) are ideal for meeting notes or a small to-do trail.

  1. Choose Task List in the Lists menu (second toolbar row), or type it directly:

    - [ ] Write draft
- [x] Gather sources
- [ ] Proofread

  2. The preview shows real checkboxes; [x] is checked, [ ] is open.

  3. For structured notes, combine this with the Meeting Notes template from the Templates menu and list the open items as a task list.

Example 4: Draw a Mermaid diagram

Diagrams straight from text — no graphics program needed.

  1. Click Insert Mermaid diagram in the second toolbar row. A code block with the language mermaid and a sample graph is inserted:

    graph TD
    A[Start] --> B[End]

  2. The preview renders it as a flowchart right away. Extend the graph as needed — Mermaid can do flowcharts, sequence, class, state, ER diagrams, Gantt, and pie, among others.

  3. For formulas instead of diagrams, use the Math (KaTeX) menu: Math Inline for $E = mc^2$ inside the text, Math Block for a set-off formula like $$\sum_{i=1}^{n} x_i$$.

  4. Important for sharing later: on Save as HTML and Save as PDF export, Mermaid diagrams are automatically re-rendered in the light theme so they stay legible on a white background.

Example 5: Load existing Markdown from a URL and keep editing

You want to take a README from the web or a .md file on a server as a starting point.

  1. Click Load Markdown from URL. In the dialog, enter an absolute address (e.g. https://example.com/README.md) and confirm with Fetch Content.
  2. The content is fetched server-side through the JPKCom proxy and replaces your current editor content — if you still have unsaved text there, save it first with Save as .md.
  3. Mind the limits: public HTTP/HTTPS addresses only (no localhost/intranet), at most 950 KB, about 10 s timeout. Only the URL goes to the server, never your own text (see the manual).
  4. Now edit the loaded text as usual and export or save it anew.

Example 6: Export to PDF or standalone HTML

Turn your Markdown into a shareable document.

  1. Write and check your document in the preview. Optionally pick the reading theme (Dark, Light, Sepia) at the top right of the preview header — for exporting the theme choice doesn't matter, since code and diagrams are switched to a light theme anyway.
  2. Open the Export menu (next to the Preview button).
  3. Save as PDF produces a PDF file locally in the browser from the rendered preview. Save as HTML saves a complete, standalone HTML document with embedded styles (KaTeX, code highlighting, Mermaid) — the file looks correct on its own.
  4. If you just need the HTML somewhere else briefly, use Copy HTML and paste it directly. For a plain paper output there's Print.

Going deeper: the manual for every function in detail, the tips & tricks for strategy and pitfalls. You can try it all directly in the tool.