Loading repository data…
Loading repository data…
seehiong / repository
Markdown Editor Pro — A powerful, feature-rich markdown editor with live preview, LaTeX math support, GitHub-inspired styling, and seamless integration into React apps. Built with React, TypeScript, and Tailwind CSS.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
A powerful, feature-rich markdown editor built with React, TypeScript, and Tailwind CSS. This editor provides a seamless writing experience with live preview, math equation support, and beautiful GitHub-inspired styling.
# Clone the repository
git clone https://github.com/seehiong/md-editor-pro.git
cd markdown-editor-pro
# Install dependencies
npm install
# Start development server
npm run dev
# Open http://localhost:5173 in your browser
import { MarkdownEditor } from './components/MarkdownEditor';
function App() {
return (
<div className="container mx-auto p-4">
<MarkdownEditor />
</div>
);
}
# H1 through ###### H6*italic*, **bold**, ~~strikethrough~~[text](url) and reference-style links with automatic sizing> quoted text with nested support--- or ***Inline math: $E = mc^2$ renders as $E = mc^2$
Block math:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
The editor automatically adapts to your application's theme system:
// Light mode (default)
<MarkdownEditor />
// Dark mode - add 'dark' class to any parent element
<div className="dark">
<MarkdownEditor />
</div>
src/
├── components/
│ ├── MarkdownEditor.tsx # Main editor component
│ ├── MarkdownGuide.tsx # Interactive help guide
│ ├── MarkdownRenderers.tsx # Custom code block renderers
│ └── MermaidDiagram.tsx # Mermaid diagram support
├── App.tsx # Root component
├── main.tsx # Application entry point
└── index.css # Global styles and Tailwind imports
// Disable specific features
<MarkdownEditor
showStats={false}
allowFileOperations={false}
enableMath={false}
/>
The editor uses Tailwind CSS classes and can be customized by:
// Add custom remark/rehype plugins
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';
// Configure in MarkdownEditor component
import { MarkdownEditor } from './components/MarkdownEditor';
export default function MyApp() {
return (
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
<div className="container mx-auto py-8">
<h1 className="text-3xl font-bold mb-6">My Markdown Editor</h1>
<MarkdownEditor />
</div>
</div>
);
}
<div className="max-w-4xl mx-auto">
<MarkdownEditor className="border border-gray-200 rounded-lg shadow-lg" />
</div>
We welcome contributions! Here's how to get started:
git checkout -b feature/amazing-featuregit commit -m 'Add amazing feature'git push origin feature/amazing-featureThis project is licensed under the MIT License - see the LICENSE file for details.
If you have questions or need help integrating this editor:
Made with ❤️ for the React community
Star ⭐ this repo if you find it useful!