by seehiong
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.
# Add to your Claude Code skills
git clone https://github.com/seehiong/md-editor-proGuides for using ai agents skills like md-editor-pro.
md-editor-pro is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by seehiong. 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. It has 112 GitHub stars.
md-editor-pro's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/seehiong/md-editor-pro" and add it to your Claude Code skills directory (see the Installation section above).
md-editor-pro is primarily written in TypeScript. It is open-source under seehiong on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh md-editor-pro against similar tools.
No comments yet. Be the first to share your thoughts!
Unlocks once the catalog security scan passes (runs nightly).
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
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!