convert content to md

1 files changed, 68 insertions, 64 deletions

diff --git a/files/fr/web/css/display-legacy/index.md b/files/fr/web/css/display-legacy/index.md
index 759ab90d24..35894b40a8 100644
--- a/files/fr/web/css/display-legacy/index.md
+++ b/files/fr/web/css/display-legacy/index.md
@@ -7,95 +7,99 @@ tags:
   - Type de donnée
 translation_of: Web/CSS/display-legacy
 ---
-<div>{{CSSRef}}</div>
-
-<p>CSS 2 utilisant une syntaxe avec un seul mot-clé comme valeur pour la propriété <code>display</code>, il fallait plusieurs mots-clés pour les différentes variantes bloc/en ligne d'un même mode. Cette page décrit ces valeurs.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<dl>
- <dt><code>inline-block</code></dt>
- <dd>L'élément s'inscrit dans le contenu environnant comme une boîte en ligne et organise son propre contenu en bloc.<br>
- <br>
- Ce mot-clé est équivalent à la combinaison <code>inline flow-root</code>.</dd>
- <dt><code>inline-table</code></dt>
- <dd>La valeur <code>inline-table</code> n'a pas de correspondance directe en HTML. Un tel élément se comporte comme un élément HTML {{HTMLElement("table")}} avec une boîte en ligne et pas de bloc. À l'intérieur de la boîte de tableau, on aura un contexte de bloc.<br>
- <br>
- Ce mot-clé est équivalent à la combinaison <code>inline table</code>.</dd>
- <dt><code>inline-flex</code></dt>
- <dd>L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des boîtes flexibles.<br>
- <br>
- Ce mot-clé est équivalent à la combinaison <code>inline flex</code>.</dd>
- <dt><code>inline-grid</code></dt>
- <dd>L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des grilles CSS.<br>
- <br>
- Ce mot-clé est équivalent à la combinaison <code>inline grid</code>.</dd>
-</dl>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+{{CSSRef}}
+
+CSS 2 utilisant une syntaxe avec un seul mot-clé comme valeur pour la propriété `display`, il fallait plusieurs mots-clés pour les différentes variantes bloc/en ligne d'un même mode. Cette page décrit ces valeurs.
+
+## Syntaxe
+
+- `inline-block`
+
+  - : L'élément s'inscrit dans le contenu environnant comme une boîte en ligne et organise son propre contenu en bloc.
+
+    Ce mot-clé est équivalent à la combinaison `inline flow-root`.
+
+- `inline-table`
+
+  - : La valeur `inline-table` n'a pas de correspondance directe en HTML. Un tel élément se comporte comme un élément HTML {{HTMLElement("table")}} avec une boîte en ligne et pas de bloc. À l'intérieur de la boîte de tableau, on aura un contexte de bloc.
+
+    Ce mot-clé est équivalent à la combinaison `inline table`.
+
+- `inline-flex`
+
+  - : L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des boîtes flexibles.
+
+    Ce mot-clé est équivalent à la combinaison `inline flex`.
+
+- `inline-grid`
+
+  - : L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des grilles CSS.
+
+    Ce mot-clé est équivalent à la combinaison `inline grid`.
+
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique <code>inline-flex</code>.</p>
+Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique `inline-flex`.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.container {
+```css
+.container {
   display: inline-flex;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;div&gt;Élément flexible&lt;/div&gt;
-  &lt;div&gt;Élément flexible&lt;/div&gt;
-&lt;/div&gt;
+```html
+<div class="container">
+  <div>Élément flexible</div>
+  <div>Élément flexible</div>
+</div>
 
 Pas d'élément flexible
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 300, 150)}}</p>
-</div>
+{{EmbedLiveSample("Exemples", 300, 150)}}
 
-<p>Avec la nouvelle syntaxe, on peut décrire le conteneur avec deux valeurs : la première pour le mode d'affichage extérieure (<code>inline</code>) et la seconde pour le mode d'affichage intérieur (<code>flex</code>).</p>
+Avec la nouvelle syntaxe, on peut décrire le conteneur avec deux valeurs : la première pour le mode d'affichage extérieure (`inline`) et la seconde pour le mode d'affichage intérieur (`flex`).
 
-<pre class="brush: css">.container {
+```css
+.container {
   display: inline flex;
-}</pre>
+}
+```
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+### Prise en charge de `inline-block`
 
-<h3 id="Prise_en_charge_de_inline-block">Prise en charge de <code>inline-block</code></h3>
+{{Compat("css.properties.display.inline-block", 10)}}
 
-<p>{{Compat("css.properties.display.inline-block", 10)}}</p>
+### Prise en charge de `inline-table`
 
-<h3 id="Prise_en_charge_de_inline-table">Prise en charge de <code>inline-table</code></h3>
+{{Compat("css.properties.display.inline-table", 10)}}
 
-<p>{{Compat("css.properties.display.inline-table", 10)}}</p>
+### Prise en charge de `inline-flex`
 
-<h3 id="Prise_en_charge_de_inline-flex">Prise en charge de <code>inline-flex</code></h3>
+{{Compat("css.properties.display.inline-flex", 10)}}
 
-<p>{{Compat("css.properties.display.inline-flex", 10)}}</p>
+### Prise en charge de `inline-grid`
 
-<h3 id="Prise_en_charge_de_inline-grid">Prise en charge de <code>inline-grid</code></h3>
+{{Compat("css.properties.display.inline-grid", 10)}}
 
-<p>{{Compat("css.properties.display.inline-grid", 10)}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- {{CSSxRef("display")}}
 
-<ul>
- <li>{{CSSxRef("display")}}
-  <ul>
-   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
-  </ul>
- </li>
-</ul>
+  - {{CSSxRef("&lt;display-outside&gt;")}}
+  - {{CSSxRef("&lt;display-inside&gt;")}}
+  - {{CSSxRef("&lt;display-listitem&gt;")}}
+  - {{CSSxRef("&lt;display-internal&gt;")}}
+  - {{CSSxRef("&lt;display-box&gt;")}}