https://github.com/ayokanmi-adejola/markdown-previewer
A beautiful, real-time markdown previewer built with React, TypeScript, and Tailwind CSS. Features GitHub Flavored Markdown support, responsive design, and maximize/minimize panels
https://github.com/ayokanmi-adejola/markdown-previewer
lucide-react marked-js react18 tailwind-css typescript vite
Last synced: 9 months ago
JSON representation
A beautiful, real-time markdown previewer built with React, TypeScript, and Tailwind CSS. Features GitHub Flavored Markdown support, responsive design, and maximize/minimize panels
- Host: GitHub
- URL: https://github.com/ayokanmi-adejola/markdown-previewer
- Owner: Ayokanmi-Adejola
- Created: 2025-06-21T08:21:30.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-21T09:30:27.000Z (about 1 year ago)
- Last Synced: 2025-09-30T00:00:39.034Z (10 months ago)
- Topics: lucide-react, marked-js, react18, tailwind-css, typescript, vite
- Language: TypeScript
- Homepage: https://markdown-previewer-eta-khaki.vercel.app
- Size: 524 KB
- Stars: 8
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Markdown Previewer
A beautiful, real-time markdown previewer built with React, TypeScript, and Tailwind CSS.
## 🚀 Features
- **Real-time Preview**: See your markdown rendered as HTML instantly as you type
- **GitHub Flavored Markdown**: Full support for GFM syntax including tables, strikethrough, and task lists
- **Responsive Design**: Works seamlessly on desktop, tablet, and mobile devices
- **Maximize/Minimize Panels**: Focus on editing or previewing with full-screen modes
- **Copy to Clipboard**: Easily copy your markdown content with one click
- **Beautiful UI**: Modern dark theme with smooth animations and micro-interactions
- **Line Break Support**: Carriage returns are rendered as `
` elements (bonus feature)
## 🛠️ Technologies Used
- **React 18** - Modern React with hooks
- **TypeScript** - Type-safe development
- **Tailwind CSS** - Utility-first CSS framework
- **Marked.js** - Fast markdown parser and compiler
- **Lucide React** - Beautiful, customizable icons
- **Vite** - Fast build tool and development server
## 📋 FreeCodeCamp Requirements
This project satisfies all user stories for the FreeCodeCamp Markdown Previewer challenge:
- ✅ **User Story #1**: Textarea element with `id="editor"`
- ✅ **User Story #2**: Element with `id="preview"`
- ✅ **User Story #3**: Real-time preview updates as you type
- ✅ **User Story #4**: GitHub flavored markdown rendering
- ✅ **User Story #5**: Default markdown with all required elements
- ✅ **User Story #6**: Default markdown rendered on load
- ✅ **Bonus**: Carriage returns rendered as line breaks
## 🎯 Default Markdown Elements
The editor loads with sample markdown demonstrating:
- **Headings** (H1, H2, H3)
- **Links** with hover effects
- **Inline code** with syntax highlighting
- **Code blocks** with language-specific formatting
- **Lists** (ordered and unordered with nesting)
- **Blockquotes** with custom styling
- **Images** with responsive design
- **Bold and italic** text formatting
- **Strikethrough** text
- **Tables** with alternating row colors
## 🚀 Getting Started
### Prerequisites
- Node.js (version 16 or higher)
- npm or yarn package manager
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/markdown-previewer.git
cd markdown-previewer
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open your browser and navigate to `http://localhost:5173`
### Building for Production
```bash
npm run build
```
The built files will be in the `dist` directory.
## 🎨 Design Features
### Color Scheme
- **Primary**: Slate-based dark theme
- **Accents**: Blue for editor, Green for preview
- **Syntax**: Pink for code, Yellow for headings
### Typography
- **Editor**: Monospace font for code editing
- **Preview**: Optimized prose typography with proper line spacing
### Animations
- Smooth transitions between maximize/minimize states
- Hover effects on interactive elements
- Copy button feedback animation
## 📱 Responsive Breakpoints
- **Mobile**: Single column layout (< 1024px)
- **Desktop**: Side-by-side layout (≥ 1024px)
- **Maximized**: Full-width single panel on all devices
## 🔧 Configuration
### Marked.js Options
```javascript
marked.setOptions({
breaks: true, // Enable line breaks
gfm: true, // GitHub Flavored Markdown
});
```
### Tailwind CSS
Custom prose styling for enhanced markdown rendering with dark theme support.
## 📄 Project Structure
```
src/
├── App.tsx # Main application component
├── main.tsx # React entry point
├── index.css # Global styles and Tailwind imports
└── vite-env.d.ts # Vite type definitions
public/
└── vite.svg # Vite logo
config files:
├── package.json # Dependencies and scripts
├── tailwind.config.js
├── vite.config.ts
└── tsconfig.json
```
## 🧪 Testing
This project includes the FreeCodeCamp test suite. The tests automatically run when you load the application and verify all user story requirements.
## 🌟 Key Components
### State Management
- `markdown`: Current markdown content
- `isEditorMaximized`: Editor panel state
- `isPreviewMaximized`: Preview panel state
- `copied`: Copy button feedback state
### Core Functions
- `handleMarkdownChange`: Updates markdown state
- `copyToClipboard`: Copies content with user feedback
- `getPreviewHTML`: Converts markdown to HTML
## 🎯 Performance Optimizations
- Efficient re-rendering with React hooks
- Optimized bundle size with Vite
- Smooth scrolling in preview panel
- Debounced markdown parsing
## 👨💻 Author
**Ayokanmi Adejola**