Markdown Reader (Tauri + React)

A high-performance, view-only desktop Markdown reader built with Tauri v2, React 18, TypeScript, and Vite. Features a VS Code-like project explorer sidebar, an Antigravity-style Markdown preview engine with LaTeX math support, syntax highlighting, callout alert banners, and live Mermaid diagrams.

---

Features

📁 VS Code-Style Project Explorer

• Collapsible File Tree: Explore project directories with folder and file type icons.
• Real-Time Search Filter: Search files by name directly within the sidebar.
• Resizable Sidebar: Drag handle for customizable sidebar width.
• View-Only File Selection: Click any markdown file to load and read instantly.

📐 Antigravity Markdown Preview (Strictly View-Only)

• Multi-Format LaTeX Math: Full support for KaTeX rendering:
  • Display / Block Math: $$...$$ and \[...\]
  • Inline Math: $math$ and \(math\)
  • Code Block Safety: Math delimiters inside inline or block code snippets are left untouched.
• Syntax Highlighting & Code Copying: Theme-aware syntax highlighting with language badges and 1-click code copying.
• Antigravity Callout Alerts: GitHub callout banners:
  • > [!NOTE] (Blue info banner)
  • > [!TIP] (Green tip banner)
  • > [!IMPORTANT] (Purple important banner)
  • > [!WARNING] (Amber warning banner)
  • > [!CAUTION] (Red caution banner)
• Mermaid SVG Diagrams: Live rendering of ````mermaid` code blocks into SVG diagrams.

🧭 Navigation & Visual Controls

• Document Outline (TOC): Right-side panel parsing #, ##, ### headings to jump directly to sections.
• In-Doc Search (Ctrl+F): Floating search box with match highlighting and next/prev controls.
• Right-Aligned Viewer Scrollbar: Full-width viewer container positioning the scrollbar at the screen edge while centering content.
• Theme & Zoom Controls: Dark / Light mode toggle and font size zoom in/out.
• Antigravity Home Screen: Welcome screen with action cards to open single files or project folders.

---

Tech Stack

• Core Desktop Backend: Tauri v2 (Rust)
• Frontend Framework: React 18 + TypeScript
• Build Tool: Vite
• Markdown Processing: react-markdown, remark-gfm, remark-math, rehype-katex, rehype-highlight
• Math Engine: KaTeX
• Diagrams: Mermaid.js
• Icons: Lucide React

---

Keyboard Shortcuts

Shortcut	Action
Ctrl + B	Toggle Project Explorer Sidebar
Ctrl + F	Open In-Document Search
Ctrl + O	Open Markdown File Dialog
Esc	Close In-Document Search Bar

---

Project Structure

├── src/
│   ├── components/
│   │   ├── HomePage.tsx          # Antigravity Welcome Home screen
│   │   ├── ProjectExplorer.tsx   # VS Code-style file tree sidebar
│   │   ├── MarkdownViewer.tsx    # Antigravity markdown renderer (LaTeX, Alerts, Code)
│   │   ├── TableOfContents.tsx   # Document outline navigation panel
│   │   ├── InDocSearch.tsx       # Floating Ctrl+F search bar
│   │   ├── Toolbar.tsx           # Top header navigation bar
│   │   └── Mermaid.tsx           # SVG diagram renderer
│   ├── types/                    # TypeScript type definitions
│   ├── index.css                 # Global CSS, themes, alert callouts
│   ├── App.tsx                   # App layout & state management
│   └── main.tsx                  # React entry point
└── src-tauri/
    ├── src/
    │   └── main.rs               # Rust backend IPC commands & tree scanner
    ├── icons/                    # Desktop app icons (.ico, .png, .icns, .svg)
    └── tauri.conf.json           # Tauri desktop app configuration

---

Getting Started

Prerequisites

1. Node.js: v18+ (Download Node.js)
2. Rust: Cargo & Rustc 1.70+ (Install Rust)

Installation

1. Clone the repository and install npm dependencies:

   npm install

2. Run the application in desktop development mode:

   npm run tauri dev

3. Package a production standalone executable:

   npm run tauri build

   The installer (.msi / -setup.exe) will be generated in C:\Users\<user>\.cargo-target\tauri-md-reader\release\bundle\.

---

License

MIT