Skip to content

Latest commit

 

History

2 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 

Repository files navigation

MDCraft Markdown Editor

A lightweight yet powerful, fully client-side Markdown editor built with HTML, CSS, and JavaScript. Features an extensive toolbar, live preview, and support for downloading in multiple formats, all with no backend required.

MDCraft Markdown Editor

✅ List of Features:

File Downloads:

  • .md (Markdown)
  • .html (Complete HTML with styling)
  • .txt (Plain text)
  • .pdf (PDF format)

Comprehensive Toolbar:

  • Edit Operations: Undo, Redo
  • Text Formatting: Bold, Italic, Strikethrough, Blockquotes, Capitalize First Letter, Uppercase, Lowercase
  • Headers: H1-H6 dropdown selector
  • Lists: Unordered/Ordered lists, Horizontal rule
  • Links & Media: Links, Reference links, Images
  • Code: Inline code, Code blocks, Preformatted text (tab-indented)
  • Special: Tables, Date/Time, Emojis, HTML entities, Page breaks
  • View: Watch/Unwatch, Fullscreen, Clear, Search

CodeMirror Integration:

  • Syntax highlighting for Markdown
  • Line numbers
  • Keyboard shortcuts (Ctrl+S, Ctrl+F, F11, Esc)
  • Professional editing experience

4. Libraries Used:

  • CodeMirror: Advanced editor with syntax highlighting
  • Marked: Markdown-to-HTML conversion
  • FontAwesome: Icons throughout the interface
  • GitHub Markdown CSS: GitHub-style preview rendering
  • Prettify.js: Syntax highlighting for code blocks

5. Side-by-Side Preview:

  • Real-time preview on the right
  • Watch/Unwatch toggle (preview shows/hides)
  • Editor takes full width when preview is hidden

🎯 Key Features:

  • Professional Interface: Clean, modern design with organized toolbar
  • Real-time Preview: Live rendering as you type
  • Modal Dialogs: For complex insertions (links, images, tables)
  • Keyboard Shortcuts: Standard editor shortcuts
  • Fullscreen Mode: Distraction-free editing (Esc to exit)
  • Search Functionality: Find text within the document
  • Responsive Design: Works well on different screen sizes

The editor includes everything you need for professional markdown editing, from basic formatting to advanced features like tables, code blocks, and HTML entities.

About

A lightweight yet powerful, fully client-side Markdown editor built with HTML, CSS, and JavaScript. Features an extensive toolbar, live preview, and support for downloading in multiple formats, all with no backend required.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors