The Markdown Previewer allows users to write and preview GitHub-flavored markdown in real-time.
- Markdown Input: Write markdown syntax in a textarea.
- Live Preview: See a real-time preview of the rendered markdown.
- GitHub-Flavored Markdown: Supports standard markdown syntax with features like headings, inline code, code blocks, links, lists, blockquotes, images, and bold text.
- Responsive Design: Works well on both desktop and mobile devices.
- React: For building the user interface.
- Marked.js: For parsing markdown and converting it to HTML.
- Bootstrap: For layout and styling.
- Node.js: Install from Node.js.
- npm or yarn: Comes with Node.js or can be installed separately.
-
Clone the repository:
git clone https://github.com/abelgideon/Markdown-Previewer.git
-
Navigate to the project directory:
cd markdown-previewer -
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open http://localhost:3000 in your browser to view the app.
-
Local Usage:
- Enter markdown syntax in the "Editor" textarea.
- View the rendered output in the "Preview" section below the editor.
-
GitHub Pages Deployment:
Alternatively, you can access the live site here.
App.js: The main React component containing the app logic.index.js: Entry point for rendering the React app.styles.css: Styling for the application.
The app uses Marked.js to convert markdown input into HTML in real-time. Users can instantly see how their markdown will be rendered.
The app includes a clean and intuitive UI with:
- A large textarea for entering markdown.
- A preview area that dynamically updates as markdown is typed.
Built with Bootstrap, the app ensures a smooth experience on devices of all sizes.
Contributions are welcome! Fork the repository and submit a Pull Request with your improvements.