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.
Last scanned: 7/10/2026
{
"issues": [],
"status": "PASSED",
"scannedAt": "2026-07-10T07:34:16.218Z",
"npmAuditRan": true,
"pipAuditRan": true,
"promptInjectionRan": true
}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 115 GitHub stars.
Yes. md-editor-pro passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.
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!
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
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!