mirror of
https://github.com/Ladebeze66/coffreobsidian.git
synced 2025-12-16 21:37:47 +01:00
182 lines
12 KiB
Markdown
182 lines
12 KiB
Markdown
## Configuration des titres automatiques
|
||
Configuration personnelle dans répertoire snippets du coffre obsidian fichier : title_colors.css
|
||
|
||
| Couleur | Code HEX | Aperçu |
|
||
| ------------ | --------- | ------------------------------------------------------------------------------ |
|
||
| Rouge | `#FF0000` | <span style="background-color:#FF0000;color:#fff;padding:2px 8px;"> </span> |
|
||
| Vert | `#00FF00` | <span style="background-color:#00FF00;"> </span> |
|
||
| Bleu | `#0000FF` | <span style="background-color:#0000FF;color:#fff;padding:2px 8px;"> </span> |
|
||
| Jaune | `#FFFF00` | <span style="background-color:#FFFF00;"> </span> |
|
||
| Cyan | `#00FFFF` | <span style="background-color:#00FFFF;"> </span> |
|
||
| Magenta | `#FF00FF` | <span style="background-color:#FF00FF;"> </span> |
|
||
| Noir | `#000000` | <span style="background-color:#000000;color:#fff;padding:2px 8px;"> </span> |
|
||
| Blanc | `#FFFFFF` | <span style="background-color:#FFFFFF;border:1px solid #ccc;"> </span> |
|
||
| Gris clair | `#D3D3D3` | <span style="background-color:#D3D3D3;"> </span> |
|
||
| Gris foncé | `#A9A9A9` | <span style="background-color:#A9A9A9;"> </span> |
|
||
| Rouge foncé | `#8B0000` | <span style="background-color:#8B0000;color:#fff;padding:2px 8px;"> </span> |
|
||
| Vert foncé | `#006400` | <span style="background-color:#006400;color:#fff;padding:2px 8px;"> </span> |
|
||
| Bleu foncé | `#00008B` | <span style="background-color:#00008B;color:#fff;padding:2px 8px;"> </span> |
|
||
| Orange | `#FFA500` | <span style="background-color:#FFA500;"> </span> |
|
||
| Or | `#FFD700` | <span style="background-color:#FFD700;"> </span> |
|
||
| Rose | `#FFC0CB` | <span style="background-color:#FFC0CB;"> </span> |
|
||
| Lavande | `#E6E6FA` | <span style="background-color:#E6E6FA;"> </span> |
|
||
| Turquoise | `#40E0D0` | <span style="background-color:#40E0D0;"> </span> |
|
||
| Indigo | `#4B0082` | <span style="background-color:#4B0082;color:#fff;padding:2px 8px;"> </span> |
|
||
| Violet | `#800080` | <span style="background-color:#800080;color:#fff;padding:2px 8px;"> </span> |
|
||
| Bleu ciel | `#87CEEB` | <span style="background-color:#87CEEB;"> </span> |
|
||
| Vert citron | `#ADFF2F` | <span style="background-color:#ADFF2F;"> </span> |
|
||
| Rouge corail | `#FF7F50` | <span style="background-color:#FF7F50;"> </span> |
|
||
| Menthe | `#98FF98` | <span style="background-color:#98FF98;"> </span> |
|
||
| Bleu pétrole | `#2F4F4F` | <span style="background-color:#2F4F4F;color:#fff;padding:2px 8px;"> </span> |
|
||
| Sable | `#F4A460` | <span style="background-color:#F4A460;"> </span> |
|
||
| Chocolat | `#D2691E` | <span style="background-color:#D2691E;color:#fff;padding:2px 8px;"> </span> |
|
||
| Bronze | `#CD7F32` | <span style="background-color:#CD7F32;"> </span> |
|
||
| Vert forêt | `#228B22` | <span style="background-color:#228B22;color:#fff;padding:2px 8px;"> </span> |
|
||
Exemple de code du fichier :
|
||
```markdown
|
||
.markdown-preview-view h1 {
|
||
color: #e74c3c; /* Rouge */
|
||
background-color: #ffeaea;
|
||
}
|
||
|
||
.markdown-preview-view h2 {
|
||
color: #2980b9; /* Bleu */
|
||
background-color: #eaf4ff;
|
||
}
|
||
|
||
.markdown-preview-view h3 {
|
||
color: #27ae60; /* Vert */
|
||
background-color: #eafff3;
|
||
}
|
||
|
||
.markdown-preview-view h4 {
|
||
color: #e67e22; /* Orange */
|
||
background-color: #fff3e6;
|
||
}
|
||
```
|
||
|
||
```css
|
||
/* =========================================
|
||
PERSONNALISATION DES TITRES MARKDOWN
|
||
========================================= */
|
||
|
||
.markdown-preview-view h1,
|
||
.markdown-preview-view h2,
|
||
.markdown-preview-view h3,
|
||
.markdown-preview-view h4,
|
||
.markdown-preview-view h5,
|
||
.markdown-preview-view h6 {
|
||
/* === Apparence du texte === */
|
||
|
||
/* Couleur du texte */
|
||
color: #333; /* ➤ Changer la couleur du titre — ex: #e74c3c pour rouge vif */
|
||
/* Pour désactiver : commenter ou supprimer la ligne */
|
||
|
||
/* Police en gras */
|
||
font-weight: bold; /* ➤ Force du gras — "normal", "bold", ou 100 à 900 */
|
||
|
||
/* Style de police */
|
||
font-style: normal; /* ➤ "italic" pour pencher les titres */
|
||
|
||
/* Transformation du texte */
|
||
text-transform: none; /* ➤ "uppercase", "lowercase", ou "capitalize" */
|
||
|
||
/* Soulignement, surlignement */
|
||
text-decoration: none; /* ➤ "underline", "line-through", etc. */
|
||
|
||
/* Ombre sur le texte */
|
||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* ➤ Effet d'ombre douce */
|
||
|
||
/* === Fond et encadrement === */
|
||
|
||
/* Couleur de fond */
|
||
background-color: transparent; /* ➤ Changer pour mettre en valeur (ex: #f0f0f0) */
|
||
|
||
/* Bordure gauche (style bloc-notes) */
|
||
border-left: 4px solid transparent; /* ➤ Couleur & épaisseur personnalisables */
|
||
|
||
/* Bordure globale (si besoin) */
|
||
border: none;
|
||
|
||
/* Rayon des coins */
|
||
border-radius: 4px; /* ➤ Arrondi des bords */
|
||
|
||
/* === Espacement === */
|
||
|
||
/* Espace intérieur (entre le texte et le bord) */
|
||
padding: 6px 10px; /* ➤ Haut/Bas 6px, Gauche/Droite 10px */
|
||
|
||
/* Marge extérieure (espacement entre éléments) */
|
||
margin-top: 20px;
|
||
margin-bottom: 10px;
|
||
|
||
/* === Taille du texte (ajustable par niveau) === */
|
||
/* Décommenter si tu veux des tailles fixes */
|
||
|
||
/*
|
||
font-size: 2em; // h1
|
||
font-size: 1.75em; // h2
|
||
font-size: 1.5em; // h3
|
||
font-size: 1.25em; // h4
|
||
font-size: 1em; // h5
|
||
font-size: 0.875em;// h6
|
||
*/
|
||
|
||
/* === Police personnalisée === */
|
||
/* font-family: 'Fira Code', 'Arial', sans-serif; */
|
||
}
|
||
|
||
```
|
||
|
||
### 1. Structures de base dans obsidian (éléments ciblages en CSS)
|
||
|
||
| Élément Obsidian | Sélecteur CSS | Description |
|
||
| ------------------------- | ---------------------------- | ------------------------------- |
|
||
| Vue lecture (Preview) | `.markdown-preview-view` | Affiche la note en mode lecture |
|
||
| Vue édition (Editor) | `.cm-s-obsidian` | Contenu en mode édition |
|
||
| Titre de niveau 1 (`#`) | `h1` | Titre principal |
|
||
| Titre de niveau 2 (`##`) | `h2` | Sous-titre |
|
||
| Titre de niveau 3 (`###`) | `h3` | Sous-sous-titre |
|
||
| Citation (`>`) | `blockquote` | Bloc de citation |
|
||
| Liste à puces | `ul`, `li` | Liste non ordonnée |
|
||
| Liste numérotée | `ol`, `li` | Liste ordonnée |
|
||
| Case à cocher | `input[type="checkbox"]` | Checkbox dans les tâches |
|
||
| Tâche cochée | `.task-list-item.is-checked` | Tâche marquée comme faite |
|
||
| Lien interne | `a.internal-link` | Lien vers une autre note |
|
||
| Lien externe | `a.external-link` | Lien vers un site web |
|
||
| Tableau Markdown | `table`, `thead`, `td`, `th` | Tableau classique |
|
||
| Bloc de code | `pre code`, `code` | Code sur plusieurs lignes |
|
||
| Code inline | `code` | Code en ligne |
|
||
| Image | `img` | Image insérée |
|
||
| Tags (en bas des notes) | `.tag` | Balises de tags Markdown |
|
||
### 2. Propriétés CSS utiles (et exemples pour obsidian)
|
||
| Propriété CSS | Exemple | Utilité |
|
||
|---------------------|--------------------------------|-------------------------------------------------------------|
|
||
| `color` | `color: #ff0000;` | Couleur du texte |
|
||
| `background-color` | `background-color: #f0f0f0;` | Couleur de fond |
|
||
| `font-size` | `font-size: 1.2em;` | Taille du texte |
|
||
| `font-family` | `font-family: 'Fira Code';` | Police du texte |
|
||
| `font-weight` | `font-weight: bold;` | Gras ou fin |
|
||
| `text-align` | `text-align: center;` | Alignement du texte (left, right, center, justify) |
|
||
| `text-decoration` | `text-decoration: underline;` | Souligné, barré, etc. |
|
||
| `text-transform` | `text-transform: uppercase;` | Majuscules, minuscules |
|
||
| `padding` | `padding: 10px;` | Espace intérieur |
|
||
| `margin` | `margin: 20px;` | Espace extérieur |
|
||
| `border` | `border: 1px solid #ccc;` | Bordure autour d’un élément |
|
||
| `border-radius` | `border-radius: 8px;` | Coins arrondis |
|
||
| `box-shadow` | `box-shadow: 2px 2px 5px #aaa;`| Ombre portée |
|
||
| `line-height` | `line-height: 1.5;` | Espacement entre les lignes |
|
||
| `display` | `display: block;` | Type d'affichage (inline, block, flex...) |
|
||
| `max-width` | `max-width: 800px;` | Limiter la largeur d’un élément |
|
||
| `overflow` | `overflow: auto;` | Gérer le débordement (utile pour blocs de code/tables) |
|
||
### 3. Tableau spécial : personnalisation des tableaux et blocs de code
|
||
| Élément | Sélecteur CSS | Propriétés utiles | Exemple |
|
||
|--------------------|-----------------------------------|----------------------------------------------------------------------|---------------------------------------------------------------------|
|
||
| Tableau | `table` | `border`, `width`, `border-collapse`, `margin`, `background-color` | `table { border: 1px solid #ccc; border-collapse: collapse; }` |
|
||
| Ligne de tableau | `tr` | `background-color`, `border-bottom`, `hover` effects | `tr:hover { background-color: #f5f5f5; }` |
|
||
| Cellule | `td`, `th` | `padding`, `text-align`, `color` | `td { padding: 8px; text-align: left; }` |
|
||
| Tête de tableau | `thead th` | `font-weight`, `background-color` | `thead th { background-color: #eee; font-weight: bold; }` |
|
||
| Bloc de code | `pre code` | `background-color`, `padding`, `font-family`, `border-radius` | `pre code { background-color: #f4f4f4; padding: 12px; }` |
|
||
| Code inline | `code` | `background`, `padding`, `font-family`, `border-radius` | `code { background: #eee; padding: 2px 4px; }` |
|
||
| Scroll horizontal | `pre` | `overflow-x`, `max-width` | `pre { overflow-x: auto; max-width: 100%; }` |
|