# markdown2html
**Repository Path**: wwlinhappy/markdown2html
## Basic Information
- **Project Name**: markdown2html
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-19
- **Last Updated**: 2025-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Markdown2HTML - Online Markdown to HTML Converter
๐ **Website**: [https://m2h.top](https://m2h.top)
๐ง **Contact**: [contact@m2h.top](mailto:contact@m2h.top)
A powerful, privacy-focused online tool for converting Markdown to HTML with real-time preview, multi-language support, and comprehensive syntax examples. Built with modern web technologies for developers and content creators.
## ๐ Features
### Core Functionality
- **Real-time Conversion**: Instant Markdown to HTML conversion as you type
- **Live Preview**: Side-by-side editor and preview panels
- **Privacy First**: All processing happens client-side - no data sent to servers
- **Local Storage**: Automatic saving of your work in browser storage
### User Experience
- **Modern UI**: Beautiful, responsive design with Tailwind CSS
- **Dark Theme**: Professional dark theme for comfortable coding
- **Syntax Highlighting**: Code blocks with syntax highlighting using highlight.js
- **Copy & Download**: One-click copy HTML or download as file
- **Responsive Design**: Works perfectly on desktop, tablet, and mobile
### Internationalization
- **7 Languages Supported**: Chinese, English, Japanese, Korean, French, Russian, Spanish
- **Auto Language Detection**: Automatically detects browser language
- **Manual Language Switch**: Easy language selector in the toolbar
### Developer Tools
- **Syntax Examples**: Comprehensive examples page showing all Markdown features
- **Toolbar Shortcuts**: Quick insert buttons for common Markdown syntax
- **SEO Optimized**: Optimized for search engines with proper meta tags
- **Fast Loading**: Built with Next.js 14 and optimized for performance
### Legal & Support
- **Privacy Policy**: Clear privacy policy explaining data handling
- **Terms of Service**: Comprehensive terms of service
- **Contact Page**: Easy way to get support and provide feedback
- **Friend Links**: Community links to other useful developer tools
## ๐ ๏ธ Technology Stack
- **Frontend Framework**: Next.js 14 (App Router + Server Components)
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **Markdown Parser**: marked.js
- **Syntax Highlighting**: highlight.js
- **Internationalization**: next-i18next
- **Icons**: lucide-react
- **Deployment**: Vercel-ready
## ๐ฆ Installation & Setup
### Prerequisites
- Node.js 18+
- npm or yarn or pnpm
### Quick Start
1. **Clone the repository**
```bash
git clone https://github.com/your-username/markdown2html.git
cd markdown2html
```
2. **Install dependencies**
```bash
npm install
# or
pnpm install
# or
yarn install
```
3. **Run development server**
```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```
4. **Open your browser**
Navigate to [http://localhost:3000](http://localhost:3000)
### Build for Production
```bash
npm run build
npm start
```
## ๐ฏ Usage
### Basic Usage
1. Visit [https://m2h.top](https://m2h.top)
2. Start typing Markdown in the left editor panel
3. See real-time HTML preview on the right
4. Use toolbar buttons to insert common Markdown syntax
5. Copy HTML output or download as file
### Markdown Syntax Examples
Visit the [Examples Page](https://m2h.top/examples) to see comprehensive examples of:
- Headers and text formatting
- Lists (ordered and unordered)
- Links and images
- Code blocks with syntax highlighting
- Tables
- Blockquotes
- Horizontal rules
- And more...
### Language Switching
- Click the language selector in the toolbar
- Choose from 7 supported languages
- Interface automatically updates to selected language
## ๐ Key Features in Detail
### Real-time Preview
```typescript
// Automatic conversion as you type
const html = await markdownService.parseToHtml(markdownContent);
```
### Privacy Protection
- No data sent to external servers
- All processing happens in your browser
- Local storage for persistence
- No tracking or analytics
### SEO Optimization
- Optimized meta tags for search engines
- Keywords: markdown preview online, markdown to html, developer tools online
- OpenGraph and Twitter Card support
- Sitemap and robots.txt ready
## ๐ Project Structure
```
markdown2html/
โโโ src/
โ โโโ app/ # Next.js App Router pages
โ โ โโโ examples/ # Syntax examples page
โ โ โโโ privacy/ # Privacy policy page
โ โ โโโ terms/ # Terms of service page
โ โ โโโ contact/ # Contact page
โ โ โโโ layout.tsx # Root layout with metadata
โ โ โโโ page.tsx # Homepage
โ โโโ components/ # React components
โ โ โโโ MarkdownEditor.tsx # Markdown editor component
โ โ โโโ PreviewPanel.tsx # HTML preview component
โ โ โโโ Toolbar.tsx # Toolbar with syntax shortcuts
โ โ โโโ Footer.tsx # Universal footer
โ โ โโโ ui/ # shadcn/ui components
โ โโโ lib/ # Utility libraries
โ โ โโโ i18n.ts # Internationalization config
โ โ โโโ markdown.ts # Markdown processing service
โ โโโ styles/ # Global styles
โโโ public/ # Static assets
โโโ supabase/ # Database configuration (if needed)
โโโ vercel.json # Vercel deployment config
```
## ๐ Internationalization
The project supports 7 languages with complete translations:
- **ไธญๆ (Chinese)** - ็ฎไฝไธญๆ
- **English** - English
- **ๆฅๆฌ่ช (Japanese)** - ๆฅๆฌ่ช
- **ํ๊ตญ์ด (Korean)** - ํ๊ตญ์ด
- **Franรงais (French)** - Franรงais
- **ะ ัััะบะธะน (Russian)** - ะ ัััะบะธะน
- **Espaรฑol (Spanish)** - Espaรฑol
Language files are maintained in `src/lib/i18n.ts` with complete UI translations.
## ๐ง Development
### Adding New Features
1. Follow existing code patterns and conventions
2. Use TypeScript for type safety
3. Keep components under 300 lines
4. Use shadcn/ui components when possible
5. Add proper SEO metadata
### Adding New Languages
1. Add language code to `SUPPORTED_LANGUAGES` in `src/lib/i18n.ts`
2. Add complete translation object
3. Update language selector in Toolbar component
4. Test all pages with new language
### Component Guidelines
- Keep components focused and single-purpose
- Use proper TypeScript typing
- Follow React best practices
- Implement proper error handling
- Add loading states where appropriate
## ๐ Deployment
### Vercel Deployment (Recommended)
1. Connect your GitHub repository to Vercel
2. Configure environment variables if needed
3. Deploy automatically on push to main branch
### Manual Deployment
```bash
# Build the project
npm run build
# Start production server
npm start
```
### Environment Variables
Create a `.env.local` file if needed:
```
NEXT_PUBLIC_SITE_URL=https://m2h.top
NEXT_PUBLIC_SITE_NAME=Markdown2HTML
```
## ๐ Friend Links
Current partner websites:
- [CutMaster](https://cutmaster.top/) - Online tools for developers
- [HideScreen](https://hidescreen.top/) - Privacy-focused tools
- [Online Clock](https://hidescreen.top/clock) - Full-screen online clock
- [DoTool](https://dotool.top/) - Developer utilities
To add new friend links, update the `friendLinks` array in `src/components/Footer.tsx`.
## ๐ค Contributing
We welcome contributions! Please follow these guidelines:
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
### Code Style
- Use TypeScript for all new code
- Follow existing code patterns
- Add proper error handling
- Include tests for new features
- Update documentation as needed
## ๐ License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## ๐ Support
- **Website**: [https://m2h.top/contact](https://m2h.top/contact)
- **Email**: [contact@m2h.top](mailto:contact@m2h.top)
- **Issues**: Create an issue on GitHub
## ๐ Acknowledgments
- [Next.js](https://nextjs.org/) - React framework
- [Tailwind CSS](https://tailwindcss.com/) - CSS framework
- [shadcn/ui](https://ui.shadcn.com/) - UI components
- [marked.js](https://marked.js.org/) - Markdown parser
- [highlight.js](https://highlightjs.org/) - Syntax highlighting
---
**Made with โค๏ธ for the developer community**
ยฉ 2025 m2h.top. All rights reserved.
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.