Advanced Markdown Editor for Technical Writers

A powerful, real-time Markdown editor built with React and TypeScript, designed specifically for technical writers, documentation specialists, and content creators. This project aims to streamline the technical writing workflow by providing a modern, feature-rich editing environment.

🌟 Features

• Real-time Preview: See your formatted content as you type
• Advanced Markdown Support:
  • Standard Markdown syntax
  • Tables
  • Code blocks with syntax highlighting
  • Task lists
  • Footnotes
  • Subscript and superscript
• Mathematical Expressions: Full LaTeX/KaTeX support for mathematical equations
• Export/Import: Save and load Markdown files
• Learning Resources: Direct links to Markdown tutorials and documentation
• Clean, Modern UI: Built with Tailwind CSS and shadcn/ui components
• Safe Content Handling: DOMPurify integration for sanitized HTML output

🚀 Why This Matters for Technical Writing

In today's fast-paced technical documentation landscape, having robust tools that support modern documentation practices is crucial. This project contributes to the technical writing community by:

1. Promoting Markdown Adoption:

   • Markdown is becoming the de facto standard for technical documentation
   • Easier version control and collaboration through plain text
   • Compatible with modern documentation platforms and static site generators

2. Empowering Writers:

   • Reduced context switching with real-time preview
   • Built-in support for technical content like math equations and diagrams
   • Focus on content rather than formatting

3. Supporting Learning:

   • Integrated resources for learning Markdown
   • Immediate visual feedback helps reinforce Markdown syntax
   • Community-driven approach to feature development

🛠️ Technology Stack

• React 18+
• TypeScript
• Tailwind CSS
• shadcn/ui components
• marked.js for Markdown parsing
• KaTeX for math rendering
• DOMPurify for HTML sanitization

📦 Installation

# Clone the repository
git clone https://github.com/Technical-writing-mentorship-program/Markdown-editor.git

# Navigate to project directory
cd Markdown-editor

# Install dependencies
npm install

# Start the development server
npm run dev

🔧 Usage

1. Start writing in the left panel using Markdown syntax
2. See the formatted output in real-time on the right
3. Use the toolbar buttons to:
   • Load existing Markdown files
   • Save your work
   • Access learning resources
4. Special syntax support:

   # Math Equations
   $E = mc^2$
   
   # Footnotes
   Here's a statement[^1]
   [^1]: This is the footnote
   
   # Subscript/Superscript
   H~2~O and x^2^

🤝 Contributing

We welcome contributions from the technical writing community! Here's how you can help:

1. Report Issues: Help us identify bugs or suggest improvements
2. Feature Requests: Share your needs as a technical writer
3. Code Contributions: Submit PRs for new features or bug fixes
4. Documentation: Help improve our documentation and examples

🎯 Future Roadmap

• Maths support (This is not working properly)
• Mermaid.js diagram support
• Multiple theme support
• Collaborative editing
• Custom extensions support

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

This project stands on the shoulders of giants in both the technical writing and open-source communities. Special thanks to:

• The Markdown community
• React and TypeScript teams
• Contributors to marked.js and KaTeX
• Technical writers who provided valuable feedback

🌐 Join the Community

We're building more than just a tool - we're building a community of technical writers who believe in better documentation tools. Join us:

• Discord Community
• Twitter
• Technical Writing Blog

---

Built with ❤️ by the TWMP (Technical Writing Community) Lead Wisdom Nwokocha and Co-Lead Prince Onyeanuna

"Better tools lead to better documentation."