📝 Overview
Write and preview Markdown in real time with syntax highlighting, shortcuts, and export to Markdown or HTML.
✨ Features
- Live preview: Edit on the left; preview updates on the right.
- Syntax highlighting: Markdown syntax is highlighted in the editor.
- Shortcuts: Keyboard shortcuts for common formatting.
- Export: Export as .md or full HTML.
- Responsive: Works on different screen sizes.
- Auto-save: Content is saved to local storage automatically.
💡 Steps
- Type or paste Markdown in the editor on the left.
- The rendered preview appears on the right.
- Use the toolbar or shortcuts to format text.
- Click "Export Markdown" to save a .md file.
- Or click "Export HTML" for a complete HTML document.
⌨️ Shortcuts
- Ctrl + B: Bold
- Ctrl + I: Italic
- Ctrl + K: Insert link
- Ctrl + Shift + I: Insert image
- Ctrl + Shift + C: Insert code block
- Ctrl + Shift + Q: Blockquote
- Ctrl + Shift + L: Bullet list
- Ctrl + Shift + O: Numbered list
📋 Syntax
- Headings: Use # (# H1, ## H2, etc.).
- Text: **bold**, *italic*, ~~strikethrough~~.
- Links: [text](URL).
- Images: .
- Code: `inline` and ```fenced blocks```.
- Lists: - bullets and 1. numbered lists.
- Quotes: > quoted text.
- Tables: | columns | with | --- | header row.
- Rules: --- or *** for horizontal rules.
🎯 Use Cases
- Technical docs and README files.
- Blog posts and notes.
- Project documentation.
- API docs.
- Presentations.
- Study notes and knowledge bases.
⚠️ Notes
- Content is auto-saved to browser local storage.
- Content survives page refresh.
- Export important documents to files regularly.
- Most standard Markdown syntax is supported.
- Some extensions may vary — check if unsure.
- HTML export includes a full document structure.
❓ FAQ
- How do I insert a table?
Use | between columns and --- on the second row for the header, e.g. | Col1 | Col2 | Col3 |. - Are math formulas supported?
Yes — LaTeX with $ delimiters, e.g. $E=mc^2$. - Can I customize styles?
Edit CSS on the exported HTML file. - Are flowcharts and sequence diagrams supported?
Yes — via Mermaid syntax. - How do I get syntax highlighting in code blocks?
Add a language after the opening fence, e.g. ```javascript or ```python.