Skip to content

Commit 52ed2fa

Browse files
docs: refresh README layout and feature list
Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/31c08c9f-8568-420e-8c30-3a7db9c6c8cb Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
1 parent 620cdc0 commit 52ed2fa

1 file changed

Lines changed: 183 additions & 106 deletions

File tree

README.md

Lines changed: 183 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,94 @@
11
# Markdown Viewer
22

33
<div align="center">
4-
<img src="assets/icon.jpg" alt="Markdown Viewer Logo" width="150px"/>
5-
<h3>A powerful GitHub-style Markdown rendering tool</h3>
6-
<p>Fast, secure, and feature-rich - all running in your browser</p>
7-
<a href="https://markdownviewer.pages.dev/">Live Demo</a> •
8-
<a href="#-features">Features</a> •
9-
<a href="#-screenshots">Screenshots</a> •
10-
<a href="#-usage">Usage</a> •
11-
<a href="#-license">License</a>
4+
<img src="assets/icon.jpg" alt="Markdown Viewer Logo" width="140" />
5+
6+
<p><strong>Professional GitHub-style Markdown editor and previewer</strong></p>
7+
<p>Live preview, diagrams, math, export tools, and multi-document workflows — all in your browser.</p>
8+
9+
<p>
10+
<a href="https://markdownviewer.pages.dev/">Live Demo</a> ·
11+
<a href="https://github.com/ThisIs-Developer/Markdown-Viewer/wiki">Documentation</a> ·
12+
<a href="https://github.com/ThisIs-Developer/Markdown-Viewer/issues">Issues</a> ·
13+
<a href="https://github.com/ThisIs-Developer/Markdown-Viewer/releases">Releases</a>
14+
</p>
15+
16+
<p>
17+
<img alt="License" src="https://img.shields.io/github/license/ThisIs-Developer/Markdown-Viewer?color=2ea043" />
18+
<img alt="Latest release" src="https://img.shields.io/github/v/release/ThisIs-Developer/Markdown-Viewer" />
19+
<img alt="Last commit" src="https://img.shields.io/github/last-commit/ThisIs-Developer/Markdown-Viewer" />
20+
<img alt="Stars" src="https://img.shields.io/github/stars/ThisIs-Developer/Markdown-Viewer?style=flat" />
21+
</p>
1222
</div>
1323

14-
## 🚀 Overview
24+
---
25+
26+
## Table of Contents
27+
28+
- [About the Project](#about-the-project)
29+
- [Features](#features)
30+
- [Screenshots](#screenshots)
31+
- [Getting Started](#getting-started)
32+
- [Usage](#usage)
33+
- [Documentation](#documentation)
34+
- [Built With](#built-with)
35+
- [Showcase](#showcase)
36+
- [Contributing](#contributing)
37+
- [Contributors](#contributors)
38+
- [License](#license)
39+
- [Contact](#contact)
40+
41+
---
42+
43+
## About the Project
1544

16-
Markdown Viewer is a professional, full-featured Markdown editor and preview application that runs entirely in your browser. It provides a GitHub-style rendering experience with a clean split-screen interface, allowing you to write Markdown on one side and instantly preview the formatted output on the other.
45+
Markdown Viewer is a full-featured Markdown editor and preview application that renders GitHub-flavored Markdown in real time. It is entirely client-side, lightweight, and optimized for a professional writing workflow — from quick notes to technical documentation with diagrams and LaTeX.
1746

18-
## ✨ Features
47+
---
48+
49+
## Features
50+
51+
**Editor & Preview**
52+
- Live split-screen rendering with instant updates
53+
- GitHub-flavored Markdown (GFM) support
54+
- Syntax highlighting for 190+ languages
55+
- GitHub-style alerts/admonitions (`[!NOTE]`, `[!TIP]`, `[!WARNING]`, etc.)
56+
- Emoji shortcode rendering (JoyPixels) and native Unicode emoji support
57+
- YAML frontmatter parsing with a rendered metadata table
58+
59+
**Diagrams & Math**
60+
- LaTeX math rendering via MathJax (inline + block)
61+
- Mermaid diagrams with an interactive toolbar (zoom, pan, copy, PNG/SVG export)
62+
63+
**File & Sharing Tools**
64+
- Import from local files, drag & drop, or public GitHub URLs (multi-file selection)
65+
- Export as Markdown, HTML (standalone), or PDF
66+
- Share documents via URL with compressed content
67+
- Copy rendered HTML directly to clipboard
68+
69+
**Productivity & Workflow**
70+
- Multiple document tabs (new, rename, duplicate, delete)
71+
- Reset all tabs in one action
72+
- Drag-and-drop tab reordering
73+
- Tab/session state saved in localStorage
74+
- View modes: editor-only, preview-only, or split
75+
- Resizable editor/preview panes
76+
- Synchronized scrolling (toggleable)
77+
- Live content statistics (words, characters, reading time)
78+
- Keyboard shortcuts (export, copy, new/close tab, sync toggle, indentation)
79+
80+
**UI & Accessibility**
81+
- Responsive layout with a dedicated mobile menu
82+
- Light/dark themes with system preference support
83+
84+
**Privacy & Security**
85+
- 100% client-side processing
86+
- Sanitized HTML rendering with DOMPurify
87+
- No tracking, no cookies, no server storage
1988

20-
- **GitHub-style Markdown rendering** - See your Markdown exactly as it would appear on GitHub
21-
- **Live preview** - Instantly see changes as you type
22-
- **Syntax highlighting** - Beautiful code highlighting for multiple programming languages
23-
- **LaTeX math support** - Render mathematical equations using LaTeX syntax
24-
- **Mermaid diagrams** - Create diagrams and flowcharts within your Markdown; hover over any diagram to reveal a toolbar for zooming, downloading (PNG/SVG), and copying to clipboard
25-
- **Dark mode toggle** - Switch between light and dark themes for comfortable viewing
26-
- **Export options** - Download your content as Markdown, HTML, or PDF
27-
- **Import Markdown files** - Drag & drop, select local files, or import from public GitHub links
28-
- **Copy to clipboard** - Quickly copy your Markdown content with one click
29-
- **Sync scrolling** - Keep editor and preview panes aligned (toggleable)
30-
- **Content statistics** - Track word count, character count, and reading time
31-
- **Fully responsive** - Works on desktop and mobile devices
32-
- **Emoji support** - Convert emoji shortcodes into actual emojis
33-
- **100% client-side** - No server processing, ensuring complete privacy and security
34-
- **No sign-up required** - Use instantly without any registration
89+
---
3590

36-
## 📸 Screenshots
91+
## Screenshots
3792

3893
### Code Syntax Highlighting
3994
![Code Syntax Highlighting](assets/code.png)
@@ -47,92 +102,114 @@ Markdown Viewer is a professional, full-featured Markdown editor and preview app
47102
### Tables Support
48103
![Tables Support](assets/table.png)
49104

50-
## 📝 Usage
51-
52-
1. **Writing Markdown** - Type or paste Markdown content in the left editor panel
53-
2. **Viewing Output** - See the rendered HTML in the right preview panel
54-
3. **Importing Files** - Click "Import" for local files, use "GitHub Import" for repository links, or drag and drop .md files
55-
4. **Exporting Content** - Use the "Export" dropdown to download as MD, HTML, or PDF
56-
5. **Toggle Dark Mode** - Click the moon icon to switch between light and dark themes
57-
6. **Toggle Sync Scrolling** - Enable/disable synchronized scrolling between panels
58-
59-
### Mermaid Diagram Toolbar
60-
61-
When a Mermaid diagram is rendered, hover over it to reveal a small toolbar with the following actions:
62-
63-
| Button | Action |
64-
|--------|--------|
65-
| ⛶ (arrows) | Open diagram in a zoom/pan modal |
66-
| PNG | Download the diagram as a PNG image |
67-
| 📋 (clipboard) | Copy the diagram image to the clipboard |
68-
| SVG | Download the diagram as an SVG file |
69-
70-
Inside the **zoom modal** you can:
71-
- **Zoom in / out** using the buttons or the mouse wheel
72-
- **Pan** by clicking and dragging the diagram
73-
- **Reset** zoom and position with the Reset button
74-
- **Download PNG or SVG** directly from the modal
75-
- **Close** with the × button or by pressing `Escape`
76-
77-
### Supported Markdown Features
78-
79-
- Headings (# H1, ## H2, etc.)
80-
- **Bold** and *italic* text
81-
- ~~Strikethrough~~
82-
- [Links](https://example.com)
83-
- Images
84-
- Lists (ordered and unordered)
85-
- Tables
86-
- Code blocks with syntax highlighting
87-
- Blockquotes
88-
- GitHub-style alerts/admonitions (`[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`, `[!CAUTION]`)
89-
- Horizontal rules
90-
- Task lists
91-
- LaTeX equations (inline and block)
92-
- Mermaid diagrams
93-
- And more!
94-
95-
## 🔧 Technologies Used
96-
97-
- HTML5
98-
- CSS3
99-
- JavaScript
100-
- [Bootstrap](https://getbootstrap.com/) - Responsive UI framework
101-
- [Marked.js](https://marked.js.org/) - Markdown parser
102-
- [highlight.js](https://highlightjs.org/) - Syntax highlighting
103-
- [MathJax](https://www.mathjax.org/) - Mathematical expressions
104-
- [Mermaid](https://mermaid-js.github.io/mermaid/) - Diagrams and flowcharts
105-
- [DOMPurify](https://github.com/cure53/DOMPurify) - HTML sanitization
106-
- [html2canvas.js](https://github.com/niklasvh/html2canvas) + [jsPDF](https://www.npmjs.com/package/jspdf)- PDF generation
107-
- [FileSaver.js](https://github.com/eligrey/FileSaver.js) - File download handling
108-
- [JoyPixels](https://www.joypixels.com/) - Emoji support
109-
110-
## 🤝 Contributing
111-
112-
Contributions are welcome! Please feel free to submit a Pull Request.
113-
114-
1. Fork the project
115-
2. Create your feature branch (`git checkout -b amazing-feature`)
116-
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
117-
4. Push to the branch (`git push origin amazing-feature`)
118-
5. Open a Pull Request
119-
120-
## 🖥️ Built with Markdown Viewer
105+
---
106+
107+
## Getting Started
108+
109+
### Option 1 — Docker (Recommended)
110+
```bash
111+
docker run -d \
112+
--name markdown-viewer \
113+
-p 8080:80 \
114+
--restart unless-stopped \
115+
ghcr.io/thisis-developer/markdown-viewer:latest
116+
```
117+
Open **http://localhost:8080**.
118+
119+
### Option 2 — Docker Compose
120+
```bash
121+
git clone https://github.com/ThisIs-Developer/Markdown-Viewer.git
122+
cd Markdown-Viewer
123+
docker compose up -d
124+
```
125+
126+
### Option 3 — Static Web Server
127+
```bash
128+
git clone https://github.com/ThisIs-Developer/Markdown-Viewer.git
129+
cd Markdown-Viewer
130+
python3 -m http.server 8080
131+
```
132+
133+
### Option 4 — Desktop App
134+
Download pre-built binaries from the [Releases](https://github.com/ThisIs-Developer/Markdown-Viewer/releases) page or build from source (see the [Desktop App](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/Desktop-App) guide).
135+
136+
---
137+
138+
## Usage
139+
140+
1. Write Markdown in the left editor pane.
141+
2. Preview the rendered output on the right.
142+
3. Import, export, share, or switch view modes using the toolbar.
143+
4. Use the tab bar to manage multiple documents.
144+
145+
**Keyboard Shortcuts**
146+
- `Ctrl/Cmd + S` → Export Markdown
147+
- `Ctrl/Cmd + C` → Copy rendered HTML (when no text is selected)
148+
- `Ctrl/Cmd + Shift + S` → Toggle sync scrolling (split view)
149+
- `Ctrl/Cmd + T` → New tab
150+
- `Ctrl/Cmd + W` → Close tab
151+
- `Tab` → Insert indentation in editor
152+
153+
---
154+
155+
## Documentation
156+
157+
Explore the full documentation on the wiki:
158+
159+
- [Features](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/Features)
160+
- [Usage Guide](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/Usage-Guide)
161+
- [Installation](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/Installation)
162+
- [Markdown Reference](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/Markdown-Reference)
163+
- [FAQ](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/FAQ)
164+
- [Configuration](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/Configuration)
165+
166+
---
167+
168+
## Built With
169+
170+
- HTML5, CSS3, JavaScript
171+
- [Bootstrap](https://getbootstrap.com/)
172+
- [Marked.js](https://marked.js.org/)
173+
- [highlight.js](https://highlightjs.org/)
174+
- [MathJax](https://www.mathjax.org/)
175+
- [Mermaid](https://mermaid.js.org/)
176+
- [DOMPurify](https://github.com/cure53/DOMPurify)
177+
- [FileSaver.js](https://github.com/eligrey/FileSaver.js)
178+
- [html2canvas](https://github.com/niklasvh/html2canvas) + [jsPDF](https://www.npmjs.com/package/jspdf)
179+
- [JoyPixels](https://www.joypixels.com/)
180+
181+
---
182+
183+
## Showcase
184+
185+
**Built with Markdown Viewer**
121186

122187
| Project | Description |
123188
|---------|-------------|
124-
| [Markdown Desk](https://github.com/jhrepo/markdown-desk) | A native macOS desktop wrapper built with [Tauri](https://tauri.app/), adding live reload and native file open/save (`Cmd+O`/`Cmd+S`). Tracks upstream via Git submodule. |
189+
| [Markdown Desk](https://github.com/jhrepo/markdown-desk) | Native macOS wrapper built with [Tauri](https://tauri.app/), adding live reload and native file open/save. |
190+
191+
---
125192

126-
## 📄 License
193+
## Contributing
127194

128-
This project is licensed under the Apache License - see the [LICENSE](LICENSE) file for details.
195+
Contributions are welcome! Please review the [Contributing Guide](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/Contributing) and open a pull request.
129196

130-
## 📈 Development Journey
197+
---
198+
199+
## Contributors
200+
201+
Thanks to everyone who has contributed to Markdown Viewer.
131202

132-
The Markdown Viewer has undergone significant evolution since its inception. What started as a simple markdown parser has grown into a full-featured, professional application with multiple advanced capabilities. By comparing the [current version](https://markdownviewer.pages.dev/) with the [original version](https://a1b91221.markdownviewer.pages.dev/), you can see the remarkable progress in UI design, performance optimization, and feature implementation.
203+
[![Contributors](https://contrib.rocks/image?repo=ThisIs-Developer/Markdown-Viewer)](https://github.com/ThisIs-Developer/Markdown-Viewer/graphs/contributors)
133204

134205
---
135206

136-
<div align="center">
137-
<p>Developed with ❤️ by <a href="https://github.com/ThisIs-Developer">ThisIs-Developer</a></p>
138-
</div>
207+
## License
208+
209+
This project is licensed under the Apache License. See [LICENSE](LICENSE) for details.
210+
211+
---
212+
213+
## Contact
214+
215+
Developed and maintained by [ThisIs-Developer](https://github.com/ThisIs-Developer).

0 commit comments

Comments
 (0)