Markdown Editor with Live Split-Pane Preview, Syntax Highlight & TOC

Real-world use cases

• Draft a weekly report and paste it straight into Feishu without losing formatting

  Pick "Weekly report" from the template dropdown — you get a pre-shaped doc with Shipped / In flight / Next week / Asks sections. Fill in your bullets on the left and watch the right pane render in real time. When the report is ready, click "Copy rich". Switch to Feishu or Wecom group chat, paste, and the bullets, code blocks, links and bold text all land formatted. The same paste into a plain text reply (say, a Slack thread fallback) gets you clean Markdown source. One copy, two destinations.

• Write a technical blog post with code blocks and ship to your static site

  Start from the "Technical blog" template — title with promise, problem, what didn't work, what did, why, takeaway. Drop your actual code into the fenced block and the eight-language syntax highlighter colors the keywords / strings / numbers / comments inline. Hit "Export .md" and drop the file into your Astro / Hugo / Next.js content folder; or hit "Export .html" for a standalone post you can email or host as a one-off. The autosaved draft stays in localStorage if you walk away for lunch.

• Edit your project README with live TOC and one-click export

  The README template gives you Install / Quick start / API / License sections. As you add more headings, the right-hand outline updates so you can see the document's structure at a glance. The headings also get GitHub-compatible id attributes (slugified, deduped) so anchor links work after export. When it looks right, "Export .md" and commit to the repo — GitHub will re-render with the exact heading anchors the preview showed.

• Take meeting notes with Action Items checkboxes that survive the export

  Pick "Meeting notes" and you get a doc skeleton with Goals / Discussion / Decisions / Action items. Add task list items with - [ ] owner — task by date and they render as live checkboxes in the preview pane (read-only, on purpose, so they don't get accidentally toggled during the meeting). After the meeting, copy as rich text to drop into Feishu docs or DingTalk doc, or export .md to keep with your repo's meetings/ folder.

• Write a function reference doc that pastes cleanly into Confluence or Notion

  The "Function doc" template lays out Parameters / Returns / Example / Notes the way every good API reference should look. Write the example in a fenced ts block and the type annotations get highlighted. When you copy as rich text and paste into Notion or Confluence, the table for parameters, the code block, and the bullet list all preserve their structure — Confluence in particular reads the HTML payload well and keeps the code block monospaced.

Common pitfalls

• Using "Copy rich" when the target is a code field. Rich text pastes into a code field show up as styled HTML, not as code. For code, use "Copy MD" — that gets the raw Markdown source on the clipboard so paste-into-a-fenced-block-on-GitHub does what you expect.

• Trying to use raw HTML inside Markdown. This editor escapes div, script, etc. on purpose so accidental angle brackets in prose don't break the preview. If you need real HTML, write the document here, export .md, and convert via a renderer that allows HTML pass-through (the trade-off is XSS exposure, which is why we don't do it).

• Expecting LaTeX math to render. We pass $x^2$ through to a code.math span so downstream renderers (GitHub does not, GitLab does, Hugo with KaTeX does) can. The preview here intentionally shows the source — pulling in KaTeX would more than double the bundle. If you need rendered math now, copy the .md to a renderer that has KaTeX or MathJax.

Privacy