Custom Markdown Parser & Editor

A powerful, custom-built Markdown parser and editor built with Next.js 16. This project demonstrates a fully custom Abstract Syntax Tree (AST) parser implementation, moving away from standard libraries like unified or remark to showcase deep understanding of parsing logic.

🚀 Features

1. Custom AST Parser

• Zero-Dependency Parsing: Implemented a custom lexer and parser from scratch in lib/parser.ts.
• AST Visualization: View the raw JSON structure of the parsed Abstract Syntax Tree in real-time.
• Supported Syntax:
  • Headings (H1-H6)
  • Paragraphs
  • Bold (**text**) & Italic (*text*)
  • Strikethrough (~~text~~)
  • Unordered Lists
  • Links ([text](url))
  • Inline Code (`code`)
  • Fenced Code Blocks (```)
  • Images (![alt](src))
  • Task Lists
  • Blockquotes
  • Horizontal Rules

2. Advanced Editor UI

• Split View: Resizable split-pane layout for simultaneous editing and previewing.
• Sync Scrolling: Intelligent bidirectional scroll synchronization between the editor and preview panes.
• Syntax Highlighting: Beautiful syntax highlighting for code blocks in the preview.
• Copy to Clipboard: One-click copy functionality for code blocks.

3. PDF Export

• Download as PDF: Instantly generate and download a high-quality PDF of your rendered markdown using html2canvas and jspdf.

🛠️ Technologies Used

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components:
  • react-resizable-panels for the split layout.
  • Custom components for buttons and textareas.
• Fonts:
  • Geist Sans for UI text.
  • IBM Plex Mono for code and editor.
• PDF Generation: html2canvas & jspdf.
• Icons: lucide-react.

📂 Project Structure

├── app/
│   ├── page.tsx        # Main editor interface & state management
│   ├── layout.tsx      # Root layout & font configuration
│   └── globals.css     # Global styles & Tailwind setup
├── lib/
│   ├── parser.ts       # Custom Markdown -> AST parser logic
│   ├── renderer.tsx    # AST -> React Component renderer
│   └── types.ts        # TypeScript definitions for AST nodes
├── components/
│   ├── code-block.tsx  # Custom code block component with copy feature
│   └── ui/             # Reusable UI components (Button, Textarea, etc.)

⚡ Getting Started

1. Clone the repository

   git clone https://github.com/dainwi/markdown-parser.git
   cd markdown-parser

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open the app Visit http://localhost:3000 to start writing markdown!

📝 How it Works

1. Parsing: The parseMarkdown function scans the input string line-by-line and character-by-character to build a tree of nodes (AST).
2. Rendering: The renderAST function traverses this tree and converts each node into the appropriate React component.
3. Syncing: Scroll positions are calculated as percentages to keep both views aligned regardless of their content height.