MarkSite 📄✨

A beautiful, modern markdown-to-HTML renderer with advanced features including dark/light themes, responsive design, and table of contents navigation.

🌟 Features

• 📱 Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• 🌙 Dark/Light Theme: Automatic theme detection with manual toggle support
• 📋 Table of Contents: Auto-generated navigation sidebar with smooth scrolling
• 🎨 Modern UI: Clean, professional design with smooth animations
• ⚡ Fast Loading: Optimized for performance with minimal dependencies
• 🔗 URL Support: Load any markdown file via URL parameter
• ♿ Accessible: Built with accessibility in mind
• 📚 GitHub Flavored Markdown: Full GFM support including tables, code blocks, and more

🚀 Live Demo

Visit the live demo at: https://nguyenhhoa03.github.io/md2web/index.html

📖 Usage

Basic Usage

Simply visit the website to view the default markdown document.

Load Custom Markdown

Add a url parameter to load your own markdown file:

https://nguyenhhoa03.github.io/md2web/index.html?url=https://raw.githubusercontent.com/yourusername/yourrepo/main/README.md

Examples

# Load a GitHub README
https://nguyenhhoa03.github.io/md2web/index.html?url=https://raw.githubusercontent.com/microsoft/vscode/main/README.md

# Load any public markdown file
https://nguyenhhoa03.github.io/md2web/index.html?url=https://example.com/documentation.md

🛠️ Installation

Option 1: Direct Download

1. Download the md2web-en-v?.html file
2. Change https://raw.githubusercontent.com/nguyenhhoa03/md2web/refs/heads/main/website.md to your markdown url.
3. Upload to your web hosting service
4. Access via your domain

Option 2: Clone Repository

git clone https://github.com/nguyenhhoa03/marksite
cd marksite
# Upload index.html to your hosting service

Option 3: Local Development

You can host md2web by Flask,...

⚙️ Configuration

The application automatically detects the best configuration, but you can customize:

Default Markdown URL

Edit in index.html:

https://raw.githubusercontent.com/nguyenhhoa03/md2web/refs/heads/main/website.md

Theme Settings

The app automatically detects system theme preference. Users can toggle manually using:

• Click the theme button (🌙/☀️)
• Keyboard shortcut: Ctrl/Cmd + Shift + D

Table of Contents

The TOC is automatically generated based on heading structure:

• Multiple H1 tags → Uses H1 for navigation
• Single H1 + H2 tags → Uses H2 for navigation
• No H2 tags → Falls back to H3 or H4

🎨 Customization

CSS Variables

Modify the CSS variables in the :root selector to customize colors:

:root {
    --bg-primary: #ffffff;
    --text-primary: #24292f;
    --text-accent: #0969da;
    /* ... more variables */
}

Adding Custom Styles

Add your custom CSS after the existing styles in the <style> section.

🔧 Technical Details

Dependencies

• Marked.js: Markdown parsing (loaded from CDN)
• No other external dependencies

Browser Support

• ✅ Chrome 60+
• ✅ Firefox 60+
• ✅ Safari 12+
• ✅ Edge 79+
• ✅ Mobile browsers

Performance Features

• Lazy loading for large documents
• Smooth scrolling with intersection observer
• Optimized CSS animations
• Minimal JavaScript footprint

🤝 Contributing

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

Development Setup

1. Fork the repository
2. Make your changes to index.html
3. Test locally
4. Submit a pull request

Contribution Guidelines

• Follow existing code style
• Test on multiple browsers
• Ensure responsive design works
• Update documentation if needed

📄 License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE section below for details.

🛡️ Security

• No user data is stored
• All markdown processing happens client-side
• CORS-enabled for loading external markdown files
• No server-side processing required

📈 Version History

Version	Release Date	Key Features
v1.3	IDK	Add code copy button
v1.2	IDK	🔗 URL parameter support, Mobile improvements
v1.1	IDK	📋 Auto table of contents
v1.0	IDK	📄 Basic markdown viewing, 🌙 Theme support

🆘 Support

If you encounter any issues or have questions:

1. Check the browser console for errors
2. Ensure the markdown URL is publicly accessible
3. Verify CORS headers are set correctly on the markdown source
4. Try with different markdown files to isolate the issue

🌍 Hosting Recommendations

MarkSite works with any static hosting service:

• GitHub Pages: Free hosting for GitHub repositories
• Infinityfree: Free hosting I use for this project
• Vercel: Fast global CDN
• Any static hosting: Upload index.html and go!

📚 Markdown Support

MarkSite supports all GitHub Flavored Markdown features:

• ✅ Headers (H1-H6)
• ✅ Bold and italic text
• ✅ Links and images
• ✅ Code blocks with syntax highlighting
• ✅ Tables
• ✅ Blockquotes
• ✅ Lists (ordered and unordered)
• ✅ Horizontal rules
• ✅ Strikethrough text
• ✅ Task lists
• ✅ Emoji support

🔮 Future Enhancements

• PDF export functionality
• Print-optimized styles
• Search functionality
• Multiple theme options
• Offline support with service worker
• Custom CSS injection via URL parameters

---

Made with ❤️ for the markdown community

Host your markdown files beautifully with MarkSite!