Skip to the tool
CALCPARK

Markdown Editor

Write Markdown with a live preview: headings, tables, task lists, KaTeX formulas and highlighted code. Autosaves in your browser; download as .md or .html, or print.

Runs on your device
Loading the tool…

How to use it

  1. Type in the left pane or open an existing .md file. The preview on the right updates as you type; on a phone, switch between Editor and Preview with the tabs.
  2. Select text and press a toolbar button (or Ctrl+B, Ctrl+I, Ctrl+K) to wrap it in bold, italic, link or code markers.
  3. Insert a formula with $x$ / $$, a code block with ``` followed by the language name, or a task list with - [ ].
  4. Check the word count in the footer, then download the Markdown or HTML, copy it, or print the preview.
  5. Come back later: the last document is restored automatically. “New document” clears the editor and the saved copy.

Example

The sample document loaded on first visit contains every supported construct. This fragment:

## Formulas
Area of a circle: $A = \pi r^2$

```ts
export function greet(name: string) { return `Hi ${name}`; }
```

- [x] Write the document
- [ ] Download as .html

renders as an H2 heading, a typeset formula, a TypeScript block with keywords coloured, and two checkboxes (one ticked). “Download .html” names the file after the first H1 – markdown-editor.htmlfor the sample – and “Download .md” saves the source unchanged.

What the editor uses

  • Editing: CodeMirror 6 with Markdown syntax highlighting, line numbers and soft wrapping. Fenced code blocks are highlighted in the editor too, using the language name after the backticks.
  • Rendering: markdown-it in CommonMark mode with linkify and typographic quotes, plus a small task-list rule that turns - [ ] / - [x] into disabled checkboxes. Raw HTML in the source is passed through to the preview.
  • Maths: markdown-it-texmath with the KaTeX engine (dollar delimiters). Invalid LaTeX is shown in red instead of breaking the preview; KaTeX supports most of LaTeX maths but not every package macro.
  • Code: highlight.js “common” bundle – about 40 languages including JavaScript, TypeScript, Python, Java, C, C++, C#, Go, Rust, PHP, Ruby, SQL, Bash, JSON, YAML, HTML/XML, CSS and Markdown. Unknown languages are shown as plain code.
  • Autosave: one document, stored under a single key in localStorage (typically a 5 MB quota per site). Private windows and some browser settings block storage; the indicator says so and downloads still work.
  • HTML export: a self-contained page with inline CSS. If the document contains formulas, the file links the KaTeX stylesheet from the jsDelivr CDN so the maths renders when opened online.

Sources: CommonMark specification, GitHub Flavored Markdown spec – tables, task lists, strikethrough, KaTeX – supported functions, markdown-it.

Limits

  • Only one document is kept; opening a file or starting a new document replaces it (download first if you need it).
  • Images are shown only from URLs; there is no upload, so local images stay broken in the preview.
  • Very long documents (tens of thousands of lines) slow the live preview; switch to Editor view while typing.

Questions

How do I write a formula?
Put LaTeX between single dollar signs for inline maths ($E = mc^2$) or between $$ lines for a centred display formula. Fractions, roots, sums, integrals, Greek letters and matrices all work; see the KaTeX function list for the rest.
Can I turn the Markdown into a PDF?
Press Print and choose "Save as PDF" in the browser dialog – only the preview is printed, without the editor or the page chrome. For page-size and margin options use the Markdown to PDF tool.
Where is my document saved?
In this browser’s local storage on this device only. Clearing site data, private windows or another browser will not have it, so download the .md file for anything you want to keep.
Why does a code block have no colours?
Add the language after the opening backticks (```python). The editor bundles the common languages; rare ones fall back to plain monospace text.