convert content to md

15 files changed, 422 insertions, 379 deletions

diff --git a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md
index 2fa7a52da1..b4abf46df9 100644
--- a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md
+++ b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md
@@ -11,34 +11,36 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Basic_scissoring
 original_slug: Web/API/WebGL_API/By_example/Appliquer_des_découpes_simples
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}
 
-<p>Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (<em>scissoring</em>).</p>
+Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (_scissoring_).
 
-<p>{{EmbedLiveSample("Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe",660,330)}}</p>
+{{EmbedLiveSample("Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe",660,330)}}
 
-<h3 id="Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe">Appliquer les changements sur le <em>buffer</em> lors de la découpe</h3>
+### Appliquer les changements sur le _buffer_ lors de la découpe
 
-<p>Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}.</p>
+Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}.
 
-<p>La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (<em>buffer</em>) de dessin. La commande  {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné.</p>
+La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (_buffer_) de dessin. La commande  {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné.
 
-<p>Cet article représente une excellente occasion pour distinguer les <em>pixels</em> des <em>fragments</em>. Un pixel est un élément d'une image (en pratique c'est un point) sur l'écran ou un élément unique du tampon de dessin (l'espace mémoire qui contient les données relatives aux pixels comme les différentes composantes couleur). Un <em>fragment</em> fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}.</p>
+Cet article représente une excellente occasion pour distinguer les _pixels_ des _fragments_. Un pixel est un élément d'une image (en pratique c'est un point) sur l'écran ou un élément unique du tampon de dessin (l'espace mémoire qui contient les données relatives aux pixels comme les différentes composantes couleur). Un _fragment_ fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}.
 
-<p>Cette distinction existe car la couleur d'un fragment (et ses autres caractéristiques comme la profondeur) peut être manipulée et modifiée à plusieurs reprises avant d'être écrite à l'écran. On a déjà vu comment la couleur d'un fragment pouvait être modifiée au cours des opérations graphiques en appliquant un {{domxref("WebGLRenderingContext.colorMask()","masque de couleur", "", 1)}}. Il existe d'autres cas où les fragments sont ignorés (le pixel n'est pass mis à jour) ou d'autres où ils interagissent avec la valeur du pixel existant (afin de fusionner les couleurs pour les éléments transparents qui composent une scène).</p>
+Cette distinction existe car la couleur d'un fragment (et ses autres caractéristiques comme la profondeur) peut être manipulée et modifiée à plusieurs reprises avant d'être écrite à l'écran. On a déjà vu comment la couleur d'un fragment pouvait être modifiée au cours des opérations graphiques en appliquant un {{domxref("WebGLRenderingContext.colorMask()","masque de couleur", "", 1)}}. Il existe d'autres cas où les fragments sont ignorés (le pixel n'est pass mis à jour) ou d'autres où ils interagissent avec la valeur du pixel existant (afin de fusionner les couleurs pour les éléments transparents qui composent une scène).
 
-<p>Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de  {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran.</p>
+Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de  {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran.
 
-<p>Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode  {{domxref("WebGLRenderingContext.enable","enable()")}} (<code>enable()</code> sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante <code>SCISSOR_TEST</code>. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici <code>clear()</code>) pour commencer le processus de traitement des fragments.</p>
+Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode  {{domxref("WebGLRenderingContext.enable","enable()")}} (`enable()` sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante `SCISSOR_TEST`. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici `clear()`) pour commencer le processus de traitement des fragments.
 
-<pre class="brush: html">&lt;p&gt;Le résultat de la découpe.&lt;/p&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur
-    ne supporte pas l'élément canvas.&lt;/canvas&gt;
-</pre>
+```html
+<p>Le résultat de la découpe.</p>
+<canvas>Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.</canvas>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 canvas {
@@ -50,9 +52,10 @@ canvas {
   border : none;
   background-color : black;
 }
-</pre>
+```
 
-<pre class="brush: js">window.addEventListener("load", function setupWebGL (evt) {
+```js
+window.addEventListener("load", function setupWebGL (evt) {
   "use strict"
   window.removeEventListener(evt.type, setupWebGL, false);
   var paragraph = document.querySelector("p");
@@ -84,8 +87,8 @@ canvas {
   gl.clearColor(1.0, 1.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/basic-scissoring">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/basic-scissoring).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}
diff --git a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md
index 406d868fbd..5a007a9434 100644
--- a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md
+++ b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md
@@ -10,48 +10,46 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Boilerplate_1
 original_slug: Web/API/WebGL_API/By_example/Modèle_1
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}
 
-<p>Dans cet article, on décrit les fragments de code qui seront réutilisés pour les exemples suivants (où ils seront masqués pour une meilleur lisibilité). Parmi ce code, on définit une fonction JavaScript utilitaire qui permet de simplifier l'initialisation de WebGL.</p>
+Dans cet article, on décrit les fragments de code qui seront réutilisés pour les exemples suivants (où ils seront masqués pour une meilleur lisibilité). Parmi ce code, on définit une fonction JavaScript utilitaire qui permet de simplifier l'initialisation de WebGL.
 
-<p>{{EmbedLiveSample("Socle_pour_l'initialisation_du_contexte_WebGL",660,400)}}</p>
+{{EmbedLiveSample("Socle_pour_l'initialisation_du_contexte_WebGL",660,400)}}
 
-<h2 id="Socle_pour_l'initialisation_du_contexte_WebGL">Socle pour l'initialisation du contexte WebGL</h2>
+## Socle pour l'initialisation du contexte WebGL
 
-<p>Nous avons vu plusieurs fois les mêmes morceaux de {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("JavaScript")}}. Nous allons donc les cacher par la suite afin de mieux nous concentrer sur les parties du code qui sont pertinentes pour l'apprentissage de {{Glossary("WebGL")}}.</p>
+Nous avons vu plusieurs fois les mêmes morceaux de {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("JavaScript")}}. Nous allons donc les cacher par la suite afin de mieux nous concentrer sur les parties du code qui sont pertinentes pour l'apprentissage de {{Glossary("WebGL")}}.
 
-<p>Plus précisément, le code HTML contiendra</p>
+Plus précisément, le code HTML contiendra
 
-<ul>
- <li>Un élément {{HTMLElement("p")}} qui décrira l'exemple et qui permettra d'afficher des messages d'erreur</li>
- <li>Un élément {{HTMLElement("canvas")}}</li>
- <li>Un bouton (élément {{HTMLElement("button")}})</li>
-</ul>
+- Un élément {{HTMLElement("p")}} qui décrira l'exemple et qui permettra d'afficher des messages d'erreur
+- Un élément {{HTMLElement("canvas")}}
+- Un bouton (élément {{HTMLElement("button")}})
 
-<p>Les règles CSS s'appliqueront aux éléments <code>body</code>, <code>canvas</code> et <code>button</code>. Les éléments supplémentaires pour le code CSS et HTML seront détaillés dans les pages des exemples concernés.</p>
+Les règles CSS s'appliqueront aux éléments `body`, `canvas` et `button`. Les éléments supplémentaires pour le code CSS et HTML seront détaillés dans les pages des exemples concernés.
 
-<p>Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript <code>getRenderingContext</code> pour initialiser {{domxref("WebGLRenderingContext","le contexte de rendu WebGL", "", 1)}}. Grâce aux exemples précédents, vous devriez pouvoir comprendre le rôle de cette fonction. Pour résumer, celle-ci</p>
+Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript `getRenderingContext` pour initialiser {{domxref("WebGLRenderingContext","le contexte de rendu WebGL", "", 1)}}. Grâce aux exemples précédents, vous devriez pouvoir comprendre le rôle de cette fonction. Pour résumer, celle-ci
 
-<ul>
- <li>Obtient le contexte de rendu de la part de l'élément <code>canvas</code></li>
- <li>Initialise le buffer de dessin</li>
- <li>Nettoie le buffer avec <code>clear</code></li>
- <li>Applique le contexte initialisé</li>
-</ul>
+- Obtient le contexte de rendu de la part de l'élément `canvas`
+- Initialise le buffer de dessin
+- Nettoie le buffer avec `clear`
+- Applique le contexte initialisé
 
-<p>S'il y a une erreur, la fonction affiche un message d'erreur et renvoie <code>null</code>.</p>
+S'il y a une erreur, la fonction affiche un message d'erreur et renvoie `null`.
 
-<p>Enfin, tout le code JavaScript est exécuté par une fonction immédiatement appelée (une technique plutôt commune avec JavaScript). La déclaration de la fonction et son invocation seront cachées.</p>
+Enfin, tout le code JavaScript est exécuté par une fonction immédiatement appelée (une technique plutôt commune avec JavaScript). La déclaration de la fonction et son invocation seront cachées.
 
-<pre class="brush: html">&lt;p&gt;[ Un texte qui décrit l'exemple. ]&lt;/p&gt;
-&lt;button&gt;[ Un bouton optionnel pour les interactions. ]&lt;/button&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur ne supporte
-    pas le canevas HTML5.&lt;/canvas&gt;
-</pre>
+```html
+<p>[ Un texte qui décrit l'exemple. ]</p>
+<button>[ Un bouton optionnel pour les interactions. ]</button>
+<canvas>Il semblerait que votre navigateur ne supporte
+    pas le canevas HTML5.</canvas>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 canvas {
@@ -69,9 +67,10 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: js">function getRenderingContext() {
+```js
+function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
@@ -91,8 +90,8 @@ button {
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
 }
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/boilerplate-1">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/boilerplate-1).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}
diff --git a/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md
index 99c382c0ac..684a36a260 100644
--- a/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md
+++ b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md
@@ -10,32 +10,34 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Canvas_size_and_WebGL
 original_slug: Web/API/WebGL_API/By_example/Tailles_de_canvas_et_WebGL
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}
 
-<p>{{EmbedLiveSample("Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL",660,180)}}</p>
+{{EmbedLiveSample("Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL",660,180)}}
 
-<p>Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille {{Glossary("CSS")}} (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.</p>
+Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille {{Glossary("CSS")}} (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.
 
-<h3 id="Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL">Les effets liés à la taille du canevas sur le rendu avec WebGL</h3>
+### Les effets liés à la taille du canevas sur le rendu avec WebGL
 
-<p>Grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} on peut démontrer que le tampon (<em>buffer</em>) de dessin WebGL est affecté par la taille du canevas (l'élément HTML <code>canvas</code>).</p>
+Grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} on peut démontrer que le tampon (_buffer_) de dessin WebGL est affecté par la taille du canevas (l'élément HTML `canvas`).
 
-<p>La taille du premier canevas est définie avec la taille de l'élément, mis en forme, qui est déterminée par {{Glossary("CSS")}}. Pour cela, on affecte respectivement les valeurs {{domxref("Element.clientWidth","clientWidth")}} and {{domxref("Element.clientHeight","clientHeight")}} aux propriétés {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}}.</p>
+La taille du premier canevas est définie avec la taille de l'élément, mis en forme, qui est déterminée par {{Glossary("CSS")}}. Pour cela, on affecte respectivement les valeurs {{domxref("Element.clientWidth","clientWidth")}} and {{domxref("Element.clientHeight","clientHeight")}} aux propriétés {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}}.
 
-<p>Pour le deuxième canevas, on n'applique pas ce traitement, c'est donc les dimensions internes du canevas : {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}} qui sont prises en compte. Celles-ci sont différentes des dimensions de l'élément <code>canvas</code> affiché dans le fenêtre du navigateur.</p>
+Pour le deuxième canevas, on n'applique pas ce traitement, c'est donc les dimensions internes du canevas : {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}} qui sont prises en compte. Celles-ci sont différentes des dimensions de l'élément `canvas` affiché dans le fenêtre du navigateur.
 
-<p>L'effet devient visible quand on utilise les méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} pour dessiner un carré au centre du canevas en définissant sa position et sa taille en pixels. Dans le premier canevas, on obtient bien le bon résultat et dans le deuxième, on a la mauvaise forme, la mauvaise taille et la mauvaise position.</p>
+L'effet devient visible quand on utilise les méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} pour dessiner un carré au centre du canevas en définissant sa position et sa taille en pixels. Dans le premier canevas, on obtient bien le bon résultat et dans le deuxième, on a la mauvaise forme, la mauvaise taille et la mauvaise position.
 
-<pre class="brush: html">&lt;p&gt;On compare les deux canevas.&lt;/p&gt;
-&lt;canvas&gt;Votre navigateur ne semble pas
-    supporter l'élément HTML5 canvas.&lt;/canvas&gt;
-&lt;canvas&gt;Votre navigateur ne semble pas
-    supporter l'élément HTML5 canvas.&lt;/canvas&gt;
-</pre>
+```html
+<p>On compare les deux canevas.</p>
+<canvas>Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.</canvas>
+<canvas>Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.</canvas>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 canvas {
@@ -46,9 +48,10 @@ canvas {
   border : none;
   background-color : black;
 }
-</pre>
+```
 
-<pre class="brush: js">window.addEventListener("load", function() {
+```js
+window.addEventListener("load", function() {
   "use strict"
   var firstCanvas = document.getElementsByTagName("canvas")[0],
     secondCanvas = document.getElementsByTagName("canvas")[1];
@@ -76,8 +79,8 @@ canvas {
     gl.clear(gl.COLOR_BUFFER_BIT);
   });
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/canvas-size-and-webgl">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/canvas-size-and-webgl).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}
diff --git a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md
index 91c858dcec..82f6d06ef7 100644
--- a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md
+++ b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md
@@ -11,30 +11,32 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Clearing_by_clicking
 original_slug: Web/API/WebGL_API/By_example/Appliquer_une_couleur_à_la_souris
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}
 
-<p>Dans cet article, on voit comment combiner les interactions de l'utilisateur et les opérations graphiques. Plus précisément, dans cet exemple, chaque clic de l'utilisateur déclenchera l'application d'une couleur aléatoire dans le contexte de rendu.</p>
+Dans cet article, on voit comment combiner les interactions de l'utilisateur et les opérations graphiques. Plus précisément, dans cet exemple, chaque clic de l'utilisateur déclenchera l'application d'une couleur aléatoire dans le contexte de rendu.
 
-<p>{{EmbedLiveSample("Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu",660,410)}}</p>
+{{EmbedLiveSample("Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu",660,410)}}
 
-<h3 id="Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu">Appliquer des couleurs aléatoires dans le contexte de rendu</h3>
+### Appliquer des couleurs aléatoires dans le contexte de rendu
 
-<p>Cet exemple illustre simplement comment associer WebGL aux interactions utilisateur. Chaque fois que l'utilisateur cliquera sur le canevas ou sur le bouton, une couleur aléatoire sera appliquée sur le contexte de rendu.</p>
+Cet exemple illustre simplement comment associer WebGL aux interactions utilisateur. Chaque fois que l'utilisateur cliquera sur le canevas ou sur le bouton, une couleur aléatoire sera appliquée sur le contexte de rendu.
 
-<p>Ici, on montre comment on place les appels aux fonctions WebGL dans la fonction qui gère les événements :</p>
+Ici, on montre comment on place les appels aux fonctions WebGL dans la fonction qui gère les événements :
 
-<pre class="brush: html">&lt;p&gt;Un programme WebGL très simple qui affiche des couleurs
-    suite aux interactions utilisateur.&lt;/p&gt;
-&lt;p&gt;Vous pouvez cliquer sur le canevas ou sur le bouton pour
-    modifier la couleur.&lt;/p&gt;
-&lt;canvas id="canvas-view"&gt;Il semblerait que votre navigateur
-    ne supporte pas l'élément canvas.&lt;/canvas&gt;
-&lt;button id="color-switcher"&gt;Cliquez ici pour changer la couleur&lt;/button&gt;
-</pre>
+```html
+<p>Un programme WebGL très simple qui affiche des couleurs
+    suite aux interactions utilisateur.</p>
+<p>Vous pouvez cliquer sur le canevas ou sur le bouton pour
+    modifier la couleur.</p>
+<canvas id="canvas-view">Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.</canvas>
+<button id="color-switcher">Cliquez ici pour changer la couleur</button>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 button {
@@ -52,9 +54,10 @@ canvas {
   border : none;
   background-color : black;
 }
-</pre>
+```
 
-<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+```js
+// On exécute tout dans le gestionnaire d'événement
 // correspondant au chargement de la fenêtre. De cette
 // façon, le DOM est complètement chargé et mis en forme
 // avant de le manipuler et d'encombrer la portée globale.
@@ -116,8 +119,8 @@ window.addEventListener("load", function setupWebGL (evt) {
   }
 
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/clearing-by-clicking">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/clearing-by-clicking).
 
-<div>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}</div>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}
diff --git a/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.md b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.md
index fd92c8ce1c..b185bbd89d 100644
--- a/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.md
+++ b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.md
@@ -11,32 +11,34 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Clearing_with_colors
 original_slug: Web/API/WebGL_API/By_example/Appliquer_des_couleurs
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}
 
-<p>Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.</p>
+Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.
 
-<p>{{EmbedLiveSample("Appliquer_une_couleur_unie_dans_le_contexte_WebGL",660,300)}}</p>
+{{EmbedLiveSample("Appliquer_une_couleur_unie_dans_le_contexte_WebGL",660,300)}}
 
-<h3 id="Appliquer_une_couleur_unie_dans_le_contexte_WebGL">Appliquer une couleur unie dans le contexte WebGL</h3>
+### Appliquer une couleur unie dans le contexte WebGL
 
-<p>Voici l'application la plus simple de {{Glossary("WebGL")}} : appliquer un vert uni dans le {{domxref("WebGLRenderingContext","contexte de rendu")}}. On notera que la feuille de style {{Glossary("CSS")}} définit l'arrière-plan comme étant noir. Ainsi, quand le canevas s'affiche en vert, on sait que {{Glossary("WebGL")}} a fonctionné comme il fallait.</p>
+Voici l'application la plus simple de {{Glossary("WebGL")}} : appliquer un vert uni dans le {{domxref("WebGLRenderingContext","contexte de rendu")}}. On notera que la feuille de style {{Glossary("CSS")}} définit l'arrière-plan comme étant noir. Ainsi, quand le canevas s'affiche en vert, on sait que {{Glossary("WebGL")}} a fonctionné comme il fallait.
 
-<p>Par ailleurs, vous pouvez remarquer que, pour appliquer une couleur unie sur le tampon (<em>buffer</em>) de dessin, on utilise deux étapes. Tout d'abord, on applique la couleur verte grâce à la méthode {{domxref("WebGLRenderingContext.clearColor()","clearColor()")}}. Cette opération ne modifie que l'état interne de {{Glossary("WebGL")}}, rien n'est peint/affiché pour le moment. Ensuite, on dessine « réellement » avec la méthode {{domxref("WebGLRenderingContext.clear()","clear()")}}. C'est la méthode classique pour dessiner avec WebGL. Il y a seulement quelques méthodes qui « dessinent » (dont <code>clear()</code>), toutes les autres méthodes permettent d'obtenir ou de modifier les variables liées aux états de WebGL (dont la couleur à appliquer).</p>
+Par ailleurs, vous pouvez remarquer que, pour appliquer une couleur unie sur le tampon (_buffer_) de dessin, on utilise deux étapes. Tout d'abord, on applique la couleur verte grâce à la méthode {{domxref("WebGLRenderingContext.clearColor()","clearColor()")}}. Cette opération ne modifie que l'état interne de {{Glossary("WebGL")}}, rien n'est peint/affiché pour le moment. Ensuite, on dessine « réellement » avec la méthode {{domxref("WebGLRenderingContext.clear()","clear()")}}. C'est la méthode classique pour dessiner avec WebGL. Il y a seulement quelques méthodes qui « dessinent » (dont `clear()`), toutes les autres méthodes permettent d'obtenir ou de modifier les variables liées aux états de WebGL (dont la couleur à appliquer).
 
-<p>Il existe de nombreuses options pour modifier les états {{Glossary("WebGL")}}. La couleur à appliquer en est une parmi d'autres.{{Glossary("WebGL")}}/{{Glossary("OpenGL")}} est souvent qualifié d'automate à états. En fait, lorsque vous manipulez ces variables internes, ces « interrupteurs », vous modifiez l'état interne de WebGL, qui modifie à son tour la façon dont la sortie est retranscrite (dans cet exemple, cela correspond à l'étape où les pixels sont passés en vert).</p>
+Il existe de nombreuses options pour modifier les états {{Glossary("WebGL")}}. La couleur à appliquer en est une parmi d'autres.{{Glossary("WebGL")}}/{{Glossary("OpenGL")}} est souvent qualifié d'automate à états. En fait, lorsque vous manipulez ces variables internes, ces « interrupteurs », vous modifiez l'état interne de WebGL, qui modifie à son tour la façon dont la sortie est retranscrite (dans cet exemple, cela correspond à l'étape où les pixels sont passés en vert).
 
-<p>Enfin, vous pouvez voir que les couleurs manipulées en WebGL sont décrites avec le format {{Glossary("RGBA")}}. Ce format décrit quatre composantes numériques pour les intensités respectives des tons rouge (R), vert (<em>green</em> G), bleu (B) et alpha (qui correspond à l'opacité). C'est pour ça que <code>clearColor()</code> prend quatre arguments.</p>
+Enfin, vous pouvez voir que les couleurs manipulées en WebGL sont décrites avec le format {{Glossary("RGBA")}}. Ce format décrit quatre composantes numériques pour les intensités respectives des tons rouge (R), vert (_green_ G), bleu (B) et alpha (qui correspond à l'opacité). C'est pour ça que `clearColor()` prend quatre arguments.
 
-<pre class="brush: html">&lt;p&gt;Un programme WebGL très simple qui affiche une couleur.&lt;/p&gt;
-&lt;!-- Le texte d'un élément canvas est affiché uniquement
-    si canvas n'est pas supporté. --&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
-    le canevas HTML5&lt;/canvas&gt;
-</pre>
+```html
+<p>Un programme WebGL très simple qui affiche une couleur.</p>
+<!-- Le texte d'un élément canvas est affiché uniquement
+    si canvas n'est pas supporté. -->
+<canvas>Il semblerait que votre navigateur ne supporte pas
+    le canevas HTML5</canvas>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 canvas {
@@ -48,9 +50,10 @@ canvas {
   border : none;
   background-color : black;
 }
-</pre>
+```
 
-<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+```js
+// On exécute tout dans le gestionnaire d'événement
 // correspondant au chargement de la fenêtre. De cette
 // façon, le DOM est complètement chargé et mis en forme
 // avant de le manipuler et d'encombrer la portée globale.
@@ -94,8 +97,8 @@ window.addEventListener("load", function setupWebGL (evt) {
   gl.clear(gl.COLOR_BUFFER_BIT);
 
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/clearing-with-colors">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/clearing-with-colors).
 
-<div>{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}</div>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}
diff --git a/files/fr/web/api/webgl_api/by_example/color_masking/index.md b/files/fr/web/api/webgl_api/by_example/color_masking/index.md
index f5ef6779ef..61afaba6f3 100644
--- a/files/fr/web/api/webgl_api/by_example/color_masking/index.md
+++ b/files/fr/web/api/webgl_api/by_example/color_masking/index.md
@@ -11,35 +11,37 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Color_masking
 original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}
 
-<p>Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons.</p>
+Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons.
 
-<p>{{EmbedLiveSample("color-masking-source",660,425)}}</p>
+{{EmbedLiveSample("color-masking-source",660,425)}}
 
-<h3 id="Appliquer_un_masque_sur_des_couleurs_aléatoires">Appliquer un masque sur des couleurs aléatoires</h3>
+### Appliquer un masque sur des couleurs aléatoires
 
-<p>Dans cet exemple, on modifie les couleurs aléatoires utilisées pour une animation grâce à l'opération {{domxref("WebGLRenderingContext.colorMask()","colorMask()")}}. D'une certaine façon, cette opération est analogue à la modification qu'on obtient lorsqu'on regarde à travers du verre teinté ou derrière une filtre coloré. Ainsi, en masquant les canaux vert et bleu, on ne pourra recevoir que les composantes rouges des pixels et cela donnera l'impression de regarder à travers du verre teinté de rouge.</p>
+Dans cet exemple, on modifie les couleurs aléatoires utilisées pour une animation grâce à l'opération {{domxref("WebGLRenderingContext.colorMask()","colorMask()")}}. D'une certaine façon, cette opération est analogue à la modification qu'on obtient lorsqu'on regarde à travers du verre teinté ou derrière une filtre coloré. Ainsi, en masquant les canaux vert et bleu, on ne pourra recevoir que les composantes rouges des pixels et cela donnera l'impression de regarder à travers du verre teinté de rouge.
 
-<p>Les masques de couleur nous permettent d'illustrer quelques concepts de base <a href="https://en.wikipedia.org/wiki/Color_theory">de la théorie des couleurs</a>. En masquant certaines composantes, on rapproche les couleurs affichées de la couleur complémentaire. Ainsi, en masquant le bleu et le rouge, on obtiendrait des tons de vert. En masquant uniquement le canal bleu, on obtiendra des tons de jaune (dont orange, marron, olive, etc.) qui est la couleur complémentaire du bleu. De la même façon, en masquant uniquement le vert, on obtiendrait des tons magenta (pourpres, rouges, etc.) et en masquant uniquement le rouge, on obtiendrait des tons cyan.</p>
+Les masques de couleur nous permettent d'illustrer quelques concepts de base [de la théorie des couleurs](https://en.wikipedia.org/wiki/Color_theory). En masquant certaines composantes, on rapproche les couleurs affichées de la couleur complémentaire. Ainsi, en masquant le bleu et le rouge, on obtiendrait des tons de vert. En masquant uniquement le canal bleu, on obtiendra des tons de jaune (dont orange, marron, olive, etc.) qui est la couleur complémentaire du bleu. De la même façon, en masquant uniquement le vert, on obtiendrait des tons magenta (pourpres, rouges, etc.) et en masquant uniquement le rouge, on obtiendrait des tons cyan.
 
-<p>On voit que les appels à <code>colorMask()</code> sont uniquement déclenchés lorsque l'utilisateur clique sur l'un des boutons. En revanche, le rendu est fait chaque seconde grâce au timer. L'état du masque de couleur lié à {{Glossary("WebGL")}} est conservé et il n'est donc pas nécessaire d'appeler <code>colorMask()</code> à chaque frame pour régler le masque. Cela illustre la manière dont WebGL est un automate a état. Dans un premier temps, on initialise l'état de WebGL et ensuite, à chaque frame, on déclenche uniquement les opérations de dessin.</p>
+On voit que les appels à `colorMask()` sont uniquement déclenchés lorsque l'utilisateur clique sur l'un des boutons. En revanche, le rendu est fait chaque seconde grâce au timer. L'état du masque de couleur lié à {{Glossary("WebGL")}} est conservé et il n'est donc pas nécessaire d'appeler `colorMask()` à chaque frame pour régler le masque. Cela illustre la manière dont WebGL est un automate a état. Dans un premier temps, on initialise l'état de WebGL et ensuite, à chaque frame, on déclenche uniquement les opérations de dessin.
 
-<p>Les masques de couleurs permettent d'avoir un contrôle précis pour mettre à jour les pixels à l'écran. En limitant les canaux de couleur qui sont utilisés à chaque commande de dessin, on peut utiliser chaque canal à bon escient et on peut par exemple stocler une image en ton de gris.</p>
+Les masques de couleurs permettent d'avoir un contrôle précis pour mettre à jour les pixels à l'écran. En limitant les canaux de couleur qui sont utilisés à chaque commande de dessin, on peut utiliser chaque canal à bon escient et on peut par exemple stocler une image en ton de gris.
 
-<p>Enfin, l'application d'un masque de couleur nous montre que {{Glossary("WebGL")}} n'est pas seulement un automate à états mais aussi un <em>processus</em> graphique. Cela signifie que les opérations graphiques liées à WebGL sont effectuées dans un ordre donné et que le résultat de chaque opération sert de point d'entrée pour l'opération suivante. Ainsi, l'opération d'applique définit la valeur pour chaque pixel. L'application du masque se produit plus tard dans le processus et modifie la couleur. Ainsi, le résultat final affiché à l'écran est teinté par la couleur du masque.</p>
+Enfin, l'application d'un masque de couleur nous montre que {{Glossary("WebGL")}} n'est pas seulement un automate à états mais aussi un _processus_ graphique. Cela signifie que les opérations graphiques liées à WebGL sont effectuées dans un ordre donné et que le résultat de chaque opération sert de point d'entrée pour l'opération suivante. Ainsi, l'opération d'applique définit la valeur pour chaque pixel. L'application du masque se produit plus tard dans le processus et modifie la couleur. Ainsi, le résultat final affiché à l'écran est teinté par la couleur du masque.
 
-<pre class="brush: html">&lt;p&gt;Tinting the displayed colors with color masking.&lt;/p&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
-    l'élément HTML5 canvas.&lt;/canvas&gt;
-&lt;button id="red-toggle"&gt;On&lt;/button&gt;
-&lt;button id="green-toggle"&gt;On&lt;/button&gt;
-&lt;button id="blue-toggle"&gt;On&lt;/button&gt;
-</pre>
+```html
+<p>Tinting the displayed colors with color masking.</p>
+<canvas>Il semblerait que votre navigateur ne supporte pas
+    l'élément HTML5 canvas.</canvas>
+<button id="red-toggle">On</button>
+<button id="green-toggle">On</button>
+<button id="blue-toggle">On</button>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 canvas {
@@ -69,9 +71,10 @@ button {
 #blue-toggle {
   background-color : blue;
 }
-</pre>
+```
 
-<pre class="brush: js">window.addEventListener("load", function setupAnimation (evt) {
+```js
+window.addEventListener("load", function setupAnimation (evt) {
   "use strict"
   window.removeEventListener(evt.type, setupAnimation, false);
 
@@ -100,8 +103,8 @@ button {
 
   function setColorMask(evt) {
     var index =
-      evt.target === greentoggle &amp;&amp; 1
-      || evt.target === bluetoggle &amp;&amp; 2
+      evt.target === greentoggle && 1
+      || evt.target === bluetoggle && 2
       || 0;
     mask[index] = !mask[index];
     if (mask[index] === true)
@@ -122,8 +125,8 @@ button {
     return [Math.random(), Math.random(), Math.random()];
   }
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/color-masking">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/color-masking).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}
diff --git a/files/fr/web/api/webgl_api/by_example/detect_webgl/index.md b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.md
index b3083ba274..bfd0e34c24 100644
--- a/files/fr/web/api/webgl_api/by_example/detect_webgl/index.md
+++ b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.md
@@ -11,25 +11,25 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Detect_WebGL
 original_slug: Web/API/WebGL_API/By_example/Détecter_WebGL
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}
 
-<div>{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}</div>
+Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.
 
-<p>Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.</p>
+{{EmbedLiveSample("Détecter_le_support_WebGL",660,150)}}
 
-<p>{{EmbedLiveSample("Détecter_le_support_WebGL",660,150)}}</p>
+### Détecter le support WebGL
 
-<h3 id="Détecter_le_support_WebGL">Détecter le support WebGL</h3>
+Dans ce premier exemple, on vérifie si le navigateur prend en charge {{Glossary("WebGL")}}. Pour cela, on essaye d'obtenir le {{domxref("WebGLRenderingContext","contexte de rendu WebGL","",1)}} à partir d'un élément {{domxref("HTMLCanvasElement","canvas")}}. Le {{domxref("WebGLRenderingContext","contexte de rendu WebGL", "", 1)}} est une interface qui permet de connaître et de modifier l'état du moteur graphique WebGL, d'envoyer des données à WebGL et d'exécuter des commandes de dessin.
 
-<p>Dans ce premier exemple, on vérifie si le navigateur prend en charge {{Glossary("WebGL")}}. Pour cela, on essaye d'obtenir le {{domxref("WebGLRenderingContext","contexte de rendu WebGL","",1)}} à partir d'un élément {{domxref("HTMLCanvasElement","canvas")}}. Le {{domxref("WebGLRenderingContext","contexte de rendu WebGL", "", 1)}} est une interface qui permet de connaître et de modifier l'état du moteur graphique WebGL, d'envoyer des données à WebGL et d'exécuter des commandes de dessin.</p>
+La gestion d'une machine graphique au sein d'une seule interface n'est pas propre à {{Glossary("WebGL")}}. Les autres {̣{Glossary("API")}} graphiques comme {{domxref("CanvasRenderingContext2D","le contexte de rendu 2D du canevas", "", 1)}}. Cependant, les propriétés et variables qui peuvent être manipulées changent d'une API à l'autre.
 
-<p>La gestion d'une machine graphique au sein d'une seule interface n'est pas propre à {{Glossary("WebGL")}}. Les autres {̣{Glossary("API")}} graphiques comme {{domxref("CanvasRenderingContext2D","le contexte de rendu 2D du canevas", "", 1)}}. Cependant, les propriétés et variables qui peuvent être manipulées changent d'une API à l'autre.</p>
+```html
+<p>[ On affichera ici le résultat de la détection du support WebGL ]</p>
+<button>Cliquez ici pour détecter WebGLRenderingContext</button>
+```
 
-<pre class="brush: html">&lt;p&gt;[ On affichera ici le résultat de la détection du support WebGL ]&lt;/p&gt;
-&lt;button&gt;Cliquez ici pour détecter WebGLRenderingContext&lt;/button&gt;
-</pre>
-
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 button {
@@ -38,9 +38,10 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+```js
+// On exécute tout dans le gestionnaire d'événement
 // correspondant au chargement de la fenêtre. De cette
 // façon, le DOM est complètement chargé et mis en forme
 // avant de le manipuler.
@@ -64,7 +65,7 @@ window.addEventListener("load", function() {
       || canvas.getContext("experimental-webgl");
 
     // On affiche le résultat.
-    if (gl &amp;&amp; gl instanceof WebGLRenderingContext) {
+    if (gl && gl instanceof WebGLRenderingContext) {
       paragraph.innerHTML =
         "Félicitations, votre navigateur supporte WebGL.";
     } else {
@@ -73,8 +74,8 @@ window.addEventListener("load", function() {
     }
   }
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/detect-webgl">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/detect-webgl).
 
-<div>{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}</div>
+{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}
diff --git a/files/fr/web/api/webgl_api/by_example/hello_glsl/index.md b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.md
index c30e81f2f3..4ebd39cd35 100644
--- a/files/fr/web/api/webgl_api/by_example/hello_glsl/index.md
+++ b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.md
@@ -10,28 +10,28 @@ tags:
   - WebGL
 translation_of: Web/API/WebGL_API/By_example/Hello_GLSL
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}
 
-<p>Dans cet article, on décrit un programme de manipulation de <em>shaders</em> qui dessine un carré de couleur.</p>
+Dans cet article, on décrit un programme de manipulation de _shaders_ qui dessine un carré de couleur.
 
-<div class="note">
-<p><strong>Note :</strong> Cet exemple devrait fonctionner pour l'ensemble des navigateurs récents. Cependant, pour les versions anciennes ou mobiles, il peut y avoir des dysfonctionnements. Si le canevas reste blanc, vous pouvez vérifier le résultat avec l'exemple suivant qui dessine exactement la même chose. Assurez-vous de bien lire les explications et le code présent sur cette page avant de passer à la suivante.</p>
-</div>
+> **Note :** Cet exemple devrait fonctionner pour l'ensemble des navigateurs récents. Cependant, pour les versions anciennes ou mobiles, il peut y avoir des dysfonctionnements. Si le canevas reste blanc, vous pouvez vérifier le résultat avec l'exemple suivant qui dessine exactement la même chose. Assurez-vous de bien lire les explications et le code présent sur cette page avant de passer à la suivante.
 
-<p>{{EmbedLiveSample("Hello_World_en_GLSL",660,425)}}</p>
+{{EmbedLiveSample("Hello_World_en_GLSL",660,425)}}
 
-<h3 id="Hello_World_en_GLSL"><em>Hello World</em> en GLSL</h3>
+### _Hello World_ en GLSL
 
-<p>Voici un exemple de premier programme qu'on peut écrire pour manipuler des <em>shaders</em>.</p>
+Voici un exemple de premier programme qu'on peut écrire pour manipuler des _shaders_.
 
-<pre class="brush: html hidden">&lt;p&gt;Hello World! Hello GLSL!&lt;/p&gt;
-&lt;canvas&gt;Votre navigateur semble ne pas
-    supporter l'élément HTML5.&lt;/canvas&gt;
-</pre>
+```html hidden
+<p>Hello World! Hello GLSL!</p>
+<canvas>Votre navigateur semble ne pas
+    supporter l'élément HTML5.</canvas>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   text-align : center;
 }
 canvas {
@@ -49,29 +49,33 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+```html
+<script type="x-shader/x-vertex" id="vertex-shader">
 #version 100
 void main() {
   gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
   gl_PointSize = 64.0;
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+```html
+<script type="x-shader/x-fragment" id="fragment-shader">
 #version 100
 void main() {
   gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<pre class="brush: js hidden">;(function(){
-</pre>
+```js hidden
+;(function(){
+```
 
-<pre class="brush: js">"use strict"
+```js
+"use strict"
 window.addEventListener("load", setupWebGL, false);
 var gl,
   program;
@@ -128,9 +132,10 @@ if (buffer)
 if (program)
   gl.deleteProgram(program);
 }
-</pre>
+```
 
-<pre class="brush: js hidden">function getRenderingContext() {
+```js hidden
+function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
@@ -149,11 +154,12 @@ if (program)
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">})();
-</pre>
+```js hidden
+})();
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-glsl">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/hello-glsl).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}
diff --git a/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.md b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
index f00e3a7ea1..671303054b 100644
--- a/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
+++ b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
@@ -11,26 +11,28 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Hello_vertex_attributes
 original_slug: Web/API/WebGL_API/By_example/Introduction_aux_attributs_vertex
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}
 
-<p>Avec cet exemple, on voit comment combiner la programmation des <em>shaders</em> et les interactions utilisateurs grâce aux attributs des <em>vertex</em>.</p>
+Avec cet exemple, on voit comment combiner la programmation des _shaders_ et les interactions utilisateurs grâce aux attributs des _vertex_.
 
-<p>{{EmbedLiveSample("Un_Hello_World_en_GLSL",660,425)}}</p>
+{{EmbedLiveSample("Un_Hello_World_en_GLSL",660,425)}}
 
-<h3 id="Un_Hello_World_en_GLSL">Un <em>Hello World</em> en GLSL</h3>
+### Un _Hello World_ en GLSL
 
-<p>Voici comment envoyer des données saisies à un programme de manipulation des <em>shaders</em> en utilisant la mémoire GPU.</p>
+Voici comment envoyer des données saisies à un programme de manipulation des _shaders_ en utilisant la mémoire GPU.
 
-<pre class="brush: html hidden">&lt;p&gt;Voici le premier exemple où on manipule des attributs et où
+```html hidden
+<p>Voici le premier exemple où on manipule des attributs et où
 on envoie des données au GPU. Cliquez sur le canevas pour modifier
-la position horizontale du carré.&lt;/p&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
-    l'élément HTML5 canvas.&lt;/canvas&gt;
-</pre>
+la position horizontale du carré.</p>
+<canvas>Il semblerait que votre navigateur ne supporte pas
+    l'élément HTML5 canvas.</canvas>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   text-align : center;
 }
 canvas {
@@ -47,9 +49,10 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+```html
+<script type="x-shader/x-vertex" id="vertex-shader">
 #version 100
 precision highp float;
 
@@ -59,22 +62,25 @@ void main() {
   gl_Position = vec4(position, 0.0, 0.0, 1.0);
   gl_PointSize = 64.0;
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+```html
+<script type="x-shader/x-fragment" id="fragment-shader">
 #version 100
 precision mediump float;
 void main() {
   gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<pre class="brush: js hidden">;(function(){
-</pre>
+```js hidden
+;(function(){
+```
 
-<pre class="brush: js">"use strict"
+```js
+"use strict"
 window.addEventListener("load", setupWebGL, false);
 var gl,
   program;
@@ -142,9 +148,10 @@ function cleanup() {
   if (program)
     gl.deleteProgram(program);
 }
-</pre>
+```
 
-<pre class="brush: js hidden">function getRenderingContext() {
+```js hidden
+function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
@@ -162,11 +169,12 @@ function cleanup() {
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">})();
-</pre>
+```js hidden
+})();
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-vertex-attributes">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/hello-vertex-attributes).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}
diff --git a/files/fr/web/api/webgl_api/by_example/index.md b/files/fr/web/api/webgl_api/by_example/index.md
index 037ed0d183..57c55bd51c 100644
--- a/files/fr/web/api/webgl_api/by_example/index.md
+++ b/files/fr/web/api/webgl_api/by_example/index.md
@@ -8,63 +8,55 @@ tags:
   - WebGL
 translation_of: Web/API/WebGL_API/By_example
 ---
-<div>{{IncludeSubnav("/fr/docs/Apprendre")}}</div>
+{{IncludeSubnav("/fr/docs/Apprendre")}}
 
-<p>{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}</p>
+{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}
 
-<p><em>WebGL par l'exemple</em> est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les <em>shaders</em>, les textures, la géométrie et l'interaction avec les utilisateurs.</p>
+_WebGL par l'exemple_ est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les _shaders_, les textures, la géométrie et l'interaction avec les utilisateurs.
 
-<h2 id="Les_exemples_par_catégorie">Les exemples, par catégorie</h2>
+## Les exemples, par catégorie
 
-<p>Les exemples de cette section sont triés par ordre de difficulté croissante. Plutôt que de les présenter sous la forme d'une longue liste, ils sont également répartis selon différentes catégories. Un sujet peut être abordé dans plusieurs exemples afin de couvrir des notions simples, intermédiaires ou avancées.</p>
+Les exemples de cette section sont triés par ordre de difficulté croissante. Plutôt que de les présenter sous la forme d'une longue liste, ils sont également répartis selon différentes catégories. Un sujet peut être abordé dans plusieurs exemples afin de couvrir des notions simples, intermédiaires ou avancées.
 
-<p>Plutôt que de manipuler des <em>shaders</em>, optimiser des géométrie et gérer la mémoire {{Glossary("GPU")}} dans le premier exemple, la progression se fera étape par étape afin que les exemples et les concepts puissent mieux être compris.</p>
+Plutôt que de manipuler des _shaders_, optimiser des géométrie et gérer la mémoire {{Glossary("GPU")}} dans le premier exemple, la progression se fera étape par étape afin que les exemples et les concepts puissent mieux être compris.
 
-<p>Les exemples sont expliqués, avec des commentaires dans le code et des paragraphes dédiés. Nous vous invitons à lire l'ensemble des commentaires au fur et à mesure, notamment pour les exemples plus avancés où ce qui a été vu auparavant ne sera pas expliqué à nouveau.</p>
+Les exemples sont expliqués, avec des commentaires dans le code et des paragraphes dédiés. Nous vous invitons à lire l'ensemble des commentaires au fur et à mesure, notamment pour les exemples plus avancés où ce qui a été vu auparavant ne sera pas expliqué à nouveau.
 
-<h3 id="Apprendre_à_connaître_le_contexte_de_rendu">Apprendre à connaître le contexte de rendu</h3>
+### Apprendre à connaître le contexte de rendu
 
-<dl>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Détecter_WebGL">Détecter WebGL</a></dt>
- <dd>Dans cet exemple, on montre comment détecter un contexte de rendu {{Glossary("WebGL")}} et l'afficher pour l'utilisateur.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs">Appliquer des couleurs</a></dt>
- <dd>Dans cet exemple, on illustre comment appliquer une couleur unie dans un contexte de rendu.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris">Appliquer une couleur à la souris</a></dt>
- <dd>Ici, on montre comment combiner des interactions utilisateurs avec des opérations graphiques (là, on appliquera une couleur aléatoire dans le contexte à chaque clic de l'utilisateur).</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée">Créer une animation colorée</a></dt>
- <dd>Dans cet exemple, on crée une animation simple avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu WebGL.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Masque_de_couleur">Avoir un masque de couleur</a></dt>
- <dd>Modifier des couleurs aléatoires avec des masques de couleur pour limiter l'intervalle de couleurs qu'on souhaite utiliser.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples">Appliquer des découpes simples</a></dt>
- <dd>Dans cet exemple, on dessine des rectangles et des carrés simples grâce à des opérations de découpage (<em>scissoring</em>).</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL">La taille du canevas et WebGL</a></dt>
- <dd>Dans cet exemple, on observe ce qui se produit quand on définit (ou pas) la taille de l'élément <code>canvas</code> associé.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Modèle_1">Modèle 1</a></dt>
- <dd>Dans cet exemple, on évoque les fragments de code qui seront utilisés pour les exemples qui suivent (et dans lesquels ils seront cachés car identiques). On définiera également une fonction JavaScript utilitaire pour initialiser WebGL plus facilement.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique">Créer une animation avec du découpage et de l'applique</a></dt>
- <dd>Avec cet article, on illustre comment créer des animations grâce aux opérations de découpe et d'applique.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle">Une pluie de rectangle</a></dt>
- <dd>On voit ici un jeu, simple, qui mélange les découpes, les animations et les interactions utilisateurs.</dd>
-</dl>
+- [Détecter WebGL](/fr/docs/Apprendre/WebGL/Par_exemple/Détecter_WebGL)
+  - : Dans cet exemple, on montre comment détecter un contexte de rendu {{Glossary("WebGL")}} et l'afficher pour l'utilisateur.
+- [Appliquer des couleurs](/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs)
+  - : Dans cet exemple, on illustre comment appliquer une couleur unie dans un contexte de rendu.
+- [Appliquer une couleur à la souris](/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris)
+  - : Ici, on montre comment combiner des interactions utilisateurs avec des opérations graphiques (là, on appliquera une couleur aléatoire dans le contexte à chaque clic de l'utilisateur).
+- [Créer une animation colorée](/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée)
+  - : Dans cet exemple, on crée une animation simple avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu WebGL.
+- [Avoir un masque de couleur](/fr/docs/Apprendre/WebGL/Par_exemple/Masque_de_couleur)
+  - : Modifier des couleurs aléatoires avec des masques de couleur pour limiter l'intervalle de couleurs qu'on souhaite utiliser.
+- [Appliquer des découpes simples](/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples)
+  - : Dans cet exemple, on dessine des rectangles et des carrés simples grâce à des opérations de découpage (_scissoring_).
+- [La taille du canevas et WebGL](/fr/docs/Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL)
+  - : Dans cet exemple, on observe ce qui se produit quand on définit (ou pas) la taille de l'élément `canvas` associé.
+- [Modèle 1](/fr/docs/Apprendre/WebGL/Par_exemple/Modèle_1)
+  - : Dans cet exemple, on évoque les fragments de code qui seront utilisés pour les exemples qui suivent (et dans lesquels ils seront cachés car identiques). On définiera également une fonction JavaScript utilitaire pour initialiser WebGL plus facilement.
+- [Créer une animation avec du découpage et de l'applique](/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique)
+  - : Avec cet article, on illustre comment créer des animations grâce aux opérations de découpe et d'applique.
+- [Une pluie de rectangle](/fr/docs/Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle)
+  - : On voit ici un jeu, simple, qui mélange les découpes, les animations et les interactions utilisateurs.
 
-<div>
-<h3 id="Les_bases_de_la_programmation_avec_les_shaders">Les bases de la programmation avec les <em>shaders</em></h3>
+### Les bases de la programmation avec les _shaders_
 
-<dl>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Hello_GLSL">Hello GLSL</a></dt>
- <dd>Un programme de manipulation des shaders simple qui dessine un carré.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex">Introduction aux attributs de vertex</a></dt>
- <dd>Ici, on combine la programmation des shaders et les interactions utilisateurs grâce aux attributs de vertex.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code">Générer des textures avec du code</a></dt>
- <dd>Une démonstration simple sur l'utilisation des <em>shaders</em> et des textures procédurales.</dd>
-</dl>
+- [Hello GLSL](/fr/docs/Apprendre/WebGL/Par_exemple/Hello_GLSL)
+  - : Un programme de manipulation des shaders simple qui dessine un carré.
+- [Introduction aux attributs de vertex](/fr/docs/Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex)
+  - : Ici, on combine la programmation des shaders et les interactions utilisateurs grâce aux attributs de vertex.
+- [Générer des textures avec du code](/fr/docs/Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code)
+  - : Une démonstration simple sur l'utilisation des _shaders_ et des textures procédurales.
 
-<h3 id="Divers_exemples_avancés">Divers exemples avancés</h3>
+### Divers exemples avancés
 
-<dl>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Les_textures_vidéos">Les textures vidéos</a></dt>
- <dd>Dans cet exemple, on voit comment utiliser des fichiers vidéos comme des textures.</dd>
-</dl>
+- [Les textures vidéos](/fr/docs/Apprendre/WebGL/Par_exemple/Les_textures_vidéos)
+  - : Dans cet exemple, on voit comment utiliser des fichiers vidéos comme des textures.
 
-<p>{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}</p>
-</div>
+{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}
diff --git a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md
index de42151f5c..4064bb708f 100644
--- a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md
+++ b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md
@@ -11,32 +11,34 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Raining_rectangles
 original_slug: Web/API/WebGL_API/By_example/Une_pluie_de_rectangle
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}
 
-<p>Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.</p>
+Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.
 
-<p>{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}</p>
+{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}
 
-<h3 id="Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes">Utiliser des animations et des interactions grâce à des découpes</h3>
+### Utiliser des animations et des interactions grâce à des découpes
 
-<p>Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tombent pour en attraper le plus possible. Dans cet exemple, on utilise un approche orientée objet pour représenter les rectangles. Cela permet de mieux gérer l'état du rectangle (sa position, sa couleur, etc.) et cela rend le code plus compact et plus facile à réutiliser.</p>
+Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tombent pour en attraper le plus possible. Dans cet exemple, on utilise un approche orientée objet pour représenter les rectangles. Cela permet de mieux gérer l'état du rectangle (sa position, sa couleur, etc.) et cela rend le code plus compact et plus facile à réutiliser.
 
-<p>Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate.</p>
+Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate.
 
-<p>De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des  <code>setTimeout</code>.</p>
+De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des  `setTimeout`.
 
-<pre class="brush: html hidden">&lt;p&gt;Vous en avez attrapé
-&lt;strong&gt;0&lt;/strong&gt;.
+```html hidden
+<p>Vous en avez attrapé
+<strong>0</strong>.
   Vous en avez loupé
-&lt;strong&gt;0&lt;/strong&gt;.&lt;/p&gt;
-&lt;canvas&gt;Il semblerait que votre
+<strong>0</strong>.</p>
+<canvas>Il semblerait que votre
     navigateur ne supporte pas l'élément
-    HTML5 canvas.&lt;/canvas&gt;
-</pre>
+    HTML5 canvas.</canvas>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   text-align : center;
 }
 canvas {
@@ -54,12 +56,14 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">;(function(){
-</pre>
+```js hidden
+;(function(){
+```
 
-<pre class="brush: js">"use strict"
+```js
+"use strict"
 window.addEventListener("load", setupAnimation, false);
 var gl,
   timer,
@@ -88,7 +92,7 @@ function drawAnimation () {
       rainingRect.size[0] , rainingRect.size[1]);
   gl.clear(gl.COLOR_BUFFER_BIT);
   rainingRect.position[1] -= rainingRect.velocity;
-  if (rainingRect.position[1] &lt; 0) {
+  if (rainingRect.position[1] < 0) {
     misses += 1;
     missesDisplay.innerHTML = misses;
     rainingRect = new Rectangle();
@@ -114,8 +118,8 @@ function playerClick (evt) {
   // On incrémente donc le score et on crée un nouveau rectangle
   var diffPos = [ position[0] - rainingRect.position[0],
       position[1] - rainingRect.position[1] ];
-  if ( diffPos[0] &gt;= 0 &amp;&amp; diffPos[0] &lt; rainingRect.size[0]
-      &amp;&amp; diffPos[1] &gt;= 0 &amp;&amp; diffPos[1] &lt; rainingRect.size[1] ) {
+  if ( diffPos[0] >= 0 && diffPos[0] < rainingRect.size[0]
+      && diffPos[1] >= 0 && diffPos[1] < rainingRect.size[1] ) {
     score += 1;
     scoreDisplay.innerHTML = score;
     rainingRect = new Rectangle();
@@ -146,9 +150,10 @@ function Rectangle () {
     return [Math.random(), Math.random(), Math.random()];
   }
 }
-</pre>
+```
 
-<pre class="brush: js hidden">function getRenderingContext() {
+```js hidden
+function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
@@ -167,11 +172,12 @@ function Rectangle () {
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">})();
-</pre>
+```js hidden
+})();
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/raining-rectangles">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/raining-rectangles).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}
diff --git a/files/fr/web/api/webgl_api/by_example/scissor_animation/index.md b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.md
index e151ad4c95..14b742c5c1 100644
--- a/files/fr/web/api/webgl_api/by_example/scissor_animation/index.md
+++ b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.md
@@ -11,31 +11,33 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Scissor_animation
 original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_avec_découpe_et_applique
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}
 
-<p>Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.</p>
+Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.
 
-<p>{{EmbedLiveSample("Une_animation_grâce_à_des_découpes",660,425)}}</p>
+{{EmbedLiveSample("Une_animation_grâce_à_des_découpes",660,425)}}
 
-<h3 id="Une_animation_grâce_à_des_découpes">Une animation grâce à des découpes</h3>
+### Une animation grâce à des découpes
 
-<p>Dans cet exemple, on anime des carrés grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}}. Ensuite, on crée à nouveau une boucle d'animation grâce aux <em>timers</em>. Cette fois-ci, la position du carré (la zone de découpe) est mise à jour à chaque <em>frame </em>(on a environ une frame rafraîchie toutes les 17 millisecondes, ce qui correspond environ à 60fps (<em>frame per second</em> ou <em>frame </em>par seconde).</p>
+Dans cet exemple, on anime des carrés grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}}. Ensuite, on crée à nouveau une boucle d'animation grâce aux _timers_. Cette fois-ci, la position du carré (la zone de découpe) est mise à jour à chaque _frame_ (on a environ une frame rafraîchie toutes les 17 millisecondes, ce qui correspond environ à 60fps (_frame per second_ ou _frame_ par seconde).
 
-<p>En revanche, la couleur du carré (définie avec {{domxref("WebGLRenderingContext.clearColor()","clearColor")}}) est uniquement mise à jour lorsqu'un nouveau carré est créé. On voit ici que {{Glossary("WebGL")}} est un automate. Pour chaque carré, on définit sa couleur une fois puis on met à jour sa position à chaque <em>frame</em>. L'état lié à la couleur reste tel quel jusqu'à ce qu'un nouveau carré soit créé.</p>
+En revanche, la couleur du carré (définie avec {{domxref("WebGLRenderingContext.clearColor()","clearColor")}}) est uniquement mise à jour lorsqu'un nouveau carré est créé. On voit ici que {{Glossary("WebGL")}} est un automate. Pour chaque carré, on définit sa couleur une fois puis on met à jour sa position à chaque _frame_. L'état lié à la couleur reste tel quel jusqu'à ce qu'un nouveau carré soit créé.
 
-<pre class="brush: html hidden">&lt;p&gt;Une animation WebGL obtenue en appliquant des couleurs
-unies sur le buffer de dessin et en utilisant des tests de découpe.&lt;/p&gt;
-&lt;button id="animation-onoff"&gt;
+```html hidden
+<p>Une animation WebGL obtenue en appliquant des couleurs
+unies sur le buffer de dessin et en utilisant des tests de découpe.</p>
+<button id="animation-onoff">
   Cliquez ici pour
-&lt;strong&gt;[verbe ici]&lt;/strong&gt;
-  l'animation&lt;/button&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur
-    ne supporte pas l'élément HTML5 canvas.&lt;/canvas&gt;
-</pre>
-
-<pre class="brush: css hidden">body {
+<strong>[verbe ici]</strong>
+  l'animation</button>
+<canvas>Il semblerait que votre navigateur
+    ne supporte pas l'élément HTML5 canvas.</canvas>
+```
+
+```css hidden
+body {
   text-align : center;
 }
 canvas {
@@ -52,12 +54,14 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">;(function(){
-</pre>
+```js hidden
+;(function(){
+```
 
-<pre class="brush: js">"use strict"
+```js
+"use strict"
 window.addEventListener("load", setupAnimation, false);
 // Voici les variables qui permettront de
 // manipuler le contexte WebGL, la couleur
@@ -113,7 +117,7 @@ function drawAnimation () {
   // Lorsque le carré atteint le bas, on crée un nouveau
   // carré avec une nouvelle vitesse et une nouvelle
   // couleur.
-  if (position[1] &lt; 0) {
+  if (position[1] < 0) {
     // La position horizontale est choisie aléatoirement.
     // La position verticale correspond au haut
     // du buffer de dessin.
@@ -132,9 +136,10 @@ function drawAnimation () {
 function getRandomColor() {
   return [Math.random(), Math.random(), Math.random()];
 }
-</pre>
+```
 
-<pre class="brush: js hidden">function getRenderingContext() {
+```js hidden
+function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
@@ -153,11 +158,12 @@ function getRandomColor() {
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">})();
-</pre>
+```js hidden
+})();
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/scissor-animation">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/scissor-animation).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}
diff --git a/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.md b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.md
index 03897206ae..6842ac3fcd 100644
--- a/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.md
+++ b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.md
@@ -11,32 +11,34 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Simple_color_animation
 original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_colorée
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}
 
-<p>Dans cet exemple, on crée une animation avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu {{Glossary("WebGL")}}.</p>
+Dans cet exemple, on crée une animation avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu {{Glossary("WebGL")}}.
 
-<p>{{EmbedLiveSample("Créer_une_animation_avec_clear",660,425)}}</p>
+{{EmbedLiveSample("Créer_une_animation_avec_clear",660,425)}}
 
-<h3 id="Créer_une_animation_avec_clear">Créer une animation avec <code> clear</code></h3>
+### Créer une animation avec `clear`
 
-<p>Cet exemple illustre comment lancer une animation avec WebGL et gérer les interactions de l'utilisateur. L'utilisateur peut lancer, arrêter et reprendre l'animation en cliquant sur le bouton.</p>
+Cet exemple illustre comment lancer une animation avec WebGL et gérer les interactions de l'utilisateur. L'utilisateur peut lancer, arrêter et reprendre l'animation en cliquant sur le bouton.
 
-<p>Cette fois, on place les appels à la fonction WebGL à l'intérieur d'un gestionnaire d'événement de <em>timer</em>. Un gestionnaire d'événements pour les clics permet de gérer les interactions simples (lancer et arrêter l'animation). Le <em>timer</em> et la fonction de gestion du <em>timer</em> créent une boucle d'animation qui permet d'exécuter un ensemble de commandes pour le dessin à des intervalles réguliers (généralement, pour chaque <em>frame</em>, dans ce cas, on a une fréquence d'une <em>frame </em>par seconde).</p>
+Cette fois, on place les appels à la fonction WebGL à l'intérieur d'un gestionnaire d'événement de _timer_. Un gestionnaire d'événements pour les clics permet de gérer les interactions simples (lancer et arrêter l'animation). Le _timer_ et la fonction de gestion du _timer_ créent une boucle d'animation qui permet d'exécuter un ensemble de commandes pour le dessin à des intervalles réguliers (généralement, pour chaque _frame_, dans ce cas, on a une fréquence d'une _frame_ par seconde).
 
-<pre class="brush: html">&lt;p&gt;Un programme WebGL simple qui crée une animation colorée.&lt;/p&gt;
-&lt;p&gt;Vous pouvez sur le bouton pour activer/désactiver l'animation.&lt;/p&gt;
-&lt;canvas id="canvas-view"&gt;Il semblerait que votre navigateur ne
-    supporte pas l'élément canvas.&lt;/canvas&gt;
-&lt;button id="animation-onoff"&gt;
+```html
+<p>Un programme WebGL simple qui crée une animation colorée.</p>
+<p>Vous pouvez sur le bouton pour activer/désactiver l'animation.</p>
+<canvas id="canvas-view">Il semblerait que votre navigateur ne
+    supporte pas l'élément canvas.</canvas>
+<button id="animation-onoff">
   Cliquez ici pour
-&lt;strong&gt;[le verbe de l'action]&lt;/strong&gt;
+<strong>[le verbe de l'action]</strong>
   l'animation
-&lt;/button&gt;
-</pre>
+</button>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 button {
@@ -54,9 +56,10 @@ canvas {
   border : none;
   background-color : black;
 }
-</pre>
+```
 
-<pre class="brush: js">window.addEventListener("load", function setupAnimation (evt) {
+```js
+window.addEventListener("load", function setupAnimation (evt) {
   "use strict"
   window.removeEventListener(evt.type, setupAnimation, false);
 
@@ -133,8 +136,8 @@ canvas {
     return [Math.random(), Math.random(), Math.random()];
   }
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/simple-color-animation">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/simple-color-animation).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}
diff --git a/files/fr/web/api/webgl_api/by_example/textures_from_code/index.md b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.md
index f88812a7d3..864d0ece92 100644
--- a/files/fr/web/api/webgl_api/by_example/textures_from_code/index.md
+++ b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.md
@@ -11,25 +11,27 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Textures_from_code
 original_slug: Web/API/WebGL_API/By_example/Générer_des_textures_avec_du_code
 ---
-<div>{{draft}}{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{draft}}{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}
 
-<p>Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de <em>shader</em><em>s</em>.</p>
+Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de _shader\*\*s_.
 
-<p>{{EmbedLiveSample("Dessiner_des_textures_avec_du_code",660,350)}}</p>
+{{EmbedLiveSample("Dessiner_des_textures_avec_du_code",660,350)}}
 
-<h3 id="Dessiner_des_textures_avec_du_code">Dessiner des textures avec du  code</h3>
+### Dessiner des textures avec du  code
 
-<p>Il est possible d'appliquer des textures en effectuant des calculs pour chaque pixel du fragment de <em>shader</em>.</p>
+Il est possible d'appliquer des textures en effectuant des calculs pour chaque pixel du fragment de _shader_.
 
-<pre class="brush: html hidden">&lt;p&gt;Génération d'une texture à partir de code. Simple demonstration
-    de la génération de textures procédurale&lt;/p&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur ne supporte
-    pas l'élément canvas.&lt;/canvas&gt;
-</pre>
+```html hidden
+<p>Génération d'une texture à partir de code. Simple demonstration
+    de la génération de textures procédurale</p>
+<canvas>Il semblerait que votre navigateur ne supporte
+    pas l'élément canvas.</canvas>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   text-align : center;
 }
 canvas {
@@ -46,19 +48,21 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+```html
+<script type="x-shader/x-vertex" id="vertex-shader">
 #version 100
 precision highp float;
 void main() {
   gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
   gl_PointSize = 128.0;
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+```html
+<script type="x-shader/x-fragment" id="fragment-shader">
 #version 100
 precision mediump float;
 // On définit une variation radiale (à partir du centre)
@@ -71,13 +75,15 @@ void main() {
     0.1/distanceSqrd,
     0.0, 1.0 );
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<pre class="brush: js hidden">;(function(){
-</pre>
+```js hidden
+;(function(){
+```
 
-<pre class="brush: js">"use strict"
+```js
+"use strict"
 window.addEventListener("load", setupWebGL, false);
 var gl,
   program;
@@ -132,9 +138,10 @@ if (buffer)
 if (program)
   gl.deleteProgram(program);
 }
-</pre>
+```
 
-<pre class="brush: js hidden">function getRenderingContext() {
+```js hidden
+function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
@@ -154,8 +161,8 @@ if (program)
   return gl;
 }
 })();
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/textures-from-code">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/textures-from-code).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}
diff --git a/files/fr/web/api/webgl_api/by_example/video_textures/index.md b/files/fr/web/api/webgl_api/by_example/video_textures/index.md
index 9f5c93f1f9..e74d59bf5f 100644
--- a/files/fr/web/api/webgl_api/by_example/video_textures/index.md
+++ b/files/fr/web/api/webgl_api/by_example/video_textures/index.md
@@ -11,14 +11,14 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Video_textures
 original_slug: Web/API/WebGL_API/By_example/Les_textures_vidéos
 ---
-<div>{{draft}}{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{draft}}{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}
 
-<p>Cet exemple illustre comment utiliser des fichiers vidéos comme textures.</p>
+Cet exemple illustre comment utiliser des fichiers vidéos comme textures.
 
-<h3 id="Des_textures_à_partir_de_vidéos">Des textures à partir de vidéos</h3>
+### Des textures à partir de vidéos
 
-<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510)}}</p>
+{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510)}}
 
-<p>{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}