https://github.com/arman-sadeghi-2003/markdown_reader
web page for read markdown, multi theme, PDF export
https://github.com/arman-sadeghi-2003/markdown_reader
css flowchart html js markdown markdown-renderer mermaid pdf pdf-export renderer-markdown
Last synced: 24 days ago
JSON representation
web page for read markdown, multi theme, PDF export
- Host: GitHub
- URL: https://github.com/arman-sadeghi-2003/markdown_reader
- Owner: Arman-Sadeghi-2003
- License: agpl-3.0
- Created: 2025-12-29T18:14:47.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-05-27T03:25:05.000Z (about 1 month ago)
- Last Synced: 2026-05-27T05:17:57.870Z (about 1 month ago)
- Topics: css, flowchart, html, js, markdown, markdown-renderer, mermaid, pdf, pdf-export, renderer-markdown
- Language: JavaScript
- Homepage:
- Size: 1.47 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AI Output Renderer - Refactored
A clean, modular markdown renderer with RTL (Right-to-Left) language support.
## 📁 Project Structure
```
/
├── index.html # Main HTML file
├── styles/
│ ├── variables.css # CSS custom properties/variables
│ ├── base.css # Base typography and general styles
│ ├── components.css # Component-specific styles
│ └── rtl.css # RTL language support styles
├── js/
│ ├── config.js # Library configuration (marked, mermaid)
│ ├── rtl-detection.js # RTL language detection logic
│ ├── ui-controls.js # UI controls and interactions
│ ├── markdown-renderer.js # Markdown rendering logic
│ └── main.js # Main initialization and event listeners
└── README.md # This file
```
## 🎯 Features
- **Markdown Rendering**: Full support for GitHub Flavored Markdown (GFM)
- **RTL Support**: Auto-detection and manual control for RTL languages (Arabic, Hebrew, Persian, etc.)
- **Code Highlighting**: Beautiful code blocks with copy functionality
- **Mermaid Diagrams**: Render flowcharts and diagrams
- **Responsive Design**: Works on all screen sizes
- **Clean Architecture**: Modular, maintainable code structure
## 🚀 Usage
Simply open `index.html` in a modern web browser. No build process required!
### Keyboard Shortcuts
- `Ctrl+Enter` or `Cmd+Enter`: Render output
### Direction Controls
- **LTR**: Left-to-Right (default)
- **RTL**: Right-to-Left
- **Auto**: Automatic language detection
## 📦 Dependencies
All dependencies are loaded via CDN:
- [Marked.js](https://marked.js.org/) - Markdown parser
- [Mermaid](https://mermaid.js.org/) - Diagram rendering
- [Font Awesome](https://fontawesome.com/) - Icons
## 🔧 Customization
### Colors
Edit `styles/variables.css` to change the color scheme:
```css
:root {
--primary: #4cafef;
--primary-dark: #2e89d8;
--success: #4caf50;
/* ... more variables */
}
```
### Markdown Options
Edit `js/config.js` to adjust markdown parsing behavior.
### RTL Language Support
Add new RTL language patterns in `js/rtl-detection.js`:
```javascript
const RTL_LANGUAGES = {
yourLanguage: /[regex-pattern]/,
// ...
};
```
## 📝 File Descriptions
### HTML
- **index.html**: Main entry point with semantic structure
### CSS Files
- **variables.css**: All CSS custom properties in one place
- **base.css**: Typography, links, lists, and basic elements
- **components.css**: Specific component styles (buttons, code blocks, tables, etc.)
- **rtl.css**: RTL-specific style overrides
### JavaScript Files
- **config.js**: Initializes and configures external libraries
- **rtl-detection.js**: Contains RTL detection logic and language patterns
- **ui-controls.js**: Handles UI interactions (direction toggle, copy buttons)
- **markdown-renderer.js**: Core rendering functionality
- **main.js**: Event listeners and initialization
## 🎨 Code Quality Improvements
This refactored version includes:
- ✅ Separation of concerns
- ✅ Modular architecture
- ✅ Clear documentation
- ✅ Easy to maintain and extend
- ✅ Better readability
- ✅ Reusable components
## 🌐 Browser Support
Works in all modern browsers:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
## 📄 License
This is a refactored version of the AI Output Renderer. Use freely for personal or commercial projects.
## 🤝 Contributing
To add features:
1. Add styles to appropriate CSS file
2. Add logic to appropriate JS module
3. Update documentation
Keep the modular structure intact!