MarkdownPreview 📝

Editor Markdown com preview lado a lado em tempo real

✨ Features

• ✅ Preview lado a lado em tempo real
• ✅ Syntax highlighting no código
• ✅ GitHub Flavored Markdown (GFM) support
• ✅ Toolbar com shortcuts (bold, italic, code, etc)
• ✅ Export para HTML e PDF
• ✅ Auto-save no localStorage
• ✅ Dark mode toggle
• ✅ 100% client-side (privacidade total)
• ✅ Responsivo (mobile-friendly)

🚀 Quick Start

# Instalar dependências
npm install

# Rodar em desenvolvimento
npm run dev

# Build para produção
npm run build

# Rodar build de produção
npm start

Abra http://localhost:3000 no navegador.

🏗️ Tech Stack

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS
• react-markdown + remark-gfm
• react-syntax-highlighter
• jsPDF + html2canvas

📝 Como Usar

1. Escrever: Digite seu Markdown no editor à esquerda
2. Preview: Veja o resultado renderizado em tempo real à direita
3. Toolbar: Use os botões para inserir syntax rapidamente
4. Export: Clique em "Export" para baixar HTML ou PDF
5. Dark Mode: Toggle ☀️/🌙 para mudar o tema
6. Auto-save: Seu conteúdo é salvo automaticamente no navegador

🎯 Shortcuts da Toolbar

• B - Bold (**texto**)
• I - Italic (*texto*)
• </> - Code (`código`)
• 🔗 - Link ([texto](url))
• 🖼️ - Image (![alt](url))
• H1/H2/H3 - Headings (# ## ###)
• • - Lista (- item)
• ☑ - Checkbox (- [ ] tarefa)

📦 Estrutura do Projeto

app/
  page.tsx           # Página principal do editor
  layout.tsx         # Layout com metadata
  globals.css        # Estilos globais
components/
  Editor.tsx         # Editor textarea
  Preview.tsx        # Preview renderizado
  Toolbar.tsx        # Botões de shortcuts
  ExportMenu.tsx     # Menu de export
lib/
  markdown.ts        # Helpers para inserir markdown
  storage.ts         # LocalStorage utilities

🌐 Deploy

Vercel (Recomendado)

vercel --prod

Outros

npm run build
# Upload a pasta .next/ para seu hosting

📄 Licença

MIT

---

Desenvolvido com ❤️ usando Next.js e Tailwind CSS