🎨 Configuration avancée des styles de code

Le thème Obsidian Monokai Night propose un système de configuration avancée pour personnaliser l'expérience de codage, inspiré des fonctionnalités de VSCode.

🚀 Fonctionnalités

✨ Fonctionnalités principales

Fonctionnalité	Description	VSCode équivalent
🔤 Ligatures de police	Support des polices avec ligatures (Fira Code, JetBrains Mono)	`"editor.fontLigatures": true`
🌈 Colorisation des parenthèses	Couleurs différentes par niveau d'imbrication	`"editor.bracketPairColorization.enabled": true`
✏️ Styles syntaxiques	Italique/gras automatique selon le contexte	`"editor.tokenColorCustomizations"`
🖱️ Curseur animé	Animation personnalisable du curseur	`"editor.cursorBlinking": "expand"`
📦 Blocs de code améliorés	Numéros de ligne, boutons de copie	Extensions VSCode
⚙️ Configuration graphique	Interface web pour personnaliser les options	Settings UI VSCode

📋 Installation et utilisation

🎯 Méthode 1 : Interface de configuration (Recommandée)

Ouvrir la page de configuration :

Ouvrez demo/code-styling-demo.html dans votre navigateur

Personnaliser les options :
- Choisissez un preset ou configurez manuellement
- Visualisez les changements en temps réel
- Générez votre CSS personnalisé
Appliquer dans Obsidian :
- Copiez le CSS généré
- Créez un nouveau CSS snippet dans Obsidian
- Activez le snippet dans les paramètres

🔧 Méthode 2 : Scripts automatisés

# Générer les styles avec configuration par défaut
npm run generate-code-styling

# Configuration personnalisée
node scripts/generate-code-styling.js --preset enhanced

# Build intégré au thème principal
npm run build-with-code-styling

📝 Méthode 3 : CSS snippets prêts à l'emploi

Des snippets pré-configurés sont disponibles dans /snippets/ :

snippets/
├── minimal-code-styling.css      # Configuration minimaliste
├── enhanced-code-styling.css     # Configuration complète  
├── performance-code-styling.css  # Optimisé performances
└── custom-code-config.css        # Template personnalisable

⚙️ Options de configuration

🔤 Police et typographie

.theme-dark {
  /* Police principale */
  --font-family-code: 'Fira Code iScript', 'JetBrains Mono', monospace;
  
  /* Taille et espacement */
  --font-size-code: 16px;
  --line-height-code: 1.6;
  --letter-spacing-code: 0.02em;
  
  /* Ligatures */
  --enable-ligatures: true;
}

Polices recommandées :

Fira Code iScript - Avec variante cursive pour certains éléments
JetBrains Mono - Police moderne avec excellentes ligatures
Cascadia Code - Police Microsoft avec support complet
Source Code Pro - Classique et lisible

🌈 Colorisation des parenthèses

.theme-dark {
  /* Couleurs par niveau */
  --bracket-1: #ff6188;  /* Rose - Niveau 1 */
  --bracket-2: #ffd866;  /* Jaune - Niveau 2 */
  --bracket-3: #a9dc76;  /* Vert - Niveau 3 */
  --bracket-4: #78dce8;  /* Cyan - Niveau 4 */
  --bracket-5: #ab9df2;  /* Violet - Niveau 5 */
  --bracket-6: #fc9867;  /* Orange - Niveau 6 */
  
  /* Options visuelles */
  --bracket-opacity: 0.8;
  --bracket-hover-scale: 1.1;
}

✏️ Styles syntaxiques personnalisés

Éléments en italique :

Commentaires (// Commentaire)
Mots-clés de contrôle (import, export, from)
Types et modificateurs (class, static)
Chaînes de caractères ("string", 'string', `template`)
Noms de méthodes et tags
Constantes built-in

Éléments en gras :

Noms de classes (class MyClass)
Constructeurs
Mots-clés importants

Éléments gras et italique :

Titres Markdown (# Titre, ## Sous-titre)
Headers de sections

Exclusions (toujours normaux) :

Opérateurs (+, -, ===, &&)
Nombres (123, 45.67)
Noms de fonctions

🖱️ Animation du curseur

.theme-dark {
  --cursor-color: #fcfcfa;
  --cursor-width: 2px;
  --cursor-animation: expand; /* expand | blink | smooth */
  --cursor-duration: 1s;
}

Types d'animation :

expand - Le curseur s'élargit et rétrécit
blink - Clignotement classique on/off
smooth - Fondu en transparence

📦 Blocs de code avancés

.theme-dark {
  /* Apparence générale */
  --code-block-background: var(--background-secondary);
  --code-block-border: 1px solid var(--border-color);
  --code-block-border-radius: 8px;
  --code-block-padding: 16px;
  
  /* Fonctionnalités */
  --enable-line-numbers: false;
  --enable-copy-button: true;
  --enable-line-highlighting: true;
}

🎛️ Presets de configuration

🎯 Minimal - Configuration de base

/* Configuration minimaliste - Performance optimale */
.theme-dark {
  --enable-ligatures: false;
  --enable-bracket-colors: false;
  --enable-italic-syntax: false;
  --enable-cursor-animation: false;
  --enable-line-numbers: false;
  --enable-copy-button: false;
}

Idéal pour : Machines moins puissantes, utilisation basique

🌟 Enhanced - Configuration complète

/* Toutes les fonctionnalités activées */
.theme-dark {
  --enable-ligatures: true;
  --enable-bracket-colors: true;
  --enable-italic-syntax: true;
  --enable-cursor-animation: true;
  --enable-line-numbers: false;
  --enable-copy-button: true;
}

Idéal pour : Développement intensif, expérience complète

⚡ Performance - Équilibre optimal

/* Fonctionnalités importantes sans impact performance */
.theme-dark {
  --enable-ligatures: true;
  --enable-bracket-colors: false;
  --enable-italic-syntax: true;
  --enable-cursor-animation: false;
  --enable-line-numbers: false;
  --enable-copy-button: true;
}

Idéal pour : Usage quotidien, bon compromis

🛠️ Personnalisation avancée

🎨 Créer un preset personnalisé

Copiez le template :

/* Mon preset personnalisé */
.theme-dark.my-preset {
  --font-family-code: 'Ma Police Préférée';
  --bracket-1: #custom-color-1;
  --bracket-2: #custom-color-2;
  /* ... autres personnalisations */
}

Activez conditionnellement :

/* Activation via attribut data */
.theme-dark[data-code-preset="my-preset"] {
  /* Vos styles personnalisés */
}

Script d'activation :

// Ajoutez ceci dans un script Obsidian
document.body.setAttribute('data-code-preset', 'my-preset');

🌈 Schémas de couleurs alternatifs

Schéma "Ocean" :

.theme-dark.ocean-scheme {
  --bracket-1: #4FC3F7;  /* Bleu clair */
  --bracket-2: #29B6F6;  /* Bleu */
  --bracket-3: #039BE5;  /* Bleu foncé */
  --bracket-4: #0288D1;  /* Bleu marine */
  --bracket-5: #0277BD;  /* Bleu profond */
  --bracket-6: #01579B;  /* Bleu nuit */
}

Schéma "Forest" :

.theme-dark.forest-scheme {
  --bracket-1: #8BC34A;  /* Vert clair */
  --bracket-2: #689F38;  /* Vert */
  --bracket-3: #558B2F;  /* Vert foncé */
  --bracket-4: #33691E;  /* Vert sombre */
  --bracket-5: #1B5E20;  /* Vert forêt */
  --bracket-6: #0D4F0C;  /* Vert profond */
}

Schéma "Sunset" :

.theme-dark.sunset-scheme {
  --bracket-1: #FF7043;  /* Orange */
  --bracket-2: #FF5722;  /* Rouge-orange */
  --bracket-3: #E64A19;  /* Rouge */
  --bracket-4: #D84315;  /* Rouge foncé */
  --bracket-5: #BF360C;  /* Rouge brique */
  --bracket-6: #8D2F0C;  /* Marron */
}

🔧 Configuration par langage

/* Styles spécifiques par langage */

/* JavaScript/TypeScript */
.language-javascript, .language-typescript {
  --code-keyword-color: #ff6188;
  --code-function-color: #a9dc76;
  --code-string-color: #ffd866;
}

/* Python */
.language-python {
  --code-decorator-color: #ab9df2;
  --code-f-string-color: #78dce8;
}

/* CSS */
.language-css {
  --code-property-color: #78dce8;
  --code-value-color: #ffd866;
  --code-selector-color: #ff6188;
}

/* Markdown */
.language-markdown {
  --code-header-color: #ff6188;
  --code-emphasis-color: #ffd866;
  --code-link-color: #78dce8;
}

📱 Optimisation mobile

📏 Ajustements pour petits écrans

/* Optimisations mobile */
@media (max-width: 768px) {
  .theme-dark {
    --font-size-code: 14px;
    --line-height-code: 1.5;
    --code-block-padding: 12px;
    
    /* Désactiver certaines animations sur mobile */
    --enable-cursor-animation: false;
    --bracket-hover-scale: 1;
  }
  
  /* Ajuster les boutons de copie */
  .code-sample::after {
    font-size: 18px;
    padding: 6px 10px;
  }
}

🖱️ Support tactile amélioré

/* Interactions tactiles */
@media (hover: none) and (pointer: coarse) {
  .code-sample::after {
    opacity: 1; /* Toujours visible sur tactile */
  }
  
  .cm-bracket:hover {
    transform: none; /* Pas d'effet hover sur tactile */
  }
}

🚀 Intégration dans votre workflow

📝 Utilisation avec des plugins Obsidian

Avec Dataview :

/* Styles pour les requêtes Dataview */
.block-language-dataview {
  --code-query-color: #ab9df2;
  --code-field-color: #78dce8;
}

Avec Templater :

/* Styles pour les templates */
.template-code {
  --code-template-var: #ffd866;
  --code-template-func: #a9dc76;
}

🔗 Synchronisation avec VSCode

Le système maintient la compatibilité avec vos paramètres VSCode :

// settings.json VSCode → CSS Obsidian
{
  "editor.fontFamily": "Fira Code iScript"
  → --font-family-code: 'Fira Code iScript';
  
  "editor.fontLigatures": true
  → --enable-ligatures: true;
  
  "editor.bracketPairColorization.enabled": true
  → --enable-bracket-colors: true;
}

🔄 Mise à jour automatique

# Synchroniser les styles avec la dernière version
npm run sync-code-styles

# Vérifier les mises à jour
npm run check-code-updates

# Régénérer avec nouvelles options
npm run build-code-styling

🐛 Dépannage

❌ Problèmes courants

Problème	Cause	Solution
Ligatures ne s'affichent pas	Police non installée	Installer Fira Code ou JetBrains Mono
Parenthèses pas colorées	Plugin CSS conflictuel	Désactiver autres thèmes temporairement
Performance dégradée	Trop d'animations	Utiliser preset "Performance"
Curseur invisible	Conflit de couleur	Ajuster `--cursor-color`

🔧 Débogage avancé

Vérifier les variables CSS :

// Console navigateur
const styles = getComputedStyle(document.documentElement);
console.log(styles.getPropertyValue('--font-family-code'));

Test des fonctionnalités :

/* CSS de test temporaire */
.debug-code-styling * {
  border: 1px solid red !important;
}

Reset complet :

/* Retour aux defaults */
.theme-dark {
  --font-family-code: initial;
  --enable-ligatures: false;
  --enable-bracket-colors: false;
}

📚 Ressources et liens

🔤 Polices recommandées

Fira Code - Police avec ligatures
JetBrains Mono - Police JetBrains
Cascadia Code - Police Microsoft

🛠️ Outils de configuration

Page de demo - Interface de configuration
Générateur CSS - Script automatisé
Validateur - Vérification des styles

📖 Documentation VSCode

🎯 Roadmap et améliorations futures

🔮 Fonctionnalités prévues

v2.0 : Plugin Obsidian natif avec interface graphique
v2.1 : Support des thèmes adaptatifs (jour/nuit)
v2.2 : Synchronisation bidirectionnelle avec VSCode
v2.3 : Profils utilisateur et partage de configurations
v3.0 : IA pour suggestions de style personnalisées

💡 Idées de contribution

Nouveaux presets de couleurs
Support de langages additionnels
Optimisations performance
Tests automatisés
Documentation multilingue

🤝 Contribuer

Vos contributions sont les bienvenues ! Consultez le guide de développement pour plus d'informations.

Issues GitHub : Signaler un problème
Discussions : Partager vos idées

Créé avec ❤️ pour la communauté Obsidian

FilesExpand file tree

code_styling_docs.md

Latest commit

History