Markdown Previewer

Overview

This is a simple, responsive Markdown Previewer that allows users to write and preview Markdown in real-time. The application provides a side-by-side editor and preview interface with syntax highlighting for code blocks and support for various Markdown elements.

Features

• Real-time Markdown rendering
• Syntax highlighting for code blocks
• Responsive design (works on desktop and mobile)
• Support for:
  • Headings
  • Bold and italic text
  • Code blocks and inline code
  • Lists (ordered and unordered)
  • Links
  • Images
  • Blockquotes
  • Horizontal rules

Technologies Used

• HTML5
• CSS3
• JavaScript
• Marked.js - Markdown parsing
• Highlight.js - Code syntax highlighting

Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/markdown-previewer.git
   

2. Navigate to the project directory:

   cd markdown-previewer
   

3. Open index.html in your web browser

Usage

1. Write your Markdown in the left panel
2. See the rendered output in real-time on the right panel
3. Use the "Clear" button to reset the editor
4. Click "Load Sample" to see an example of Markdown capabilities

Buttons

• Clear: Removes all text from the editor and preview
• Load Sample: Populates the editor with a sample Markdown document to demonstrate features

Customization

You can easily customize the styling by modifying the styles.css file. The CSS uses a responsive design with media queries to ensure a good experience on different device sizes.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source. Please check the LICENSE file for details.

Acknowledgments

• Marked.js for Markdown parsing
• Highlight.js for code syntax highlighting

Screenshots

![Markdown Previewer Screenshot]

Note: Replace the placeholder screenshot with an actual screenshot of your application