https://github.com/jili0/markdown-previewer
A live markdown previewer that instantly shows your markdown syntax in real-time. Built with React and powered by `marked.js` for markdown parsing.
https://github.com/jili0/markdown-previewer
markedjs sass
Last synced: 6 months ago
JSON representation
A live markdown previewer that instantly shows your markdown syntax in real-time. Built with React and powered by `marked.js` for markdown parsing.
- Host: GitHub
- URL: https://github.com/jili0/markdown-previewer
- Owner: jili0
- Created: 2025-02-22T21:23:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-02T10:26:22.000Z (over 1 year ago)
- Last Synced: 2025-04-02T11:29:19.837Z (over 1 year ago)
- Topics: markedjs, sass
- Language: JavaScript
- Homepage: https://markdown-previewer-a9ax.onrender.com/
- Size: 5.01 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 Markdown Previewer
An interactive Markdown editor and previewer, developed with React and SASS. This tool allows users to write Markdown syntax in real-time and see the rendered preview.
## Features
- **Live Preview**: Instant rendering of Markdown text
- **Syntax Highlighting**: Code blocks are highlighted with `highlight.js`
- **Responsive Design**: Works on all screen sizes
- **Sanitized Output**: Security through `DOMPurify`
- **Line Breaks**: Correct interpretation of multiple line breaks
## Technologies
- **Frontend Framework**: React 17
- **Styling**: SASS (with nested syntax)
- **Markdown Conversion**: Marked
- **Code Highlighting**: highlight.js
- **Security**: DOMPurify
- **Build Tool**: Vite
## Technical Challenges
The biggest challenge in this project was handling multiple line breaks in the textarea that needed to be correctly displayed as line breaks in the previewer. This was solved through a special regex replacement:
```javascript
marked(markdown.replace(/\n(?=\n)/g, "\n
\n"))
```
This solution enables the Markdown previewer to interpret line breaks and render them as `
` elements, which provides an improved user experience.
## Preview
Main view of the Markdown Previewer
Text Styling, Lists and Tables
Responsive Design for various screen sizes
## Project Structure
```
markdown-previewer/
├── src/
│ ├── components/
│ │ ├── Editor.jsx # Textarea component for Markdown input
│ │ └── Previewer.jsx # Preview component with Marked integration
│ ├── App.jsx # Main component
│ ├── App.scss # Main styling file
│ ├── AppContextProvider.jsx # Context for state management
│ ├── _index.scss # Base styling
│ └── main.jsx # Application entry point
├── public/
└── ...configuration files
```
Try it out - It's fun!