La syntaxe Markdown
Pour insérer des images, la syntaxe originale est très simple : .
La syntaxe qui commence par un point d’exclamation, se compose de deux parties :
- Entre crochets, placez le texte alternatif à l’image. Cela renseignera l’attribut altde l’élément
lors de la conversion en HTML.
- Entre parenthèses, indiquez le chemin d’accès au fichier de l’image qui indiquera l’attribut srcde l’élément
.
- Après le chemin d’accès, vous pouvez renseigner le titre de l’image. Il mentionnera la valeur de l’attribut titlede l’élément
. Notez que ce titre est optionnel.
L’insertion dans les éditeurs Markdown
J’entends par “éditeurs Markdown”, les applications qui ne permettent que la rédaction de texte avec une mise en forme en Markdown, comme Caret (https://caret.io), Typora (https://typora.io), ghostwriter (http://wereturtle.github.io/ghostwriter/)… Notez que ces applications utilisent l’extension usuelle .md pour typer les documents. Pour ces applications, il n’y a aucun problème d’insertion des images avec cette syntaxe. Certaines applications pourront vous demander les droits de lecture dans le dossier contenant le fichier Markdown et les images utilisées.
L’insertion dans les applications de rédaction Markdown
J’entends par “applications de rédaction Markdown”, les applications dédiées à la rédaction de documents structurés et qui proposent des outils d’aide à la rédaction, comme une bibliothèque, des objectifs chiffrés, des notes, des résumés… Nous pouvons citer iA Writer (https://ia.net/writer), Ulysses (https://ulysses.app), Highlander (https://quoteunquoteapps.com/highland–2/)…
Pour ces applications, l’insertion des images s’avère plus “subtile”. En effet certaines de ces applications utilisent un format de document particulier, le format TextBundle (http://textbundle.org). Ces applications n’utilisent pas l’extension .md pour typer les documents, mais une extension généralement propriétaire, comme .highlandou .ulyssespour les applications éponymes. Notez que iA Writer est un cas particulier qui utilise l’extension .mdpour le nom des documents. J’y reviendrai.
Le format TextBundle
Les fichiers générés par les applications de rédaction Markdown citées précédemment sont au format TextBundle. Ce format est un paquet (packageou bundleen anglais) de fichiers compressés en une archive zip. Si vous décompressez ce type de fichier, vous obtenez un dossier ayant pour extension .textbundle.
Cette archive peut contenir plusieurs fichiers, dont ces trois a minima :
- info.json : ce fichier contient toutes les métadonnées du bundle.
- text.md : ce fichier, dont l’extension n’est pas obligatoirement .md, contient tout le texte du document.
- assets : ce dossier contient tous les fichiers insérés dans le document, dont les images bien sûr.
Le bundle peut contenir d’autres fichiers utiles et propres à chaque application utilisant ce format.
L’insertion des images
Avec ces applications, l’insertion des images se fait généralement par un simple glissé-déposé du fichier de l’image dans le document de texte, ou bien par une commande d’un menu qui vous permet de sélectionner l’image voulue.
Dans ce cas que se place-t-il ? Et bien le fichier de l’image est copié de son emplacement initial et collé dans le dossier assets du bundle. En ce qui concerne la syntaxe Markdown, la référence se fait donc par rapport au dossier assets comme cela : . Du fait même de cette copie, le fichier original de l’image n’est plus nécessaire à son traitement de sortie (.html, .pdf, .docx…).
Certaines applications comme Highland vous permet de visualiser le dossier assets dans sa sidebar et affiche clairement le chemin d’accès aux fichiers inclus. D’autres, comme Ulysses, si vous insérez une image par glissé-déposé dans le document, ne vous montre ni les fichiers inclus, ni le code Markdown, mais uniquement un aperçu de l’image.
En ce qui concerne iA Writer, son cas est particulier. En effet s’il accepte la syntaxe en code Markdown sans problème, si vous insérez une image par glissé-déposé, il utilise alors une syntaxe particulière : /images/mon-image.jpg. Dans cet exemple l’image se trouve dans le dossier images et est nommée mon-image.jpg. Donc iA Writer peut utiliser ces deux syntaxes.
Conclusion
Vous avez maintenant les connaissances techniques nécessaires pour maîtriser l’insertion des images dans les applications Markdown et vous en maîtriserez les conséquences techniques.
Article paru initialement sur LinkedIn : Les images et le Markdown.