Sith/core/fixtures/SYNTAX.html

<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://www.markdownguide.org/basic-syntax">https://www.markdownguide.org/basic-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/kivikakk/comrak">comrak</a>.</p>
<h2>Basique</h2>
<ul>
<li>Mettre le texte en <strong>gras</strong> : <code>**texte**</code></li>
<li>Mettre le texte en <em>italique</em> : <code>*texte*</code></li>
<li><u>Souligner</u> le texte : <code>__texte__</code></li>
<li><del>Barrer du texte</del> : <code>~~texte~~</code></li>
<li>On peut bien sûr tout <del><em><strong><u>combiner</u></strong></em></del> : <code>~~***__texte__***~~</code></li>
<li>Mettre du texte<sup>en exposant</sup> : <code>&lt;sup&gt;texte&lt;/sup&gt;</code></li>
<li>Mettre du texte<sub>en indice</sub> : <code>&lt;sub&gt;texte&lt;/sub&gt;</code></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]![images/imageDuSiteAE.png](/chemin/vers/image.png titre optionnel)(options)</code></li>
</ul>
<p>[nom du lien]![images/imageDuSiteAE.png](/chemin/vers/image.png titre optionnel)(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>
<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>
<h3>ordonnées :</h3>
<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>
<h3>non ordonnées :</h3>
<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 align="left">Titre</th>
<th align="center">Titre2</th>
<th align="right">Titre3</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">gauche</td>
<td align="center">centre</td>
<td align="right">droite</td>
</tr>
</tbody>
</table>
<h2>Images et contenus</h2>
<p>Une image est insérée ainsi : <code>![texte alternatif](/chemin/vers/image.png &quot;titre optionnel&quot;)</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>![image à 50%](/static/core/img/logo.png?50% &quot;Image à 50%&quot;)
![image de 350 pixels de large](/static/core/img/logo.png?350 &quot;Image de 350 pixels&quot;)
![image de 350x100 pixels](/static/core/img/logo.png?350x100 &quot;Image de 350x100 pixels&quot;)
</code></pre>
<p><img src="/static/core/img/logo.png" style="width:50%" alt="image à 50%" title="Image à 50%" /><br />
Image à 50% de la largeur de la page.</p>
<p><img src="/static/core/img/logo.png" style="width:350px" alt="image de 350 pixels de large" title="Image de 350 pixels" /><br />
Image de 350 pixels de large.</p>
<p><img src="/static/core/img/logo.png" style="width:350px;height:100px" alt="image de 350x100 pixels" title="Image de 350x100 pixels" /><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>&gt; Ceci est
&gt; un bloc de
&gt; 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ée comme ça<sup class="footnote-ref"><a href="#fn-key" id="fnref-key" data-footnote-ref>1</a></sup>:</p>
<pre><code>Je fais une note[^clef].

[^clef]: je note ensuite où je veux le contenu de ma clef qui apparaîtra quand même en bas
</code></pre>
<p>Vous pouvez aussi utiliser des numéros pour nommer vos clefs.</p>
<pre><code>Note plus complexe[^1]

[^1]:
    je peux même faire des blocs
    sur plusieurs lignes, comme d'habitude!
</code></pre>
<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 &lt;nosyntax&gt;&lt;/nosyntax&gt;</li>
</ul>
<h2>Autres (hérité de l’ancien wiki)</h2>
<p>Une ligne peut être créée avec une ligne contenant 4 tirets (<code>----</code>).</p>
<section class="footnotes" data-footnotes>
<ol>
<li id="fn-key">
<p>ceci est le contenu de ma clef <a href="#fnref-key" class="footnote-backref" data-footnote-backref data-footnote-backref-idx="1" aria-label="Back to reference 1">↩</a></p>
</li>
</ol>
</section>