Feature Showcase
Discover everything MoonMDS has to offer in this comprehensive feature guide.
🎯 Core Features
File Browser
The home page presents all your markdown files in a beautiful grid layout:
- Card-based design with hover effects
- Reading time estimation for each file
- Tag filtering to find related content
- Search functionality to quickly locate files
- Pagination for large collections
Document Viewer
When viewing a document, you get:
- Animated headings that gracefully appear
- Table of Contents sidebar (on larger screens)
- Copy code buttons for easy sharing
- External link indicators for safety
- Smooth scrolling navigation
🖼️ Visual Elements
Images
MoonMDS renders images beautifully with:
- Rounded corners
- Shadow effects
- Captions from alt text
- Lazy loading for performance
Tables
| Feature | Status | Notes |
|---|---|---|
| Themes | ✅ Complete | Light/Dark/System |
| Share | ✅ Complete | Native + Social |
| Search | ✅ Complete | Full-text search |
| TOC | ✅ Complete | Auto-generated |
Horizontal Rules
Use horizontal rules to separate content sections:
Like this! They add visual breathing room to your documents.
💻 Code Blocks
Multiple Languages
hljs bash# Shell commands
npm install
npm run dev
hljs css/* CSS with syntax highlighting */
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 1rem;
}
hljs json{
"name": "moonmds",
"version": "1.0.0",
"description": "Beautiful markdown viewer",
"features": ["themes", "sharing", "animations"]
}
Inline Code
You can use inline code for small snippets like npm install or variable names like const theme = 'dark'.
🌈 Typography
Heading Hierarchy
The heading system is designed for clarity:
H1 - Document Title
H2 - Major Sections
H3 - Subsections
H4 - Minor Points
Text Styling
- Bold text for emphasis
- Italic text for subtle emphasis
Strikethroughfor correctionscodefor technical terms
Links
- Internal links for navigation
- External links open in new tabs with an indicator
📤 Sharing
The share button supports:
- Native Share API (on supported devices)
- Copy link to clipboard
- Twitter sharing
- Facebook sharing
- LinkedIn sharing
⌨️ Keyboard Navigation
Navigate MoonMDS efficiently:
| Key | Action |
|---|---|
Tab | Navigate interactive elements |
Enter | Activate buttons/links |
Esc | Close dropdowns |
🎭 Animations
MoonMDS uses subtle animations throughout:
- Page transitions
- Card hover effects
- Button interactions
- Scroll-based reveals
- Theme switching transitions
All animations respect user preferences for reduced motion.
Explore more by browsing other markdown files in this collection!