Skip to content

Commit c10e63d

Browse files
ThisIs-DeveloperThisIs-Developer
authored
Merge pull request #73 from ThisIs-Developer/copilot/update-readme-professionalism
Refresh README to professional template with full feature coverage
2 parents 620cdc0 + 4d5a0a3 commit c10e63d

12 files changed

Lines changed: 356 additions & 113 deletions

‎README.md‎

Lines changed: 189 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,95 @@
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+
- [Development Journey](#development-journey)
39+
- [License](#license)
40+
- [Contact](#contact)
41+
42+
---
1543

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.
44+
## About the Project
1745

18-
## ✨ Features
46+
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.
1947

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
48+
---
3549

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

3894
### Code Syntax Highlighting
3995
![Code Syntax Highlighting](assets/code.png)
@@ -47,92 +103,120 @@ Markdown Viewer is a professional, full-featured Markdown editor and preview app
47103
### Tables Support
48104
![Tables Support](assets/table.png)
49105

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
106+
---
107+
108+
## Getting Started
109+
110+
### Option 1 — Docker (Recommended)
111+
```bash
112+
docker run -d \
113+
--name markdown-viewer \
114+
-p 8080:80 \
115+
--restart unless-stopped \
116+
ghcr.io/thisis-developer/markdown-viewer:latest
117+
```
118+
Open **http://localhost:8080**.
119+
120+
### Option 2 — Docker Compose
121+
```bash
122+
git clone https://github.com/ThisIs-Developer/Markdown-Viewer.git
123+
cd Markdown-Viewer
124+
docker compose up -d
125+
```
126+
127+
### Option 3 — Static Web Server
128+
```bash
129+
git clone https://github.com/ThisIs-Developer/Markdown-Viewer.git
130+
cd Markdown-Viewer
131+
python3 -m http.server 8080
132+
```
133+
134+
### Option 4 — Desktop App
135+
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).
136+
137+
---
138+
139+
## Usage
140+
141+
1. Write Markdown in the left editor pane.
142+
2. Preview the rendered output on the right.
143+
3. Import, export, share, or switch view modes using the toolbar.
144+
4. Use the tab bar to manage multiple documents.
145+
146+
**Keyboard Shortcuts**
147+
- `Ctrl/Cmd + S` → Export Markdown
148+
- `Ctrl/Cmd + C` → Copy rendered HTML (when no text is selected)
149+
- `Ctrl/Cmd + Shift + S` → Toggle sync scrolling (split view)
150+
- `Ctrl/Cmd + T` → New tab
151+
- `Ctrl/Cmd + W` → Close tab
152+
- `Tab` → Insert indentation in editor
153+
154+
---
155+
156+
## Documentation
157+
158+
Explore the full documentation on the wiki:
159+
160+
- [Features](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/Features)
161+
- [Usage Guide](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/Usage-Guide)
162+
- [Installation](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/Installation)
163+
- [Markdown Reference](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/Markdown-Reference)
164+
- [FAQ](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/FAQ)
165+
- [Configuration](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/Configuration)
166+
167+
---
168+
169+
## Built With
170+
171+
- HTML5, CSS3, JavaScript
172+
- [Bootstrap](https://getbootstrap.com/)
173+
- [Marked.js](https://marked.js.org/)
174+
- [highlight.js](https://highlightjs.org/)
175+
- [MathJax](https://www.mathjax.org/)
176+
- [Mermaid](https://mermaid.js.org/)
177+
- [DOMPurify](https://github.com/cure53/DOMPurify)
178+
- [FileSaver.js](https://github.com/eligrey/FileSaver.js)
179+
- [html2canvas](https://github.com/niklasvh/html2canvas) + [jsPDF](https://www.npmjs.com/package/jspdf)
180+
- [JoyPixels](https://www.joypixels.com/)
181+
182+
---
183+
184+
## Showcase
185+
186+
**Built with Markdown Viewer**
121187

122188
| Project | Description |
123189
|---------|-------------|
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. |
190+
| [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. |
191+
192+
---
193+
194+
## Contributing
195+
196+
Contributions are welcome! Please review the [Contributing Guide](https://github.com/ThisIs-Developer/Markdown-Viewer/wiki/Contributing) and open a pull request.
197+
198+
---
199+
200+
## Contributors
201+
202+
Thanks to everyone who has contributed to Markdown Viewer.
125203

126-
## 📄 License
204+
[![Contributors](https://contrib.rocks/image?repo=ThisIs-Developer/Markdown-Viewer)](https://github.com/ThisIs-Developer/Markdown-Viewer/graphs/contributors)
127205

128-
This project is licensed under the Apache License - see the [LICENSE](LICENSE) file for details.
206+
---
129207

130208
## 📈 Development Journey
131209

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.
210+
Markdown Viewer has grown from a lightweight Markdown parser into a full-featured, professional application with advanced rendering, workflow, and export capabilities. Compare the [current version](https://markdownviewer.pages.dev/) with the [original version](https://a1b91221.markdownviewer.pages.dev/) to see the progress in UI design, performance optimization, and feature depth.
133211

134212
---
135213

136-
<div align="center">
137-
<p>Developed with ❤️ by <a href="https://github.com/ThisIs-Developer">ThisIs-Developer</a></p>
138-
</div>
214+
## License
215+
216+
This project is licensed under the Apache License. See [LICENSE](LICENSE) for details.
217+
218+
---
219+
220+
## Contact
221+
222+
Developed and maintained by [ThisIs-Developer](https://github.com/ThisIs-Developer).

‎wiki/Configuration.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ This page documents all configuration files and customizable settings in **Markd
1212
- [Desktop App — neutralino.config.json](#desktop-app--neutralinoconfigjson)
1313
- [Desktop App — package.json Scripts](#desktop-app--packagejson-scripts)
1414
- [GitHub Actions Workflows](#github-actions-workflows)
15+
- [Transparency & Data Flow](#transparency--data-flow)
1516

1617
---
1718

@@ -41,6 +42,19 @@ Current library versions are documented in the [Home](Home) page technology tabl
4142

4243
---
4344

45+
## Transparency & Data Flow
46+
47+
Markdown Viewer is a static client-side app. Key data flows to be aware of:
48+
49+
- **Local storage**: Editor content and preferences are stored in `localStorage`.
50+
- **CDN assets**: Libraries are loaded from public CDNs (cdnjs, jsDelivr).
51+
- **GitHub import**: Public file imports use `api.github.com` and `raw.githubusercontent.com`.
52+
- **Share links**: Shared documents are encoded into the URL hash and never uploaded.
53+
54+
To eliminate external network requests, replace CDN links in `index.html` with locally hosted files and rebuild the desktop resources with `node prepare.js`.
55+
56+
---
57+
4458
## Docker / Nginx
4559

4660
The `Dockerfile` builds a production image using `nginx:alpine`. The embedded Nginx configuration can be customized by modifying the `Dockerfile` before building.

‎wiki/Contributing.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ Thank you for your interest in contributing to **Markdown Viewer**! All contribu
88

99
- [Code of Conduct](#code-of-conduct)
1010
- [Reporting Bugs](#reporting-bugs)
11+
- [Security Reporting](#security-reporting)
1112
- [Suggesting Features](#suggesting-features)
1213
- [Development Setup](#development-setup)
1314
- [Making Changes](#making-changes)
@@ -37,6 +38,16 @@ By participating in this project, you agree to maintain a respectful and inclusi
3738

3839
---
3940

41+
## Security Reporting
42+
43+
If you discover a security issue, please report it responsibly:
44+
45+
1. Avoid posting sensitive details in public issues.
46+
2. If GitHub Security Advisories are enabled for the repo, open a private advisory.
47+
3. Otherwise, contact the maintainer via GitHub and provide a clear, minimal reproduction.
48+
49+
---
50+
4051
## Suggesting Features
4152

4253
1. **Check existing issues and discussions** to avoid duplicates.

0 commit comments

Comments
 (0)