Markdown-Previewer

KO | EN

gitlite — search

#javascript #python #react #llm #golang #android #rust #deep-learning #linux #docker #java #windows #kubernetes #awesome-list

Markdown-Previewer

(★ 11)

A beautiful, real-time markdown previewer built with React, TypeScript, and Tailwind CSS. Features GitHub Flavored Markdown support, responsive design, and maximize/minimize panels

Markdown-Previewer 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Markdown Previewer

A beautiful, real-time markdown previewer built with React, TypeScript, and Tailwind CSS.

![Markdown Previewer Screenshot](https://raw.githubusercontent.com/Ayokanmi-Adejola/Markdown-Previewer/main/public/preview.png)

## 🚀 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 `<br>` 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**

Markdown-Previewer

Markdown-Previewer 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Markdown-Previewer

Markdown-Previewer 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README