Modern Markdown Editor

A clean, lightweight, and intuitive WYSIWYG markdown editor with real-time preview and modern UI.

Features

• Real-time markdown rendering
• Clean, modern interface
• Responsive design
• Simple integration
• Keyboard shortcuts for better workflow

Installation

Include the script in your HTML:

<script src="https://raw.githubusercontent.com/arazgholami/markdown-editor/main/wysiwyg-markdown-editor.js"></script>

Basic Usage

const editor = MarkdownEditor.init('your-element-id', {
    placeholder: 'Start writing in markdown...',
    autofocus: true
});

Markdown Syntax

Headers

# H1
## H2
### H3
#### H4
##### H5
###### H6

Text Formatting

**bold text**
*italic text*
__underline__
`inline code`

Lists

- Unordered item 1
- Unordered item 2
   - Nested item

1. Ordered item 1
2. Ordered item 2
   - [ ] Task 1
   - [x] Completed task

Links & Media

[Link text](https://example.com)
![Alt text](image.jpg)

Blockquotes & Dividers

> This is a blockquote

---
Horizontal rule

Navigation

• → (Right arrow) to exit current tag
• Backspace at end to revert to markdown

Options

Option	Type	Default	Description
placeholder	string	''	Placeholder text for empty editor
autofocus	boolean	false	Auto-focus the editor on load

Browser Support

Modern browsers including:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Author

Created by Araz Gholami

Support

If you find this project useful, consider supporting its development:

Contact

• GitHub: @arazgholami
• Email: contact@arazgholami.com