Skip to content

Commit d47f0ff

Browse files
committed
feat: implement initial React markdown previewer application with comprehensive styling.
0 parents  commit d47f0ff

17 files changed

Lines changed: 22434 additions & 0 deletions

.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
GENERATE_SOURCEMAP=false

.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

README.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Markdown Previewer
2+
3+
A simple and efficient React-based web application that allows users to write Markdown text and see the rendered HTML preview in real-time.
4+
5+
## Features
6+
7+
- **Live Preview**: See changes instantly as you type.
8+
- **GitHub Flavored Markdown**: Supports standard GFM syntax including tables, task lists, and code blocks.
9+
- **Responsive Design**: Works on desktop and mobile browsers.
10+
- **Syntax Highlighting**: Built-in support for code snippets.
11+
12+
## Screenshots
13+
14+
![Main Interface](public\screens\home_screen.png)
15+
![Editor View & Rendered Output](public\screens\print_screen.png)
16+
17+
## Getting Started
18+
19+
### Prerequisites
20+
21+
- Node.js (v14 or higher)
22+
- npm or yarn
23+
24+
### Installation
25+
26+
1. Clone the repository:
27+
```bash
28+
git clone https://github.com/your-username/markdown-preview.git
29+
```
30+
31+
2. Navigate to the project directory:
32+
```bash
33+
cd markdown-preview
34+
```
35+
36+
3. Install dependencies:
37+
```bash
38+
npm install
39+
```
40+
41+
4. Start the development server:
42+
```bash
43+
npm start
44+
```
45+
46+
The application will be available at `http://localhost:3000`.
47+
48+
## Technologies Used
49+
50+
- **React**: Frontend library for building the user interface.
51+
- **Marked**: A low-level markdown compiler for parsing markdown.
52+
- **DOMPurify**: To sanitize the HTML output and prevent XSS attacks.
53+
- **CSS3**: For custom styling and layout.
54+
55+
## Project Structure
56+
57+
```text
58+
markdown-preview/
59+
├── public/
60+
│ └── screens/ # Application screenshots
61+
├── src/
62+
│ ├── components/ # React components
63+
│ ├── App.js # Main application logic
64+
│ └── index.js # Entry point
65+
└── README.md
66+
```

0 commit comments

Comments
 (0)