# Code block
⭢ [dans l’aide en ligne](https://help.obsidian.md/How+to/Format+your+notes#Code+blocks)
C’est un élément syntaxique du *Markdown* à l’usage plus rare, tant qu’on est pas informaticien. Un *code block* peut servir à trois choses :
1. Noter des extraits de code d’une manière typographiquement correcte, afin de les documenter.
2. Conserver à portée de main, sur une fiche, du code à copier. À cette fin, *Obsidian* affiche, en haut à droite du bloc, en mode *lecture*, un bouton marqué \[Copy] qui permet, comme son nom l’indique de copier le code dans le presse-papier (*clipboard*).
3. Effectuer des actions spéciales en activant des fonctions fournies par l’un ou l’autre plugin.
### Syntaxe
Un *Code block* s’écrit entre deux lignes de **trois accents graves**, ainsi :
```
Ceci est un bloc de code ou *code block* en anglais.
```
### Usages 1 et 2 : Documentation et réserve de code
Une chose intéressante, c’est que l’on peut indiquer, juste à côté des trois accents graves du début, dans quel langage informatique est le code. Ce qui se passe alors, c’est que le code sera rendu, en mode *lecture*, avec une mise en évidence syntaxique des éléments. Par exemple, ce bloc :
![[CSS codeblock sample.png]]
Sera rendu ainsi, en mode *lecture* :
```CSS
<style>
p {
text-align: center;
color: red;
}
</style>
```
Vous remarquerez qu’en mode *Édition* aussi, *Obsidian* fait la mise en évidence syntaxique !
**NB :** les couleurs sont celles d’une de mes feuilles de styles ; les vôtres ne seront pas forcément les mêmes, mais le principe demeure.
La liste des langages supportés est ⭢ [ici](https://codemirror.net/mode/)
### Usage 3 : fonctions spéciales
Il s’agit ici d’un usage *avancé* d’*Obsidian*. Mais tellement pratique, quand on sait l’utiliser ! Voici quelques exemples.
#### “Embeded search result”
On peut mettre une recherche dans un bloc de code et, en mode “lecture”, le bloc sera remplacé par le résultat de la recherche. La syntaxe est exactement la même que celle qu’on utilise pour les recherches dans le panneau de recherche (“Search pane”).
Par exemple, ce bloc :
```query
tutoriel
```
est remplacé, en mode “Lecture”, par ceci : ^[je ne montre que le début de la liste, qui est fort longue.]
![[Embeded query result.png]]<br>
On voit une liste, joliment typographiée, des fiches contenant le mot “tutoriel”.
 
#### Plugin *Dataview*
Dans le coffre que j’utilise pour créer et gérer ce site, j’ai des fiches qui me servent à la gestion du projet. Par exemple, une fiche qui présente la liste de « toutes les fiches qui sont marquées “WIP” » (WIP = *work in progress*). C’est le code suivant :
```dataview
TABLE
nature,
striptime(file.mtime) AS "Modification ↓"
WHERE (contains(upper(status),"WIP") OR
contains(upper(tags), "WIP"))
AND !contains(upper(nature), "GDP")
SORT file.mtime desc
SORT nature
```
qui donne la table suivante (un extrait) :
![[DataView sample 1.webp]]
Je ne vais pas détailler ici le code. Remarquez juste le “dataview” au début du code ; il indique au plugin *Dataview* d’entrer en jeu et de faire son travail — interpréter le code et le remplacer, en mode *lecture*, par son “output”.
 
#### Plugin “Dynamic Table of Contents”
Le bloc :
```toc
min_depth: 3
max_depth: 4
```
sera remplacé par une “table des matières” de la fiche. Pour la présente fiche, cela donne :
![[TOC plugin output.webp|500]]<br>
 
#### Syntaxe “Mermaid”
De base (!), la syntaxe “Mermaid” est incluse dans *Obsidian*. C’est une syntaxe qui permet de créer des diagrammes en les décrivant sous forme de texte. Un exemple que j’ai copié, car je ne maitrise pas du tout ce système :
``` mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
Donne ceci :
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
Si vous êtes intéressé, le site internet dédié à cette syntaxe est celui-ci ⭢ [website](https://mermaid-js.github.io/mermaid/#/)
 
<p style="text-align: center;"><a href="https://dr-spinnler.ch"><img src="https://dr-spinnler.ch/myfiles/logos/Olivier-Spinnler.png" class= "signature"/></a></p>
<p style="text-align: center; font-style: italic;">le 10 décembre 2021
</p>
 
----------------------------------------------
[[usage avancé d’Obsidian]]
#écriture #software #informatique #markdown