160 lines
3.4 KiB
Markdown
160 lines
3.4 KiB
Markdown
# 🎨 Langages supportés - Coloration syntaxique
|
|
|
|
## ✅ Langages avec coloration complète
|
|
|
|
### Web Frontend
|
|
- ✅ **HTML** (`html`, `markup`)
|
|
- ✅ **CSS** (`css`)
|
|
- ✅ **JavaScript** (`js`, `javascript`)
|
|
- ✅ **TypeScript** (`ts`, `typescript`)
|
|
- ✅ **JSX** (`jsx`) - React
|
|
- ✅ **TSX** (`tsx`) - React TypeScript
|
|
|
|
### Backend
|
|
- ✅ **Python** (`python`, `py`)
|
|
- ✅ **Java** (`java`)
|
|
- ✅ **C** (`c`)
|
|
- ✅ **C++** (`cpp`, `c++`)
|
|
- ✅ **Go** (`go`)
|
|
- ✅ **Rust** (`rust`, `rs`)
|
|
|
|
### Database & Config
|
|
- ✅ **SQL** (`sql`)
|
|
- ✅ **JSON** (`json`)
|
|
- ✅ **YAML** (`yaml`, `yml`)
|
|
- ✅ **Markdown** (`markdown`, `md`)
|
|
|
|
### Scripting
|
|
- ✅ **Bash** (`bash`, `sh`, `shell`)
|
|
|
|
## ❌ Langages NON supportés (sans coloration)
|
|
|
|
- ❌ **PHP** - Retiré car cause des crashes
|
|
- ❌ **Ruby** - Retiré pour stabilité
|
|
|
|
**Note** : Ces langages s'afficheront quand même, mais sans coloration syntaxique.
|
|
|
|
## 🧪 Tester les langages
|
|
|
|
### Python
|
|
```
|
|
Écris une fonction Python pour calculer Fibonacci
|
|
```
|
|
|
|
### JavaScript
|
|
```
|
|
Crée une fonction async/await pour fetch des données
|
|
```
|
|
|
|
### React (JSX)
|
|
```
|
|
Crée un composant React avec useState
|
|
```
|
|
|
|
### TypeScript
|
|
```
|
|
Écris une interface TypeScript pour un User
|
|
```
|
|
|
|
### SQL
|
|
```
|
|
Écris une requête SQL pour les 10 meilleurs clients
|
|
```
|
|
|
|
### JSON
|
|
```
|
|
Crée un exemple de configuration JSON pour une API
|
|
```
|
|
|
|
### HTML/CSS
|
|
```
|
|
Crée un bouton stylé en HTML et CSS
|
|
```
|
|
|
|
### Bash
|
|
```
|
|
Écris un script bash pour sauvegarder des fichiers
|
|
```
|
|
|
|
## 🎨 Couleurs par langage
|
|
|
|
Tous les langages utilisent le même schéma de couleurs :
|
|
|
|
| Type | Couleur | Exemple |
|
|
|------|---------|---------|
|
|
| Mots-clés | 🟣 Violet | `def`, `if`, `const`, `async` |
|
|
| Strings | 🟢 Vert | `"hello"`, `'world'` |
|
|
| Fonctions | 🔵 Bleu | `print()`, `fetch()` |
|
|
| Nombres | 🔴 Rouge | `42`, `3.14` |
|
|
| Commentaires | ⚪ Gris | `# comment`, `// comment` |
|
|
| Opérateurs | 🟡 Jaune | `+`, `-`, `=`, `=>` |
|
|
|
|
## 💡 Astuces
|
|
|
|
### 1. Spécifier le langage
|
|
|
|
L'IA détecte automatiquement, mais tu peux préciser :
|
|
```
|
|
Écris en JavaScript pur (pas TypeScript) une fonction...
|
|
```
|
|
|
|
### 2. Multi-langages
|
|
|
|
Pour avoir plusieurs blocs :
|
|
```
|
|
Crée une todo app avec HTML, CSS et JavaScript séparés
|
|
```
|
|
|
|
### 3. Code sans langage
|
|
|
|
Si pas de langage détecté, le code s'affiche sans coloration mais reste lisible.
|
|
|
|
## 🔧 Problèmes de coloration
|
|
|
|
### Code affiché mais pas coloré ?
|
|
|
|
**Console (F12) :**
|
|
```
|
|
⚠️ Prism.js non chargé
|
|
ou
|
|
❌ Erreur coloration bloc X: ...
|
|
```
|
|
|
|
**Solutions :**
|
|
1. Rafraîchir (Ctrl+F5)
|
|
2. Vérifier connexion internet
|
|
3. Vider cache navigateur
|
|
|
|
### Crash lors de la coloration ?
|
|
|
|
**Symptôme :** WebSocket se déconnecte après génération de code
|
|
|
|
**Dans la console :**
|
|
```
|
|
❌ Erreur Prism.highlightElement: ...
|
|
🔌 WebSocket déconnecté
|
|
```
|
|
|
|
**Solution :**
|
|
✅ **Déjà corrigé !**
|
|
- Chaque bloc est colorié individuellement
|
|
- En cas d'erreur, le bloc reste visible sans coloration
|
|
- Le crash d'un bloc n'affecte pas les autres
|
|
|
|
## 📊 Statistiques
|
|
|
|
- **16 langages** avec coloration complète
|
|
- **20+ variantes** de syntaxe (py/python, js/javascript, etc.)
|
|
- **0 crash** même si un langage pose problème
|
|
- **Fallback automatique** si Prism.js ne charge pas
|
|
|
|
## 🚀 Performances
|
|
|
|
- Coloration en ~150ms
|
|
- Pas de ralentissement même avec plusieurs blocs
|
|
- Timeout de sécurité pour éviter le gel
|
|
|
|
---
|
|
|
|
**Si tu demandes du PHP ou Ruby, le code s'affichera sans coloration mais sera parfaitement lisible !**
|