... | ... | @@ -81,15 +81,23 @@ Text B |
|
|
A noter que [le site w3c school](https://www.w3schools.io/file/markdown-line-break/) indique d'autres possibilités, qui ne sont pas forcément disponibles dans GitLab.
|
|
|
|
|
|
|
|
|
### Mise en forme "niveau intermédiaire"
|
|
|
- très utiles :
|
|
|
- Tableaux (différent selon les 2 éditeurs !), citations dont code avec coloration syntaxique, équations, "section déroulante" (collapsible section), insérer une image (et mise en forme via les 2 éditeurs !)...
|
|
|
- bon à savoir en cas de besoin :
|
|
|
- mettre du texte en évidence : `citation avec backticks` , <kbd>relief façon clavier</kbd>, les emoji :bulb:, mettre du texte en couleur
|
|
|
- autres...
|
|
|
|
|
|
#### "utiles"
|
|
|
##### Insérer du code, avec coloration syntaxique
|
|
|
### Mise en forme, "niveau intermédiaire"
|
|
|
:warning: en cours de restructuration
|
|
|
'autres fonctionnalités méritent d'être connues ; la syntaxe est parfois légèrement différente du "Markdown classique":
|
|
|
|
|
|
* mettre du texte en évidence : citations, exemple d'`instruction de code`, <kbd>effet clavier</kbd>, code avec coloration syntaxique, mettre du texte en couleur - dont une [méthode astucieuse pour du bleu](/christine.poulard/atelier-gitlab-flavored-mardown/-/blob/main/%22oui,%20c'est%20un%20lien%20sans%20URL%22).
|
|
|
* organiser son texte :
|
|
|
* "section déroulante" (collapsible section)
|
|
|
* découpage en pages et en sections avec création de **liens** (externes, vers d'autres pages [du wiki par exemple home](https://gitlab.irstea.fr/christine.poulard/atelier-gitlab-flavored-mardown/-/wikis/home)
|
|
|
* **tables des matières dans une page** (Table of Content) et **table des pages** (sidebar)
|
|
|
* insérer une image, un tableau (dans les 2 cas: modalités différentes selon l'éditeur choisi), une équation
|
|
|
* pourquoi pas : les emoji 💡
|
|
|
|
|
|
|
|
|
##### Mettre du texte en évidence
|
|
|
Dans un premier temps du texte sobre fera l'affaire, mais il est parfois utile de recourir à des astuces pour mettre des éléments en évidence plus finement : coloration syntaxique...
|
|
|
|
|
|
###### Insérer du code, avec coloration syntaxique
|
|
|
Pour insérer du code : trois "back quotes" (<kbd>AltGr + 7 + espace</kbd> en début de bloc et trois en fin de bloc
|
|
|
|
|
|
ceci est un backtick : \`
|
... | ... | @@ -122,7 +130,7 @@ for lettre in mon_langage: |
|
|
print(lettre)
|
|
|
```
|
|
|
|
|
|
Cas particulier de bloc : **les équations**
|
|
|
##### Cas particulier des **équations**
|
|
|
|
|
|
Ce fut compliqué de trouver une syntaxe qui marche vraiment sous gitlab, mais une fois que l'on a la solution sous le nez c'est évident ! [source, sur un forum de discussion](https://stackoverflow.com/questions/35259660/displaying-latex-equation-in-gitlab-wiki-using-the-markdown-editor).
|
|
|
|
... | ... | @@ -138,7 +146,7 @@ V_{sphere} = \frac{4}{3}\pi r^3 |
|
|
```
|
|
|
</details>
|
|
|
|
|
|
##### Autres remarques sur les équations
|
|
|
**Autres remarques sur les équations**
|
|
|
|
|
|
Astuce : le site [**pandoc**](https://pandoc.org/try/) pour convertir d'une syntaxe à une autre.
|
|
|
|
... | ... | @@ -165,9 +173,6 @@ $$V_{sphere} = \frac{4}{3}\pi r^3$$ |
|
|
$` F(x) &= \int^a_b \frac{1}{3}x^3 `$
|
|
|
|
|
|
|
|
|
#### Bon à savoir en cas de besoin
|
|
|
Dans un premier temps du texte sobre fera l'affaire, mais il est parfois utile de recourir à des astuces pour mettre des éléments en évidence.
|
|
|
|
|
|
##### mettre en évidence un mot ou un petit groupe de mots
|
|
|
Dans ce qui précède, on a utilisé des backticks pour montrer des symboles sans qu'ils soient interprétés, comme `#` .
|
|
|
Le backtick s'obtient avec <kbd>AltGr + 7 + espace</kbd> : n'oubliez pas l'espace, comme pour obtenir un ^
|
... | ... | @@ -202,6 +207,29 @@ Certaines emoji **parlent d'elles-mêmes** et servent à attirer l'attention : |
|
|
|
|
|
Si vous voulez en faire un usage plus large, prenez la peine de les expliquer : par exemple j'utilise :snake: et :chart_with_upwards_trend: pour distinguer dans mon Atelier Python ce qui relève de Python en général ( :snake:) et ce qui est spécifique à matplotlib (:chart_with_upwards_trend:). Sans explication, ça n'est pas évident, mais ensuite cela aide à se repérer.
|
|
|
|
|
|
#### Structurer le wiki
|
|
|
Certains auteurs recommandent de tout mettre dans une page, ce qui facilite l'édition d'une table des matières et la conversion en PDF.
|
|
|
La plupart utilisent une structuration en plusieurs pages, avec une navigation facilitée par la "sidebar". Pour le rédacteur, c'est une solution plus facile également.
|
|
|
Chaque page peut être structurée en sections, qui peuvent être rappelées dans une table des matières.
|
|
|
Enfin, il est possible d'alléger le texte présent à l'écran en reportant des informations "optionnelles", pour éviter de noyer les informations principales et trop fatiguer la molette !
|
|
|
|
|
|
##### Alléger le texte
|
|
|
Le rédacteur doit souvent arbitrer entre "être complet" ou "être digeste", ce qui est un problème épineux car selon le lecteur la bonne réponse n'est pas la même.
|
|
|
Il est possible d'alléger le texte présent à l'écran en reportant des informations "optionnelles" (par exemple un "rappel "qui ne sera pas utile pour tous ou une informatio complémentaire "pour en savoir plus") :
|
|
|
- dans une **"collapsible section"** (mais sans mise en forme) ;
|
|
|
- dans une **note de pied de page** `[^1]` [^1] ;
|
|
|
- dans une **page dédiée**, en insérant un lien ;
|
|
|
- évidemment, on peut aussi insérer un **hyperlien** pour renvoyer le lecteur vers une autre ressource !
|
|
|
|
|
|
[^footnote-1] : on peut insérer le texte du pied de page n'importe où dans la page , avec `[^footnote-1] `
|
|
|
|
|
|
##### Structurer en pages et en sections
|
|
|
PAGES > SECTIONS (Header)
|
|
|
Liste des pages : **sidebar** (à droite)
|
|
|
Dans une page : liste des sections = Table of Content
|
|
|
|
|
|
Les **hyperliens** permettent de naviguer entre les pages et entre les headers si on leur a ajouté des signets (="anchor"), non testé
|
|
|
|
|
|
|
|
|
### liens hypertexte
|
|
|
- Liens externes
|
... | ... | |