Multimédia⧫
Liens⧫
Liens internes⧫
Inscrire la syntaxe [[nom_du_fichier]] dans une note, permet de lier de façon bidirectionnelle celle-ci à un autre fichier du coffre.
C’est une spécificité d’Obsidian et des logiciels de son genre qui permet la navigation entre les notes et leurs pièces jointes contenues dans le dossier d’Obsidian.
Compléments
- La syntaxe
[[nom_du_fichier|alias]]utilise l’alias choisit à la place du nom du fichier comme texte de support du lien ; - La syntaxe
[[nom_du_fichier#un titre|alias]]pointe vers un titre en particulier dans la note ; - La syntaxe
[[nom_du_fichier^|alias]]pointe vers un bloc en particulier dans la note ;
Ces liens sont mis en évidence par la Vue graphique et sont aussi utilisés dans les modules principaux Rétrolien et Liens sortants.
Autres avantages des liens bidirectionnels
- Lorsque l’on modifie le nom du fichier dans le lien, Obsidian renomme automatiquement le fichier dans l’explorateur et inversement.
- Si l’on déplace le fichier lié dans l’arborescence des dossiers du coffre, Obsidian met à jour automatiquement le chemin relatif du lien.
Liens externes⧫
Le plus simple pour intégrer un lien hypertexte est de coller son adresse directement dans le MarkDown, par exemple le code http://obsidian.md produit http://obsidian.md ;
De cette façon on peut aussi indiquer une adresse mail, par exemple le code prenom.nom@ecmorlaix.fr produit prenom.nom@ecmorlaix.fr.
La syntaxe [texte](URL "info-bulle") lie une adresse web à un texte support avec l’affichage optionnel d’une info-bulle au survol du lien, par exemple le code [Cf. documentation obsidian : Liens](https://help.obsidian.md/How+to/Format+your+notes#Links "Aide officielle sur les liens") produit Cf. documentation obsidian : Liens ;
Comment alléger le code MarkDown de ses trop longues URL ?
Parce que de longues adresses de liens dégradent la lisibilité du texte en mode édition de code, MarkDown permet de définir des liens par référence.
Dans ce cas, on définit tous les liens à un endroit du document, en dehors du texte (généralement rassemblé), avec la syntaxe :
[référence]: URL "infobulle"
et au fil du texte on lie cette adresse par sa référence à un texte support avec la syntaxe
[texte][référence] ou encore tout simplement [référence].Cette solution offre aussi l’avantage de pouvoir partager la même adresse par plusieurs liens en ne la définissant qu’une fois dans le document.
Exemple :
Le code MarkDown du paragraphe d’introduction comporte de nombreux liens de ce type, tous listés à la fin du texte…
Mettre l’URL entre deux chevrons <URL> si elle contient des espaces…
Images⧫
Cf. documentation obsidian : Images
La syntaxe pour afficher des images dans une note est la même que celle pour les liens, mais avec un ! devant.
Images du web⧫
Pour insérer l’affichage d’une image disponible sur le web on utilise le code MarkDown générique d’un lien externe, avec un ! devant :
- L’infobulle optionnelle s’affichera au survol de l’image.
- Il est important de bien choisir le texte alternatif qui s’affichera lorsque l’image n’est pas disponible, car il permet aussi l’accessibilité pour les non-voyants et apporte de la sémantique pour les moteurs de recherche…
- L’adresse est l’URL absolue qui permet d’atteindre le fichier lié sur le web, ou le chemin relatif vers un fichier
Exemple
Le code MarkDown , affiche :
Cette syntaxe fonctionne aussi avec une image du coffre…
Le code MarkDown , affiche la même chose :
Remarque :
La mise à jour automatique du lien relatif peut poser problème en cas de changement de dossier…
Images du coffre⧫
Pour insérer l’affichage d’une image disponible dans le coffre d’Obsidian, il peut-être plus pratique d’utiliser le code MarkDown spécifique d’un lien interne, avec un ! devant :
![[nom_fichier_image]]
Le plus simple pour obtenir ce code est alors de glisser/déposer un fichier image depuis l’explorateur dans le code MarkDown d’une note là ou l’on souhaite insérer l’image
Exemple
Le code MarkDown , affiche :
A venir…
En ligne ou en bloc
taille des images
Image support de lien
Alignement
https://github.com/SlRvb/Obsidian--ITS-Theme#image-positions
Quel format d’image pour le web ?
- JPEG (Joint Photographic Expert Group)
Parfait pour les photos et visuels colorés, c’est le format compressé le plus utilisé sur le web. - PNG (Portable Network Graphics)
Idéal pour les images à fond transparent, graphique et logo. - SVG (Graphics Interchange Format)
Format adapté aux images vectorielles, permet de les déformer sans altérer la qualité. - GIF (Graphics Interchange Format)
Images animées idéale pour illustrer vos propos, fortement utilisé sur les réseaux sociaux.
Réduire le poids des images
D’une manière générale, il est important pour accélérer le processus d’affichage et limiter l’impact environnementale produit par nos documents (transfert, stockage) de réduire la taille des fichiers intégrées et particulièrement celle des images.
On gagne toujours en choisissant bien le format adaptés à l’utilisation finale du document :
- une image vectorielle (.svg) offre généralement plus de qualité qu’une image matricielle pour du dessin ;
- une image matricielle (
.pngdessin,.jpegphoto,.gifanimation) destinée à l’affichage n’a pas besoin d’autant de définition que pour une impression.
De plus on peut très avantageusement les compresser :
12,3ko en .svg à comparer en zoomant avec
14,0ko en .png 
.
Cette dernière après une compression réglée sur 3 couleurs, réduit son poids de 85% ce qui donne seulement 2,1ko en .png qui suffisent ici à faire le job : 
Après avoir Glisser/Déposer le fichier original, en cliquant sur la vignette du fichier réduit proposé au téléchargement, on accède à des réglages supplémentaires qui permettent d’accentuer encore la compression obtenue par défaut. Le volet horizontal montre alors la différence obtenu à l’affichage… il y a forcément des pertes, mais tant que l’information à transmettre reste visible et correcte, le jeu en vaut la chandelle car l’économie peut être très significative…
A venir…
Tableau⧫
\(\LaTeX{}\)⧫
Cf. documentation obsidian : Math
\(\LaTeX\), qu’on prononce “LaTèque”, est un langage de description à balisage dédié à l’édition et la publication de rapports scientifiques avec une typographie irréprochable.
Dans une note.md d’Obsidian, il est possible d’intégrer des instructions codées en \(\LaTeX\) qui seront interprétées par la librairie JavaScript Mathjax embarquée pour afficher des équations et autres symboles scientifiques.
Principe⧫
Pour une formule en ligne, au fil du texte, telle que \(f(x) = x^2\), il faut encadrer l’expression entre deux simples $...$ comme ceci $f(x) = x^2$.
Pour une formule en bloc, dans un nouveau paragraphe centré, il faut encadrer l’expression entre deux doubles $$...$$ comme cela :
$$
F(x) = \int^a_b \frac{1}{2}x^4
$$
ce qui produit :
Exemples⧫
| Code | Résultat | Code | Résultat |
|---|---|---|---|
$x + y$ |
\(x + y\) | $x - y$ |
\(x - y\) |
$x \times y$ |
\(x \times y\) | $x \div y$ |
\(x \div y\) |
$x^2$ |
\(x^2\) | $y^{(x-1)}$ |
\(y^{(x-1)}\) |
$\pi \approx 3.14159$ |
\(\pi \approx 3.14159\) | $1 \neq 2$ |
\(1 \neq 2\) |
$0 < 1$ |
\(0 < 1\) | $2 > 1$ |
\(2 > 1\) |
$x \leq 2$ |
\(x \leq 2\) | $x \geq 1$ |
\(x \geq 1\) |
${3 \over 4}$ |
\({3 \over 4}\) | $\dfrac{1}{2x}$ |
\(\dfrac{1}{2x}\) |
$U_n = 3 \times U_{n-1}+2$ |
\(U_n = 3 \times U_{n-1}+2\) | $f(x) = \sqrt[3]{2x} + \sqrt{x-2}$ |
\(f(x) = \sqrt[3]{2x} + \sqrt{x-2}\) |
| Code | Résultat | |
|---|---|---|
| Boole | $a\oplus b=\bar{a}\cdot b+a\cdot\bar{b}$ |
\(a\oplus b=\bar{a}\cdot b+a\cdot\bar{b}\) |
| Force | $\overrightarrow{F_{(ext \to S)}}$ |
\(\overrightarrow{F_{(ext \to S)}}\) |
| Moment | $\sum\overrightarrow{M_G(\overrightarrow{F_{(ext \to S)}})}$ |
\(\sum\overrightarrow{\mathscr M_G(\overrightarrow{F_{(ext \to S)}})}\) |
| Unité | $\|\overrightarrow{C_\text{moteur}}\|=49,52\;\mathrm{N\!\cdot\!m}$ |
\(\|\overrightarrow{C_\text{moteur}}\|=49,52\;\mathrm{N\!\cdot\!m}\) |
| Nom | Code | Lettre | Code | Lettre | Code | Lettre |
|---|---|---|---|---|---|---|
| alpha | $\alpha$ |
\(\alpha\) | $A$ |
\(A\) | ||
| beta | $\beta$ |
\(\beta\) | $B$ |
\(B\) | ||
| gamma | $\gamma$ |
\(\gamma\) | $\Gamma$ |
\(\Gamma\) | ||
| delta | $\delta$ |
\(\delta\) | $\Delta$ |
\(\Delta\) | ||
| epsilon | $\epsilon$ |
\(\epsilon\) | $E$ |
\(E\) | $\varepsilon$ |
\(\varepsilon\) |
| zeta | $\zeta$ |
\(\zeta\) | $Z$ |
\(Z\) | ||
| eta | $\eta$ |
\(\eta\) | $H$ |
\(H\) | ||
| theta | $\theta$ |
\(\theta\) | $\Theta$ |
\(\Theta\) | $\vartheta$ |
\(\vartheta\) |
| iota | $\iota$ |
\(\iota\) | $I$ |
\(I\) | ||
| kappa | $\kappa$ |
\(\kappa\) | $K$ |
\(K\) | $\varkappa$ |
\(\varkappa\) |
| lambda | $\lambda$ |
\(\lambda\) | $\Lambda$ |
\(\Lambda\) | ||
| mu | $\mu$ |
\(\mu\) | $M$ |
\(M\) | ||
| nu | $\nu$ |
\(\nu\) | $N$ |
\(N\) | ||
| xi | $\xi$ |
\(\xi\) | $Xi$ |
\(Xi\) | ||
| omicron | $\omicron$ |
\(\omicron\) | $O$ |
\(O\) | ||
| pi | $\pi$ |
\(\pi\) | $\Pi$ |
\(\Pi\) | $\varpi$ |
\(\varpi\) |
| rho | $\rho$ |
\(\rho\) | $P$ |
\(P\) | $\varrho$ |
\(\varrho\) |
| sigma | $\sigma$ |
\(\sigma\) | $\Sigma$ |
\(\Sigma\) | $\varsigma$ |
\(\varsigma\) |
| tau | $\tau$ |
\(\tau\) | $T$ |
\(T\) | ||
| upsilon | $\upsilon$ |
\(\upsilon\) | $\Upsilon$ |
\(\Upsilon\) | ||
| phi | $\phi$ |
\(\phi\) | $\Phi$ |
\(\Phi\) | $\varphi$ |
\(\varphi\) |
| chi | $\chi$ |
\(\chi\) | $X$ |
\(X\) | ||
| psi | $\psi$ |
\(\psi\) | $\Psi$ |
\(\Psi\) | ||
| omega | $\omega$ |
\(\omega\) | $\Omega$ |
\(\Omega\) |
Ressources⧫
- La très précieuse et précise Aide pour écrire des mathématiques simples par Franck CHAMBON
- Equation Sheet
- Editeur d’équation en ligne
- L’ultime ressource : LaTeX Wiki
- Pour s’initier au vrai \(\LaTeX\) :Apprentissage LaTeX en ligne avec ShareLaTeX
- Sur le site de Didier MULLER https://www.apprendre-en-ligne.net/LaTeX/index.html :
- Introduction à LaTex, par Fabien Augsburger (pdf, 17 pages) ;
- Apprends LaTeX, par Marc Baudoin (pdf, 112 pages) ;
- Tout ce que vous avez toujours voulu savoir sur LATEX sans jamais oser le demander (pdf, 338 pages)
- LaTeX pour l’impatient, 4ème édition, Céline Chevalier, H&K, 2016
Diagrammes avec Mermaid⧫
Cf. documentation obsidian : Diagrammes
Obsidian utilise la bibliothèque JavaScript Mermaid.js pour générer l’affichage de diagrammes à partir des instructions d’un bloc de code spécifique.
Par exemple :
```mermaid
graph TD;
A((A)) --- B((B));
A --- C((C));
B --- D((D));
B --- E( );
D --- F((F));
D --- G((G));
C --- H( );
C --- I((I));
linkStyle 3 stroke-width:0px;
linkStyle 6 stroke-width:0px;
style E opacity:0;
style H opacity:0;
```
Produit l’arbre :
De nombreux autres types de graphique sont possibles et il existe un éditeur en ligne
assez pratique…
Intégrations⧫
iFrame⧫
Cf. documentation obsidian : Embedding
Par exemple, le code HTML :
<iframe src="https://ericecmorlaix.github.io/Toto.html?embed=true" width="800" height="780" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
permet l’intégration de la page web telle que :
qui est un contenu interactif H5P généré avec l’app.lumi.education…
Notes⧫
![[test]]
Toto est dans la place !
Audio⧫
Vidéos⧫
Pdf⧫
En résumé⧫
Inspiré du guide obsidian de Johackim
Syntaxe Markdown⧫
Obsidian utilise la syntaxe Markdown par défaut :
[Link Text](URL "infobulle"): Créer un lien avec URL + infobulle: Créer une image + infobulle[ref1]et[ref1]: <url> "infobulle": Créer une référence + infobulle[Link Text][ref1]et[ref1]: <url> "infobulle": Créer une référence avec un texte personnalisé + infobulle
Syntaxe d’Obsidian⧫
Mais il a quelques spécificités de syntaxes supplémentaires :
[[Linking Note]]: Créer un lien vers une autre note[[Linking Note|Link Name]]: Créer un lien avec un nom personnalisé[[Linking Note#heading]]: Créer un lien vers un titre d’une note![[Linking Note^]]: Intégrer un bloc d’une note![[Filename]]: Intégrer une autre note-
: Insérer une image embed de 250px de largeur -
: Insérer une image de 250px de largeur -
#tag: Créer un tag -
#nested/tag: Créer un sous-tag -
aliases: [Alias1, Alias2]: Créer un alias (à ajouter dans le frontmatter)