GitHub Markdown Editor

A modern, feature-rich Markdown editor built with CodeMirror 6, React, and TypeScript. Inspired by GitHub's editor with full GitHub Flavored Markdown (GFM) support.

✨ Features

• 🎨 GitHub-inspired UI - Clean, professional interface matching GitHub's design
• ⚡ CodeMirror 6 - Powerful, extensible editor with syntax highlighting
• 📝 GitHub Flavored Markdown - Full GFM support including tables, task lists, and strikethrough
• 👁️ Live Preview - Toggle between edit and preview modes
• 🎯 Custom Toolbar - Quick access to common markdown formatting
• 📁 Import/Export - Import and export .md files
• 🌓 Light/Dark Theme - Built-in theme support
• 📊 Word Count - Real-time character and word counting
• ⌨️ Keyboard Shortcuts - Standard text editor shortcuts
• 🔧 TypeScript - Full type safety and IntelliSense support

📦 Installation

npm install github-markdown-editor
# or
yarn add github-markdown-editor
# or
pnpm add github-markdown-editor

🚀 Quick Start

import { MarkdownEditor } from 'github-markdown-editor';
import 'github-markdown-editor/dist/style.css';

function App() {
  const handleChange = (value: string) => {
    console.log('Markdown content:', value);
  };

  return (
    <MarkdownEditor
      initialValue="# Hello World"
      onChange={handleChange}
      height="600px"
    />
  );
}

📖 API Reference

MarkdownEditor Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialValue | string | '' | Initial markdown content | | onChange | (value: string) => void | - | Callback fired when content changes | | height | string | '600px' | Height of the editor | | theme | 'light' \| 'dark' | 'light' | Editor theme | | showToolbar | boolean | true | Show/hide the toolbar | | showPreview | boolean | false | Initial preview state |

Utility Functions

import {
  convertMarkdownToHtml,
  exportToMarkdown,
  exportToHtml,
  extractFrontmatter
} from 'github-markdown-editor';

// Convert markdown to HTML
const html = await convertMarkdownToHtml('# Hello');

// Export markdown
exportToMarkdown(content, 'document.md');

// Export as HTML
exportToHtml(htmlContent, 'document.html');

// Extract frontmatter
const { frontmatter, content } = extractFrontmatter(markdown);

🎨 Customization

Custom Styling

You can override the default styles by targeting the CSS classes:

.markdown-editor {
  /* Your custom styles */
}

.toolbar {
  /* Custom toolbar styles */
}

.preview-wrapper {
  /* Custom preview styles */
}

Dark Theme

<MarkdownEditor theme="dark" />

🔧 Advanced Usage

Controlled Component

import { useState } from 'react';
import { MarkdownEditor } from 'github-markdown-editor';

function ControlledEditor() {
  const [markdown, setMarkdown] = useState('# Hello');

  return (
    <div>
      <MarkdownEditor
        initialValue={markdown}
        onChange={setMarkdown}
      />
      <button onClick={() => console.log(markdown)}>
        Get Content
      </button>
    </div>
  );
}

With Custom Height and No Toolbar

<MarkdownEditor
  height="100vh"
  showToolbar={false}
  showPreview={true}
/>

🎯 Supported Markdown Features

• Headers - # H1 through ###### H6
• Emphasis - *italic* and **bold**
• Lists - Ordered and unordered
• Links - [text](url)
• Images - ![alt](url)
• Code - Inline and fenced code blocks with syntax highlighting
• Tables - GitHub-style tables
• Task Lists - - [ ] and - [x]
• Blockquotes - > quote
• Strikethrough - ~~text~~
• Horizontal Rules - ---
• Autolinks - Automatic URL linking

🛠️ Development

# Clone the repository
git clone https://github.com/justq-me/gh-markdown-editor.git

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

📝 License

MIT © [Your Name]

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🐛 Issues

If you find a bug or have a feature request, please create an issue on GitHub.

🙏 Acknowledgments

• CodeMirror 6 - The powerful editor foundation
• remark - Markdown processing
• GitHub - Design inspiration

📊 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🔗 Links

• Documentation
• NPM Package
• GitHub Repository

Made with ❤️ by JustQ