mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-09 19:40:19 +00:00
core: add test for Markdown syntax
Signed-off-by: Skia <skia@libskia.so>
This commit is contained in:
Skia
206
doc/SYNTAX.html
Normal file
206
doc/SYNTAX.html
Normal file
@ -0,0 +1,206 @@
|
||||
<p>Cette page vise à documenter la syntaxe <em>Markdown</em> utilisée sur le site.</p>
|
||||
<h1>Markdown-AE Documentation</h1>
|
||||
<p>Le Markdown le plus standard se trouve documenté ici:
|
||||
<a href="https://daringfireball.net/projects/markdown/syntax">https://daringfireball.net/projects/markdown/syntax</a> .<br>
|
||||
Si cette page n'est pas exhaustive vis à vis de la syntaxe du site AE,
|
||||
elle a au moins le mérite de bien documenter le Markdown original.</p>
|
||||
<p>Le réel parseur du site AE est une version tunée de <a href="https://github.com/lepture/mistune">mistune</a>.<br>
|
||||
Les plus aventureux pourront aller lire ses <a href="https://github.com/lepture/mistune/blob/master/tests/fixtures">tests</a>
|
||||
afin d'en connaître la syntaxe le plus finement possible.<br>
|
||||
En pratique, cette page devrait déjà résumer une bonne partie.</p>
|
||||
<h2>Basique</h2>
|
||||
<ul>
|
||||
<li><p>Mettre le texte en <strong>gras</strong> : <code>**texte**</code></p>
|
||||
</li>
|
||||
<li><p>Mettre le texte en <em>italique</em> : <code>*texte*</code></p>
|
||||
</li>
|
||||
<li><p><u>Souligner</u> le texte : <code>__texte__</code></p>
|
||||
</li>
|
||||
<li><p><del>Barrer du texte</del> : <code>~~texte~~</code></p>
|
||||
</li>
|
||||
<li><p>On peut bien sûr tout <del><strong><em><u>combiner</u></em></strong></del> : <code>~~***__texte__***~~</code></p>
|
||||
</li>
|
||||
<li><p><sup>Mettre du texte</sup> en exposant : <code><sup>texte</sup></code></p>
|
||||
</li>
|
||||
<li><p><sub>Mettre du texte</sub> en indice : <code><sub>texte</sub></code></p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Liens</h2>
|
||||
<ul>
|
||||
<li>Les liens simples sont détectés automatiquement : <code>http://www.site.com</code></li>
|
||||
</ul>
|
||||
<p><a href="http://www.site.com">http://www.site.com</a></p>
|
||||
<ul>
|
||||
<li>Il est possible de nommer son lien : <code>[nom du lien](http://www.site.com)</code></li>
|
||||
</ul>
|
||||
<p><a href="http://www.site.com">nom du lien</a></p>
|
||||
<ul>
|
||||
<li>Les liens peuvent être internes au site de l'AE, on peut dès lors éviter d'entrer
|
||||
l'adresse complète d'une page : <code>[nom du lien](page://nomDeLaPage)</code></li>
|
||||
</ul>
|
||||
<p><a href="/page/nomDeLaPage/">nom du lien</a></p>
|
||||
<ul>
|
||||
<li>On peut également utiliser une image pour les liens :
|
||||
<code>[nom du lien](options)</code></li>
|
||||
</ul>
|
||||
<p>[nom du lien]<img src="/chemin/vers/image.png titre optionnel" alt="images/imageDuSiteAE.png">(options)</p>
|
||||
<h2>Titres</h2>
|
||||
<ul>
|
||||
<li>Plusieurs niveaux de titres sont possibles</li>
|
||||
</ul>
|
||||
<pre><code># Titre de niveau 1
|
||||
## Titre de niveau 2
|
||||
### Titre de niveau 3
|
||||
etc...
|
||||
</code></pre>
|
||||
<h1>Titre de niveau 1</h1>
|
||||
<h2>Titre de niveau 2</h2>
|
||||
<h3>Titre de niveau 3</h3>
|
||||
<p>Si le titre de votre section commence par un tilde (~) alors le texte sous la section est
|
||||
affiché par défaut caché et il est consultable grace à un bouton +/-</p>
|
||||
<h2>~Test</h2>
|
||||
<h2>Paragraphes et sauts de ligne</h2>
|
||||
<p>Un nouveau paragraphe se fait avec deux retours à la ligne.</p>
|
||||
<p>Un saut de ligne se force avec au moins deux espaces en fin de ligne.</p>
|
||||
<h2>Listes</h2>
|
||||
<p>Il est possible de créer des listes :</p>
|
||||
<ul>
|
||||
<li>ordonnées :</li>
|
||||
</ul>
|
||||
<pre><code>1. élément
|
||||
2. élément
|
||||
3. élément
|
||||
</code></pre>
|
||||
<ol>
|
||||
<li>élément</li>
|
||||
<li>élément</li>
|
||||
<li>élément</li>
|
||||
</ol>
|
||||
<p>Vous pouvez marquer plus simplement comme suit, les numéros se faisant tout seuls:</p>
|
||||
<pre><code>1. élément
|
||||
1. élément
|
||||
1. élément
|
||||
</code></pre>
|
||||
<ol>
|
||||
<li>élément</li>
|
||||
<li>élément</li>
|
||||
<li>élément</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>non ordonnées :</li>
|
||||
</ul>
|
||||
<pre><code> * élément
|
||||
* élément
|
||||
* élément
|
||||
</code></pre>
|
||||
<ul>
|
||||
<li>élément</li>
|
||||
<li>élément</li>
|
||||
<li>élément</li>
|
||||
</ul>
|
||||
<h2>Tableaux</h2>
|
||||
<p>Un tableau est obtenu en respectant la syntaxe suivante :</p>
|
||||
<pre><code>| Titre | Titre2 | Titre3 |
|
||||
|-------|--------|--------|
|
||||
| test | test | test |
|
||||
| test | test | test |
|
||||
</code></pre>
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>Titre</th>
|
||||
<th>Titre2</th>
|
||||
<th>Titre3</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>test</td>
|
||||
<td>test</td>
|
||||
<td>test</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>test</td>
|
||||
<td>test</td>
|
||||
<td>test</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>L'alignement dans les cellules est géré comme suit, avec les ':' sur la ligne en dessous du titre:</p>
|
||||
<pre><code>| Titre | Titre2 | Titre3 |
|
||||
|:-------|:------:|-------:|
|
||||
| gauche | centre | droite |
|
||||
</code></pre>
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th style="text-align:left">Titre</th>
|
||||
<th style="text-align:center">Titre2</th>
|
||||
<th style="text-align:right">Titre3</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="text-align:left">gauche</td>
|
||||
<td style="text-align:center">centre</td>
|
||||
<td style="text-align:right">droite</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Images et contenus</h2>
|
||||
<p>Une image est insérée ainsi : <code></code>
|
||||
<img src="/static/core/img/logo.png" alt="texte alternatif" title="titre optionnel"></p>
|
||||
<p>On peut lui spécifier ses dimensions de plusieurs manières:</p>
|
||||
<pre><code>
|
||||
|
||||
|
||||
</code></pre>
|
||||
<p><img src="/static/core/img/logo.png" alt="image à 50%" title="Image à 50%" style="width: 50%; "><br>
|
||||
Image à 50% de la largeur de la page.</p>
|
||||
<p><img src="/static/core/img/logo.png" alt="image de 350 pixels de large" title="Image de 350 pixels" style="width: 350px; "><br>
|
||||
Image de 350 pixels de large.</p>
|
||||
<p><img src="/static/core/img/logo.png" alt="image de 350x100 pixels" title="Image de 350x100 pixels" style="width: 350px; height: 100px; "><br>
|
||||
Image de 350x100 pixels.</p>
|
||||
<p>( devrait pouvoir détecter si vidéo ou non )</p>
|
||||
<h2>Blocs de citations</h2>
|
||||
<p>Un bloc de citation se crée ainsi :</p>
|
||||
<pre><code>> Ceci est
|
||||
> un bloc de
|
||||
> citation
|
||||
</code></pre>
|
||||
<blockquote><p>Ceci est
|
||||
un bloc de
|
||||
citation</p>
|
||||
</blockquote>
|
||||
<p>Il est possible d'intégrer de la syntaxe Markdown-AE dans un tel bloc.</p>
|
||||
<h2>Note de bas de page</h2>
|
||||
<p>On les créer comme ça<sup class="footnote-ref" id="fnref-key"><a href="#fn-key" rel="footnote">1</a></sup>:</p>
|
||||
<h2>échapper des caractères</h2>
|
||||
<ul>
|
||||
<li>Il est possible d'ignorer un caractère spécial en l'échappant à l'aide d'un \</li>
|
||||
<li>L'échappement de blocs de codes complet se fera à l'aide de balises <nosyntax></nosyntax></li>
|
||||
</ul>
|
||||
<h2>Autres ( hérité de l'ancien wiki )</h2>
|
||||
<ul>
|
||||
<li>Une ligne peut être crée avec une ligne contenant 4 tirets ( - ).</li>
|
||||
<li>Une barre de progression est crée ainsi :<blockquote><p>[[[70]]]</p>
|
||||
</blockquote>
|
||||
</li>
|
||||
<li>Notes en pied de page :<blockquote><p>((note))</p>
|
||||
</blockquote>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="footnotes">
|
||||
<hr>
|
||||
<ol><li id="fn-key"><p>ceci est le contenu de ma clef</p>
|
||||
<pre><code>Je fais une note[^clef].
|
||||
|
||||
[^clef]: je note ensuite ou je veux le contenu de ma clef qui apparaîtra quand même en bas
|
||||
</code></pre>
|
||||
<p>Vous pouvez utiliser des numéros pour nommer vos clef si vous avez la flemme.</p>
|
||||
<pre><code>Note plus complexe[^1]
|
||||
|
||||
[^1]:
|
||||
je peux même faire des blocks
|
||||
sur plusieurs lignes, comme d'habitude!
|
||||
</code></pre><p><a href="#fnref-key" rev="footnote">↩</a></p></li>
|
||||
</ol>
|
||||
</div>
|
||||
@ -2,6 +2,15 @@ Cette page vise à documenter la syntaxe *Markdown* utilisée sur le site.
|
||||
|
||||
# Markdown-AE Documentation
|
||||
|
||||
Le Markdown le plus standard se trouve documenté ici:
|
||||
https://daringfireball.net/projects/markdown/syntax .
|
||||
Si cette page n'est pas exhaustive vis à vis de la syntaxe du site AE,
|
||||
elle a au moins le mérite de bien documenter le Markdown original.
|
||||
|
||||
Le réel parseur du site AE est une version tunée de [mistune](https://github.com/lepture/mistune).
|
||||
Les plus aventureux pourront aller lire ses [tests](https://github.com/lepture/mistune/blob/master/tests/fixtures)
|
||||
afin d'en connaître la syntaxe le plus finement possible.
|
||||
En pratique, cette page devrait déjà résumer une bonne partie.
|
||||
|
||||
## Basique
|
||||
|
||||
@ -13,10 +22,11 @@ Cette page vise à documenter la syntaxe *Markdown* utilisée sur le site.
|
||||
|
||||
* ~~Barrer du texte~~ : `~~texte~~`
|
||||
|
||||
* ^Mettre du texte^ en ^exposant : `^mot` ou `^texte^`
|
||||
* On peut bien sûr tout ~~***__combiner__***~~ : `~~***__texte__***~~`
|
||||
|
||||
* _Mettre du texte_ en _indice : `_mot` ou `_texte_`
|
||||
* <sup>Mettre du texte</sup> en exposant : `<sup>texte</sup>`
|
||||
|
||||
* <sub>Mettre du texte</sub> en indice : `<sub>texte</sub>`
|
||||
|
||||
|
||||
## Liens
|
||||
@ -30,9 +40,9 @@ http://www.site.com
|
||||
[nom du lien](http://www.site.com)
|
||||
|
||||
* Les liens peuvent être internes au site de l'AE, on peut dès lors éviter d'entrer
|
||||
l'adresse complète d'une page : `[nom du lien](article://nomDeLaPage)`
|
||||
l'adresse complète d'une page : `[nom du lien](page://nomDeLaPage)`
|
||||
|
||||
[nom du lien](article://nomDeLaPage)
|
||||
[nom du lien](page://nomDeLaPage)
|
||||
|
||||
* On peut également utiliser une image pour les liens :
|
||||
`[nom du lien](options)`
|
||||
@ -58,6 +68,14 @@ etc...
|
||||
Si le titre de votre section commence par un tilde (~) alors le texte sous la section est
|
||||
affiché par défaut caché et il est consultable grace à un bouton +/-
|
||||
|
||||
## ~Test
|
||||
|
||||
## Paragraphes et sauts de ligne
|
||||
|
||||
Un nouveau paragraphe se fait avec deux retours à la ligne.
|
||||
|
||||
Un saut de ligne se force avec au moins deux espaces en fin de ligne.
|
||||
|
||||
|
||||
## Listes
|
||||
|
||||
@ -81,7 +99,13 @@ Vous pouvez marquer plus simplement comme suit, les numéros se faisant tout seu
|
||||
1. élément
|
||||
```
|
||||
|
||||
1. élément
|
||||
1. élément
|
||||
1. élément
|
||||
|
||||
|
||||
* non ordonnées :
|
||||
|
||||
```
|
||||
* élément
|
||||
* élément
|
||||
@ -94,7 +118,7 @@ Vous pouvez marquer plus simplement comme suit, les numéros se faisant tout seu
|
||||
|
||||
## Tableaux
|
||||
|
||||
Un tableau est obtenu en respectant la syntax suivante :
|
||||
Un tableau est obtenu en respectant la syntaxe suivante :
|
||||
|
||||
```
|
||||
| Titre | Titre2 | Titre3 |
|
||||
@ -107,25 +131,42 @@ Un tableau est obtenu en respectant la syntax suivante :
|
||||
| test | test | test |
|
||||
| test | test | test |
|
||||
|
||||
L'alignement dans les cellules est géré en mettant des espaces à droite ou a gauche des chaines de caractères contenues dans chaque case.
|
||||
L'alignement dans les cellules est géré comme suit, avec les ':' sur la ligne en dessous du titre:
|
||||
|
||||
```
|
||||
| Titre | Titre2 | Titre3 |
|
||||
|-------|--------|--------|
|
||||
|gauche | centre | droite|
|
||||
| Titre | Titre2 | Titre3 |
|
||||
|:-------|:------:|-------:|
|
||||
| gauche | centre | droite |
|
||||
```
|
||||
| Titre | Titre2 | Titre3 |
|
||||
|-------|--------|--------|
|
||||
|gauche | centre | droite|
|
||||
| Titre | Titre2 | Titre3 |
|
||||
|:-------|:------:|-------:|
|
||||
| gauche | centre | droite |
|
||||
|
||||
|
||||
## Images et contenus
|
||||
|
||||
Une image est insérée ainsi : `(options)`
|
||||
(options)
|
||||
Une image est insérée ainsi : ``
|
||||
|
||||
|
||||
On peut lui spécifier ses dimensions de plusieurs manières:
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
Image à 50% de la largeur de la page.
|
||||
|
||||
|
||||
Image de 350 pixels de large.
|
||||
|
||||
|
||||
Image de 350x100 pixels.
|
||||
|
||||
( devrait pouvoir détecter si vidéo ou non )
|
||||
( TODO : parametres )
|
||||
|
||||
## Blocs de citations
|
||||
|
||||
@ -142,7 +183,26 @@ Un bloc de citation se crée ainsi :
|
||||
|
||||
Il est possible d'intégrer de la syntaxe Markdown-AE dans un tel bloc.
|
||||
|
||||
## Note de bas de page
|
||||
|
||||
On les créer comme ça[^key]:
|
||||
|
||||
[^key]: ceci est le contenu de ma clef
|
||||
```
|
||||
Je fais une note[^clef].
|
||||
|
||||
[^clef]: je note ensuite ou je veux le contenu de ma clef qui apparaîtra quand même en bas
|
||||
```
|
||||
Vous pouvez utiliser des numéros pour nommer vos clef si vous avez la flemme.
|
||||
|
||||
```
|
||||
Note plus complexe[^1]
|
||||
|
||||
[^1]:
|
||||
je peux même faire des blocks
|
||||
sur plusieurs lignes, comme d'habitude!
|
||||
|
||||
```
|
||||
|
||||
## échapper des caractères
|
||||
|
||||
@ -160,3 +220,4 @@ Il est possible d'intégrer de la syntaxe Markdown-AE dans un tel bloc.
|
||||
> ((note))
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user