Ma collection de snippets CSS Obsidian, pour une apparence et une typographie de bon goût
Oui. Bon. Je suis en train de retourner sous Obsidian. Un certain nombre de mes points de friction autour de l’app se dissipent, des fonctionnalités que je désire se trouvent intégrées, signifiant que je gagne à présent à tout y centraliser plutôt qu’à conserver des silos séparés. Suite à une question des formidables stagiaires de la retraite sur l’émergence créative au printemps (merci pour l’inspiration), je vais faire mon petit influenceur et proposer les extraits CSS que j’utilise dans l’application : j’ai appris un ou deux trucs, notamment que mes besoins parfaitement raisonnables et empreints de mon habituel goût très sûr (utilisez les guillemets à chevrons dans vos dialogues, dammit) ne sont pas tant partagés que ça, ce qui est bien la preuve que tout fout le camp.
Si vous vous demandez ce qu’est un extrait CSS dans Obsidian, c’est un petit bout de code qu’on peut injecter dans l’application pour y personnaliser à peu près n’importe quoi. Rendez-vous ici pour apprendre à les utiliser.
Voici de quoi rendre l’application OCD-compliant.
Alinéa de paragraphe
Sérieusement ? Personne n’a besoin de ça ? J’ai passé un temps déraisonnable à éplucher le forum officiel pour trouver comment mettre en retrait la première ligne de chaque paragraphe, et au final, il m’a fallu l’aide du Discord. Bref, voici comment présenter un joli texte avec un alinéa, mais seulement pour le contenu du fichier en cours, parce que sinon, c’est le bazar.
body .workspace-leaf-content[data-type="markdown"] .markdown-source-view.mod-cm6 div.cm-line:not(:is(.HyperMD-header,.HyperMD-quote,.HyperMD-list-line,.hyperMD-codeblock,.hr), .cm-table-widget *),
.markdown-source-view.mod-cm6.indent div.cm-line:not(:is(.HyperMD-header,.HyperMD-quote,.HyperMD-list-line,.hyperMD-codeblock,.hr), .cm-table-widget *) {
text-indent: 2em;
}
body .workspace-leaf-content[data-type="markdown"] .markdown-source-view.mod-cm6 div.cm-line:not(:is(.HyperMD-header,.HyperMD-quote,.HyperMD-list-line,.hyperMD-codeblock,.hr), .cm-table-widget *) .cm-hmd-frontmatter:first-of-type,
.markdown-source-view.mod-cm6.indent div.cm-line:not(:is(.HyperMD-header,.HyperMD-quote,.HyperMD-list-line,.hyperMD-codeblock,.hr), .cm-table-widget *) .cm-hmd-frontmatter:first-of-type {
margin-left: -2em;
}
body .markdown-source-view.mod-cm6 div.has-banner.cm-line:not(.HyperMD-header) .cm-def.cm-hmd-frontmatter,
body .markdown-source-view.mod-cm6 div.has-banner.cm-line:not(.HyperMD-header) .collapse-indicator,
.markdown-source-view.mod-cm6.indent div.has-banner.cm-line:not(.HyperMD-header) .cm-def.cm-hmd-frontmatter,
.markdown-source-view.mod-cm6.indent div.has-banner.cm-line:not(.HyperMD-header) .collapse-indicator {
margin-left: 0;
left: -3em;
}
body [data-type="markdown"] div[class="el-p"]:not(blockquote) > p,
[data-type="markdown"] :is(.markdown-preview-view,.markdown-rendered).indent div[class="el-p"]:not(blockquote) > p {
text-indent: 2em;
}
body [data-type="markdown"] div[class="el-p"]:not(blockquote) > p>br,
[data-type="markdown"] :is(.markdown-preview-view,.markdown-rendered).indent div[class="el-p"]:not(blockquote) > p>br {
content: ' ';
white-space: pre;
line-height: calc((var(--paragraph-spacing) + 0.3) * 1em);
display:unset;
}
body [data-type="markdown"] div[class="el-p"]:not(blockquote) > p>br::after,
[data-type="markdown"] :is(.markdown-preview-view,.markdown-rendered).indent div[class="el-p"]:not(blockquote) >p>br::after {
content: '\A\9\9';
}Placer le bouton de fermeture des onglets à gauche
Peu utile si vous empilez les onglets, comme il se doit bien sûr, mais si vous utilisez un Mac, vous savez que le bouton de clôture d’une fenêtre ou d’un onglet se trouve à fucking gauche, pas à droite comme chez ces barbares de Windows.
.workspace-tab-header-inner-close-button {
order: -1;
}Espacer les titres
Ça n’a pas l’air de grand-chose – placer du blanc avant et après les titres, de manière à les faire ressortir et à aérer un document – mais l’éditeur d’Obsidian n’utilise pas margin comme on s’y attendrait, mais padding, ce qui fiche un peu le dawa notamment quand on désire intégrer un joli trait de séparation / soulignement comme je le fais ici. Employer padding implique du coup un peu de calculs à la volée, bref, c’est inutilement compliqué, c’est pourquoi je vous le mets : ajustez les valeurs selon votre goût et votre thème. (Là encore, merci au Discord.)
body :is(.markdown-preview-view,.markdown-rendered) h1,
body .markdown-source-view.is-live-preview .HyperMD-header.HyperMD-header-1.cm-line {
padding-top: 35px !important;
padding-bottom: 35px !important;
}
body .markdown-source-view.is-live-preview .HyperMD-header.HyperMD-header-1.cm-line {
--h1-bot-padding: 35px;
padding-bottom: var(--h1-bot-padding);
position: relative;
&::after {
--underline-offset: 5px;
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
bottom: calc(var(--h1-bot-padding) - var(--underline-offset));
background-color: lightgrey;
}
}
body :is(.markdown-preview-view,.markdown-rendered) h2,
body .markdown-source-view.is-live-preview .HyperMD-header.HyperMD-header-2.cm-line {
padding-top: 35px !important;
padding-bottom: 30px !important;
}
body .markdown-source-view.is-live-preview .HyperMD-header.HyperMD-header-2.cm-line {
--h2-bot-padding: 30px;
padding-bottom: var(--h2-bot-padding);
position: relative;
&::after {
--underline-offset: 5px;
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
bottom: calc(var(--h2-bot-padding) - var(--underline-offset));
background-color: lightgrey;
}
}
body :is(.markdown-preview-view,.markdown-rendered) h3,
body .markdown-source-view.is-live-preview .HyperMD-header.HyperMD-header-3.cm-line {
padding-top: 30px !important;
padding-bottom: 20px !important;
}
body :is(.markdown-preview-view,.markdown-rendered) h4,
body .markdown-source-view.is-live-preview .HyperMD-header.HyperMD-header-4.cm-line {
/* border-bottom: 0.5px solid black;*/
padding-top: 25px !important;
padding-bottom: 10px !important;
}
body :is(.markdown-preview-view,.markdown-rendered) h5,
body .markdown-source-view.is-live-preview .HyperMD-header.HyperMD-header-5.cm-line {
/* border-bottom: 0.5px solid black;*/
padding-top: 25px !important;
padding-bottom: 5px !important;
}
body :is(.markdown-preview-view,.markdown-rendered) h6,
body .markdown-source-view.is-live-preview .HyperMD-header.HyperMD-header-6.cm-line {
/* border-bottom: 0.5px solid black;*/
padding-top: 20px !important;
padding-bottom: 10px !important;
}
body {
--p-spacing: 1rem;
--heading-spacing: 1em;
}Espacer les paragraphes
Et tant qu’on y est, on peut séparer subtilement les paragraphes, ce qui ne mange pas de pain quand on travaille avec des murs de texte.
.CodeMirror pre.CodeMirror-line {
padding-bottom: 10px !important;
}
.cm-s-obsidian .CodeMirror-line,
.cm-s-obsidian .cm-line {
padding-bottom: 6px !important;
}
.markdown-preview-view br {
content: '';
display: block;
margin-top: 10px;
}
.cm-content .cm-line:not(:is(.HyperMD-header), .cm-table-widget *) {
line-height: 1.55em;
}
/* Live Preview */
body {
--paragraph-spacing: 1.55;
}
:is(.markdown-preview-view,.markdown-rendered) p {
margin-block-start: calc(var(--paragraph-spacing) * 1em);
margin-block-end: calc(var(--paragraph-spacing) * 1em);
}
body :is(.markdown-preview-view,.markdown-rendered) p>br {
content:" ";
margin-top: calc((var(--paragraph-spacing) - 1) * 1em);
display: block;
}
De jolies listes à puces hiérarchiques
Je suis d’avis que les indicateurs visuels soutiennent la pensée : changer le style des puces à mesure que l’on descend dans la hiérarchie n’est pas bien difficile, et c’est joli.
/* LEVEL 1 */
.markdown-reading-view ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-1 .list-bullet:after {
/* Bullet */
height: 7px;
width: 7px;
border-radius: 50%;
background-color: var(--bullet-new-color);
}
/* LEVEL 2 */
.markdown-reading-view ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-2 .list-bullet:after {
/* Hollow Bullet */
height: 6px;
width: 6px;
background-color: Transparent;
border-color: var(--bullet-new-color);
border-style: solid;
border-radius: 50%;
border-width: 1px;
}
/* LEVEL 3 */
.markdown-reading-view ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-3 .list-bullet:after {
/* Solid Square */
height: 7px;
width: 7px;
border-radius: 0%;
background-color: var(--bullet-new-color);
}
/* LEVEL 4 */
.markdown-reading-view ul > li > ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-4 .list-bullet:after {
/* Hollow Square */
height: 6px;
width: 6px;
background-color: Transparent;
border-color: var(--bullet-new-color);
border-style: solid;
border-radius: 0%;
border-width: 1px;
}
/* LEVEL 5 */
.markdown-reading-view ul > li > ul > li > ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-5 .list-bullet:after {
/* Small Bullet */
height: 3px;
width: 3px;
border-radius: 50%;
background-color: var(--bullet-new-color);
}
/* LEVEL 6 */
.markdown-reading-view ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-6 .list-bullet:after {
/* Dash */
height: 1px;
width: 5px;
border-radius: 0%;
background-color: var(--bullet-new-color);
}
/* LEVEL 7 */
.markdown-reading-view ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-7 .list-bullet:after {
/* Bullet */
height: 5px;
width: 5px;
border-radius: 50%;
background-color: var(--bullet-new-color);
}
.cm-s-obsidian .cm-formatting-list {
color: var(--bullet-new-color) !important;
}
/* bullet color */
:root {
--bullet-new-color: #2d62d8;
} Changer le style du soulignement de texte
Obsidian ne propose pas d’option de soulignement pour le texte, parce que le Markdown ne l’inclut bizarrement pas ; il est cependant possible de l’intégrer manuellement avec la balise HTML <u>, ou, plus élégamment, avec le plugin Extended Markdown Syntax qui ajoute la balise ++ à cet effet. Pour adapter le soulignement à sa couleur préférée (comme Bear), employer et personnaliser ce qui suit – fonctionne avec les deux contournements sus-cités.
u {
text-decoration: underline 7% solid #2d62d8 ;
text-underline-offset: 10% ;
}
.cm-ins {
text-decoration: underline 7% solid #2d62d8 ;
text-underline-offset: 10% ;
}
