add preview to html samples

content/posts/transition-2.md

@@ -62,7 +62,7 @@ déplacement. Ppur ça, on va dans l'ordre :
   - le basculer en position relative et lui passer les coodonnées de départ
   - déclencher le déplacement jusqu'à sa position dans le conteneur d'arrivée
 
-{% highlight js linenos %}
+``` js
 function move_into(el, destEl) {
   let startPos = el.getBoundingClientRect();
   console.log('start point', startPos.left, startPos.top);
@@ -84,21 +84,19 @@ function move_into(el, destEl) {
   el.style.left = "0";
   el.style.top = "0";
 }
-{% endhighlight %}
+```
 
 Si vous lisez l'anglais, ce qu'on vient de voir devrait être assez lisible. Le
 plus obscur est certainement l'utilisation de `void`. Ligne 16, On utilise la
 commande 
-
+``` js
-{% highlight js %}
   void el.offsetLeft;
-{% endhighlight %}
+```
-
+pour obliger javascript à constater l'état de départ, avant de rentrer les
-pour obliger javascript à constater l'état de
+coordonnées d'arrivée.  En effet, sinon javascript ne voit pas le changement de
-départ, avant de rentrer les coordonnées d'arrivée.  En effet, sinon javascript
+valeur des coordonnées, il ne voit que la valeur finale. Et dans ce cas, pas
-ne voit pas le changement de valeur des coordonnées, il ne voit que la valeur
+d'animation de la transition, on va directement aux valeurs finales. Voilà le
-finale. Et dans ce cas, pas d'animation de la transition, on va directement aux
+fragment de html et sa prévisualisation :
-valeurs finales. Voilà le fragment de html et sa prévisualisation :
 
 ``` html
 <style>
@@ -134,3 +132,5 @@ concluant.
 
 [la suite]({{< relref transition-3 >}})
 
+{{< html_preview >}}
+

content/posts/transition-3.md

@@ -55,8 +55,7 @@ function toggle(el, destEl) {
 ```
 
 Tous ces points sont dans le fichier javascript inclus dans la page à partir de
-[là](/js/transition-3.js). Et maintenant le html et la
+[là](/js/transition-3.js). Et maintenant le html et la prévisualisation :
-prévisualisation :
 ``` html
 <style>
   .transition-deplacement {
@@ -86,5 +85,8 @@ prévisualisation :
   </div>
 </div>
 ```
+
 [la suite]({{< relref transition-4 >}})
 
+{{< html_preview >}}
+

content/posts/transition-4.md

@@ -100,4 +100,8 @@ Enfin le html :
   </svg>
 </div>
 ```
+
 [js]: /js/transition-4.js
+
+{{< html_preview >}}
+

content/posts/transition.md

@@ -5,14 +5,14 @@ tags = ["html"]
 # layout: code
 +++
 <script>
-function move_span() {
+  function move_span() {
-  let span = document.querySelector("#movableSpan");
+    let span = document.querySelector("#movableSpan");
-  if(span.classList.contains('slided')) {
+    if(span.classList.contains('slided')) {
-    span.classList.remove('slided');
+      span.classList.remove('slided');
-  } else {
+    } else {
-    span.classList.add('slided');
+      span.classList.add('slided');
+    }
   }
-}
 </script>
 
 Voilà un sujet délicat. Les transitions permettent de changer un paramètre de
@@ -26,7 +26,7 @@ exemple :
 
 ``` html
 <script>
-  function move_span(span) {
+  function move_span() {
     let span = document.querySelector("#movableSpan");
     if(span.classList.contains('slided')) {
       span.classList.remove('slided');
@@ -59,3 +59,5 @@ exemple :
 ```
 [la suite]({{% relref transition-2 %}})
 
+{{< html_preview >}}
+

layouts/shortcodes/html_preview.html

@@ -0,0 +1,25 @@
+{{/* a shortcode that builds a preview of all html samples */}}
+<style>
+  .code-toolbar {
+    margin-bottom: 20px;
+  }
+  .preview {
+    margin-bottom: var(--code-margin) 0;
+    padding: 20px;
+    border: 1px solid hsla(0,0%,100%,.1);
+  }
+</style>
+<script>
+  window.onload = function show_samples() {
+    let samples = document.querySelectorAll('pre.language-html');
+    for(i=0; i < samples.length; i++) {
+      let sample = samples[i];
+      let preview = document.createElement('div');
+
+      preview.innerHTML = sample.innerText;
+      preview.classList.add("preview");
+      sample.parentElement.parentElement.appendChild(preview);
+    }
+  }
+</script>
+