https://github.com/sohumcs/markdown-previewer
I crafted a Markdown Previewer using React, HTML, CSS, and JavaScript. It enables users to write and instantly preview Markdown content with live updates. Features include syntax highlighting for code snippets using Prism.js. The app is easily deployable on GitHub Pages for accessible usage.
https://github.com/sohumcs/markdown-previewer
css html javascript marked prism reactjs
Last synced: 3 months ago
JSON representation
I crafted a Markdown Previewer using React, HTML, CSS, and JavaScript. It enables users to write and instantly preview Markdown content with live updates. Features include syntax highlighting for code snippets using Prism.js. The app is easily deployable on GitHub Pages for accessible usage.
- Host: GitHub
- URL: https://github.com/sohumcs/markdown-previewer
- Owner: sohumcs
- Created: 2024-01-29T05:45:53.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-29T06:20:10.000Z (over 2 years ago)
- Last Synced: 2024-12-30T19:36:47.346Z (over 1 year ago)
- Topics: css, html, javascript, marked, prism, reactjs
- Language: JavaScript
- Homepage: https://sohumcs.github.io/markdown-previewer/
- Size: 421 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Markdown Previewer Description
I created a vibrant Markdown Previewer using React, HTML, CSS, JavaScript, marked, and Prism.js. Empowering users to effortlessly write and preview Markdown content with real-time updates.
## Technologies Used
- **React:** Crafted the UI with this powerful JavaScript library.
- **HTML and CSS:** Utilized standard web technologies for elegant layout and styling.
- **JavaScript:** Implemented dynamic behavior and interactivity.
- **marked:** Transformed plain text into formatted HTML for live preview.
- **Prism.js:** Enhanced code snippets with a lightweight syntax highlighter.
## Components
- **Editor Component:** Users input Markdown content here, triggering real-time updates.
- **Previewer Component:** Dynamically renders parsed HTML, updating as users type.
## Markdown Parsing and Rendering
Relied on the marked library to convert Markdown to HTML, ensuring seamless parsing and rendering.
## Code Syntax Highlighting
Integrated Prism.js for captivating syntax highlighting, elevating code readability.
## Styling
Applied custom CSS for an appealing user interface, focusing on layout, typography, and additional design elements.
## Features
- **Live Preview:** Experience real-time rendering for immediate feedback.
- **Code Syntax Highlighting:** Prism.js ensures enhanced readability of code snippets.
- **External Links:** Open in a new tab for a seamless browsing experience.
## Deployment
Easily deployable to GitHub Pages, providing public access to the Markdown Previewer.
In summary, my Markdown Previewer offers a dynamic and visually appealing platform for writing, previewing, and formatting Markdown content, featuring Prism.js for code syntax highlighting.