# 🌈 **Guia de Cores - OxenteScript**

Este guia mostra como configurar **syntax highlighting colorido** para OxenteScript em diferentes editores e ambientes!

## 🎨 **Esquema de Cores**

### **Cores dos Tokens:**
- 🔴 **Tokens Baianos** (vermelho): `bora`, `massa`, `falaai`, `seliga`, `senao`, `laele`, `oxe`, `volta`
- 🟢 **Tokens Brasileiros** (verde): `botaAí`, `fazAí`, `seLiga`, `oxente`, `tomaEssa`, etc.
- 🟡 **Strings** (amarelo): `"texto"`, `'texto'`
- 🟣 **Números** (roxo): `123`, `3.14`, `0xFF`
- ⚫ **Comentários** (cinza): `// comentário`, `/* bloco */`
- 🔵 **Operadores** (azul): `somaLogo`, `tiraAí`, `multiplica`, `parteMeio`

---

## 🖥️ **1. VS Code (Recomendado)**

### **Instalação Automática:**
1. Copie a pasta `oxentescript-vscode/` para:
   - **Windows**: `%USERPROFILE%\.vscode\extensions\`
   - **macOS**: `~/.vscode/extensions/`
   - **Linux**: `~/.vscode/extensions/`

2. Reinicie o VS Code
3. Abra qualquer arquivo `.oxe`
4. As cores aparecerão automaticamente!

### **Ativação do Tema:**
- **Ctrl/Cmd + Shift + P** → "Preferences: Color Theme"
- Selecione **"OxenteScript Baiano"**

### **Exemplo no VS Code:**
```oxentescript
// Arquivo: exemplo.oxe
bora calculadora() {
    massa a = 15;
    botaAí b = 8;
    
    falaai("Resultado:", a somaLogo b);
    seLiga (a > b) {
        falaai("A é maior!");
    } oxente {
        falaai("B é maior ou igual!");
    }
}
```

---

## 🌐 **2. Editor Web (Online)**

### **Uso Direto:**
1. Abra o arquivo `oxentescript-web.html` no navegador
2. **Syntax highlighting em tempo real!**
3. Digite e veja as cores instantaneamente

### **Hospedagem Online:**
```bash
# Servir localmente
python3 -m http.server 8000
# Acesse: http://localhost:8000/oxentescript-web.html

# Ou hospedar no GitHub Pages, Netlify, Vercel, etc.
```

---

## 💻 **3. Terminal/CLI (Colorido)**

### **Instalação:**
```bash
npm install -g oxentescript
```

### **Comandos com Cores:**
```bash
# Ver tokens coloridos
oxente tokens

# Exemplos com syntax highlighting
oxente exemplos

# Executar arquivo com código colorido
oxente run meu-programa.oxe
```

### **Exemplo de Saída Colorida:**
```
🌴 TOKENS OXENTESCRIPT COM CORES
=====================================

🇧🇷 TOKENS BAIANOS (ORIGINAIS):
• bora = function (declarar função)    # <- Vermelho
• massa = let (declarar variável)      # <- Vermelho
• falaai = console.log (imprimir)      # <- Vermelho

🇧🇷 TOKENS BRASILEIROS (NOVOS):
• botaAí/botaAi = let (variável)       # <- Verde
• fazAí/fazAi = function (função)      # <- Verde
• seLiga = if (se)                     # <- Verde
```

---

## 🏗️ **4. Outros Editores**

### **Sublime Text:**
1. **Tools** → **Developer** → **New Syntax**
2. Cole o conteúdo de `oxentescript-sublime.sublime-syntax`
3. Salve como `OxenteScript.sublime-syntax`

### **Atom (Legacy):**
1. Crie pasta `~/.atom/packages/language-oxentescript/`
2. Cole os arquivos de configuração
3. Reinicie o Atom

### **Vim/Neovim:**
```vim
" Adicione ao ~/.vimrc ou ~/.config/nvim/init.vim
autocmd BufRead,BufNewFile *.oxe set filetype=oxentescript

" Syntax highlighting personalizado
syntax keyword oxenteKeywordBaiano bora massa falaai seliga senao laele oxe volta
syntax keyword oxenteKeywordBrasileiro botaAí botaAi fazAí fazAi seLiga oxente tomaEssa

highlight oxenteKeywordBaiano ctermfg=red guifg=#ff6b6b
highlight oxenteKeywordBrasileiro ctermfg=green guifg=#4ecdc4
```

### **Emacs:**
```elisp
;; Adicione ao ~/.emacs ou ~/.emacs.d/init.el
(define-derived-mode oxentescript-mode prog-mode "OxenteScript"
  "Major mode for editing OxenteScript files."
  (setq-local comment-start "//")
  (setq-local comment-end "")
  (font-lock-add-keywords nil
    '(("\\b\\(bora\\|massa\\|falaai\\|seliga\\|senao\\|laele\\|oxe\\|volta\\)\\b" . font-lock-keyword-face)
      ("\\b\\(botaAí\\|botaAi\\|fazAí\\|fazAi\\|seLiga\\|oxente\\|tomaEssa\\)\\b" . font-lock-builtin-face))))

(add-to-list 'auto-mode-alist '("\\.oxe\\'" . oxentescript-mode))
```

---

## 🌍 **5. Editores Online**

### **CodePen/JSFiddle:**
```html
<!-- HTML -->
<div id="editor">
  <textarea id="code" placeholder="Digite seu código OxenteScript...">
bora exemplo() {
    falaai("Oxente! Olá mundo!");
}
  </textarea>
  <div id="highlighted"></div>
</div>

<script>
// JavaScript com highlighting
function highlightOxenteScript(code) {
    return code
        .replace(/\b(bora|massa|falaai|seliga|senao|laele|oxe|volta)\b/g, 
                '<span style="color: #ff6b6b; font-weight: bold;">$1</span>')
        .replace(/\b(botaAí|botaAi|fazAí|fazAi|seLiga|oxente|tomaEssa)\b/g, 
                '<span style="color: #4ecdc4; font-weight: bold;">$1</span>')
        .replace(/"([^"\\]|\\.)*"/g, 
                '<span style="color: #f39c12;">$&</span>')
        .replace(/\b\d+(\.\d+)?\b/g, 
                '<span style="color: #9b59b6;">$&</span>');
}
</script>
```

### **Replit:**
1. Crie um projeto Node.js
2. `npm install oxentescript`
3. Crie arquivos `.oxe`
4. Use `npx oxente run arquivo.oxe`

### **CodeSandbox:**
1. Template HTML/JavaScript
2. Cole o código do editor web
3. Ou use template Node.js + npm

---

## 🎯 **6. Personalização Avançada**

### **Criar Suas Próprias Cores:**

#### **CSS (Web):**
```css
.token-baiano { 
    color: #e74c3c; 
    font-weight: bold; 
    text-shadow: 0 0 2px rgba(231, 76, 60, 0.3);
}

.token-brasileiro { 
    color: #27ae60; 
    font-weight: bold;
    text-shadow: 0 0 2px rgba(39, 174, 96, 0.3);
}

.token-string { 
    color: #f39c12; 
    font-style: italic;
}
```

#### **Terminal (ANSI):**
```javascript
const colors = {
    baiano: '\x1b[91m',     // Vermelho claro
    brasileiro: '\x1b[92m', // Verde claro
    string: '\x1b[93m',     // Amarelo claro
    number: '\x1b[95m',     // Magenta claro
    reset: '\x1b[0m'
};
```

### **Esquemas de Cores Alternativos:**

#### **🌅 Tema Nordeste:**
- Baianos: `#ff8c42` (laranja)
- Brasileiros: `#6a994e` (verde)
- Strings: `#f2cc8f` (amarelo areia)
- Números: `#3d5a80` (azul mar)

#### **🌴 Tema Tropical:**
- Baianos: `#e63946` (vermelho)
- Brasileiros: `#2a9d8f` (verde água)
- Strings: `#e76f51` (coral)
- Números: `#264653` (verde escuro)

---

## 🚀 **Instalação Rápida**

```bash
# 1. CLI com cores
npm install -g oxentescript

# 2. Testar cores no terminal
oxente tokens
oxente exemplos

# 3. Usar editor web
# Baixe oxentescript-web.html e abra no navegador

# 4. VS Code
# Copie pasta oxentescript-vscode/ para ~/.vscode/extensions/
```

---

## 📱 **Compatibilidade**

| Editor/Ambiente | Cores | Status |
|----------------|-------|--------|
| VS Code | ✅ | Completo |
| Editor Web | ✅ | Completo |
| Terminal CLI | ✅ | Completo |
| Sublime Text | ✅ | Manual |
| Vim/Neovim | ✅ | Manual |
| Emacs | ✅ | Manual |
| Atom | ✅ | Manual |
| CodePen | ✅ | Web |
| JSFiddle | ✅ | Web |
| Replit | ✅ | Via CLI |
| CodeSandbox | ✅ | Web/CLI |

---

## 🎨 **Preview das Cores**

```oxentescript
// 🌈 Exemplo com todas as cores
bora exemploColorido() {
    // Cinza - comentário
    massa nome = "João";        // Verde - token baiano, Amarelo - string
    botaAí idade = 25;          // Verde - token brasileiro, Roxo - número
    
    seLiga (idade >= 18) {      // Verde - token brasileiro
        falaai("Maior de idade!"); // Vermelho - token baiano
    } oxente {                  // Verde - token brasileiro
        falaai("Menor de idade!"); // Vermelho - token baiano
    }
    
    laele (massa i = 0; i < 5; i++) {  // Vermelho - tokens baianos
        falaai("Contando:", i);
    }
    
    botaAí resultado = idade somaLogo 5;  // Azul - operador coloquial
    tomaEssa resultado;         // Verde - token brasileiro
}
```

**Agora OxenteScript tem cores lindas em todos os lugares! 🌈🌴**