🚀 Welcome to Markdown Editor

This is a real-time Markdown Editor & Previewer built with Next.js and Tailwind CSS.

🌟 Key Features

Split-screen live preview for instant feedback.
Full support for GitHub Flavored Markdown (GFM).
Support for Mermaid Diagrams rendering.
Interactive GFM Callouts / Alerts support.
Import local files (.md, .markdown, .txt) with drag & drop support.

ℹ️ Note

Useful information that users should know, even when skimming content.

💡 Tip

Helpful advice for doing things better or more efficiently.

⚠️ Warning

Urgent info that needs immediate user attention to avoid problems.

📐 Mermaid Diagram Example

sequenceDiagram
    participant U as User Browser
    participant SP as Service Provider
    participant IdP as Identity Provider

    U->>SP: 1. Access System
    SP-->>U: 2. Redirect to IdP
    U->>IdP: 3. Open Login Page
    IdP-->>U: 4. Display Form
    U->>IdP: 5. Submit Credentials
    IdP->>IdP: 6. Verify Credentials & Session
    IdP-->>U: 7. Redirect back with Token
    U->>SP: 8. Access with Token
    SP->>IdP: 9. Validate Token
    IdP-->>SP: 10. User Information
    SP-->>U: 11. Login Success

💻 Code Block Example

function greet(name: string): string {
  return `Hello, ${name}! Welcome to Portal.`;
}

console.log(greet("Developer"));

📊 Table Example

Feature	Status	Performance
Markdown Parser	✅ Active	Instant
Live Preview	✅ Active	0ms
Mermaid Diagrams	✅ Active	Fast
GFM Callouts	✅ Active	Fast

📝 Task List

Create Markdown Editor UI
Add side-by-side live preview
Support Mermaid diagrams
Support GFM callout alerts
Support local file import & drag-and-drop