Merge pull request #912 from eleven-labs/fix/syntax-markdown

fix syntax markdown in html embeded

_posts/en/2022-07-27-responsive-accessible-typography.md

@@ -77,6 +77,7 @@ The **px unit** is a very popular unit in the front-end development world. Even
 This is why body text has a better result when using the **rem unit, which is relative to the font size of the root element**. All major browsers set a default font size of 16px, so this is the value that developers use as reference in their CSS code.
 
 <div  class="admonition info"  markdown="1"><p  class="admonition-title">What is the root element? </p>
+
 As the [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) documentation states, the root is the top-level element in an HTML document.
 </div>
 
@@ -145,6 +146,7 @@ Ok, this is quite practical. But you can take this magic to another level.
 As Joshua W. Comeau wonderfully explains in his article "The Surprising Truth About Pixels and Accessibility", it is possible to take out the most of calc() **by storing the calculated values in CSS variables**.
 
 <div  class="admonition info"  markdown="1"><p  class="admonition-title">What are CSS variables? </p>
+
 [CSS variables are custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) that store specific values that are reused several times through an app. They are written in a specific notation (e.g., `font-size: --font-size-xs`) and are accessed using the `var()` function.
 </div>
 

_posts/fr/2020-02-05-open-street-map-une-alternative-a-google-map.md

@@ -152,6 +152,7 @@ Il existe, en HTML 5, un composant natif  ``navigator.geolocation`` pour géoloc
 ![]({{ site.baseurl }}/assets/2020-02-05-open-street-map-une-alternative-a-google-map/pop-in.jpeg)
 
 <div class="admonition important" markdown="1"><p class="admonition-title">Important</p>
+
 Il faut que le site soit en https pour que la géolocalisation HTML se fasse
 </div>
 

_posts/fr/2022-03-29-nestjs-le-cycle-de-vie-dune-requete.md

@@ -43,6 +43,7 @@ Voilà d'ailleurs un **sommaire** pour retrouver rapidement la partie qui vous i
 - [Conclusion](#conclusion)
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Note</p>
+
 Vous pouvez être totalement débutant en NestJS et quand même lire cet article. C'est peut-être même recommandé.
 </div>
 
@@ -52,6 +53,7 @@ Rien de tel qu'un schéma que je vous ai concocté pour entrer dans le vif du su
 ![]({{ site.baseurl }}/assets/2022-03-04-nestjs-le-cycle-de-vie-dune-requete/nest-lifecycle-schema.png)
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Note</p>
+
 Il s'agit d'un parcours plutôt exhaustif d'une requête, mais la seule étape réellement essentielle ici est le **Controller**. Il a pour rôle de recevoir votre requête, la traiter, et renvoyer une réponse. Tout le reste est facultatif.
 </div>
 
@@ -76,6 +78,7 @@ Tout d'abord, il existe 5 niveaux de déclarations :
 - Déclaration au niveau **paramètre de route**
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Note</p>
+
 Par exemple, un Interceptor peut être déclaré à 3 niveaux :
 
 - Globalement
@@ -180,6 +183,7 @@ async someRoute(@Param('id', ParseIntPipe) id: number): any {
 ```
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Note</p>
+
 L'annotation `@Param` permet de sélectionner un paramètre de l'URL, ici `:id`.
 </div>
 
@@ -188,6 +192,7 @@ Passons maintenant à l'explication de chacun de ces concepts que nous survolons
 ## Les Middlewares
 
 <div  class="admonition info"  markdown="1"><p  class="admonition-title">Niveaux de déclaration possibles</p>
+
 - Global
 - Module
 </div>
@@ -221,6 +226,7 @@ export class CurrentUserMiddleware implements NestMiddleware {
 Dans cet exemple, nous récupérons un potentiel objet `session` dans la requête, puis nous peuplons la requête avec un *user* complet, à l'aide de l'id trouvé dans la `session`. Enfin, nous n'oublions pas d'appeler `next()` pour continuer l'exécution.
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Note</p>
+
 Un Middleware doit implémenter la fonction `use()`.
 
 De plus, il doit se terminer par un appel à la fonction `next()` pour pouvoir passer à la suite des étapes d'exécution. Sans le `next()`, la requête est suspendue.
@@ -229,6 +235,7 @@ De plus, il doit se terminer par un appel à la fonction `next()` pour pouvoir p
 ## Les Guards
 
 <div  class="admonition info"  markdown="1"><p  class="admonition-title">Niveaux de déclaration possibles</p>
+
 - Global
 - Controller
 - Route
@@ -254,12 +261,14 @@ export class AdminRoleGuard implements CanActivate {
 Ici, on vérifie si l'utilisateur stocké plus tôt dans la requête a le rôle **ADMIN**. 
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Note</p>
+
 Un Guard doit implémenter la fonction  `canActivate()`, qui retourne un booléen, de manière synchrone ou dans une Promesse ou un Observable. 
 </div>
 
 ## Les Interceptors
 
 <div  class="admonition info"  markdown="1"><p  class="admonition-title">Niveaux de déclaration possibles</p>
+
 - Global
 - Controller
 - Route
@@ -291,12 +300,14 @@ L'Interceptor doit implémenter la fonction `intercept()` qui prend 2 arguments,
 - un **CallHandler**, qui donne accès à la réponse.
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Comment ça marche ?</p>
+
 L'interface `CallHandler` implémente la méthode `handle()`, qui retourne un Observable. C'est ainsi que l'Interceptor reste à l'écoute de la réponse. Réponse que vous pouvez ensuite manipuler comme n'importe quel Observable classique. Ici on utilise la fonction `plainToInstance()` de la librairie *class-transformer*, qui serialize un objet Javascript selon une classe donnée; ici un hypothétique UserDto.
 </div>
 
 ## Les Pipes
 
 <div  class="admonition info"  markdown="1"><p  class="admonition-title">Niveaux de déclaration possibles</p>
+
 - Global
 - Controller
 - Route
@@ -348,6 +359,7 @@ async findOne(): User {
 ```
 
 <div  class="admonition important"  markdown="1"><p  class="admonition-title">Important</p>
+
 Avec l'annotation `@UseGuards()`, on utilise également un Guard (celui que nous avons écrit plus haut) au niveau de la route. Ainsi, nous sommes sûrs que l'utilisateur qui appelle cette route est bien un administrateur.
 </div>
 
@@ -358,6 +370,7 @@ Nous n'irons pas plus loin dans le traitement de la **requête**, sachez juste q
 ## Les Exception filters
 
 <div  class="admonition info"  markdown="1"><p  class="admonition-title">Niveaux de déclaration possibles</p>
+
 - Global
 - Controller
 - Route

_posts/fr/2022-08-24-phpstorm-tips-config-extensions.md

@@ -28,6 +28,7 @@ Bienvenue dans cet article qui j'espère, vous aidera à gagner en productivité
 <br />
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Note</p>
+
 Nous irons crescendo dans cet article, du plus populaire des tips à celui le moins connu. Le meilleur se trouvant à la fin, restez bien jusqu'au bout (oui, j'optimise mon readtime).
 </div>
 
@@ -53,6 +54,7 @@ Comme vous le voyez, dès que vous exécuterez une action pour laquelle il exist
 Si vous trouvez que certains raccourcis clavier sont inutiles pour vous et que vous en avez marre que Key Promoter vous les rappelle, vous pouvez cliquez sur le bouton **Action** de la notification et demander à l'extension de ne plus vous rappeler ce raccourci en particulier. Il est possible de spécifier ce comportement également directement dans la config de l'extension. 
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Note</p>
+
 De plus, si Key Promoter vous surprend à faire plusieurs fois la même action qui n'est liée à aucun raccourci, il vous proposera d'en créer un. On dit merci qui ?
 </div>
 
@@ -73,6 +75,7 @@ Heureusement, PhpStorm possède une extension pour cela, j'ai nommé *CodeGlance
 Très pratique, on s'en rend compte surtout à l'utilisation, rapidement on ne peut plus s'en passer.
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Note</p>
+
 Comme vous l'avez remarqué, oui je suis dans un mood light theme en ce moment. Le dark mode c'est classe, mais pas si vous voulez prendre soin de vos yeux. cf [Which colour scheme is better according to science ?](https://stitcher.io/blog/why-light-themes-are-better-according-to-science)
 </div>
 
@@ -100,6 +103,7 @@ Vous voilà à présent dans cette situation :
 Je trouve ça toujours émouvant de voir ce beau désert blanc épuré.
 
 <div  class="admonition important"  markdown="1"><p  class="admonition-title">Important</p>
+
 Pour afficher / faire disparaître votre arborescence de fichier, utilisez **Alt + 1**.
 Et pas de panique si vous pensez avoir perdu tout accès à votre **Main Menu**, j'y arrive dans un instant.
 </div>
@@ -136,6 +140,7 @@ Nous voilà arrivés à la dernière fonctionnalité que je vais vous présenter
 <br />
 
 <div  class="admonition important"  markdown="1"><p  class="admonition-title">Important</p>
+
 Pour l'activer, je vous le donne en mille : un petit coup de **Ctrl + Maj + A** => "Distraction free mode"
 </div>
 
@@ -157,6 +162,7 @@ Avez toutes ces astuces, libre à vous de piocher dans celles qui vous intéress
 Enfin, n'oubliez pas de vérifiez régulièrement les mises à jour de votre IDE <b>ET</b> de vos extensions.
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Quote</p>
+
 Votre mantra : "Un esprit sain dans un corps sain se doit d'utiliser un IDE sain".
 </div>
 

_posts/fr/2022-10-26-retour-sur-le-forum-php-2022.md

@@ -58,6 +58,7 @@ Le premier rappel et le plus important, qui a d'ailleurs été évoqué à de no
 Entre 2 requêtes distinctes, PHP oublie tout, ce qui est un avantage pour nous développeurs. Il est plus facile de coder sans se soucier de potentielles fuites mémoire entre deux requêtes, mais c'est également un coût en performance : à chaque requête, on ré-alloue la mémoire nécessaire, on ré-ouvre des connexions, etc. 
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Note</p>
+
 Plutôt que d'utiliser les traditionnels `malloc` & `mfree` natifs du langage C, PHP utilise son propre gestionnaire de mémoire ZMM (pour Zend Memory Manager) afin d'optimiser l'allocation de mémoire en PHP, qui s'effectue à chaque requête. 
 </div>
 
@@ -74,6 +75,7 @@ Eh bien, au risque de vous décevoir, il n'y a pas de solution magique (auquel c
 - Bien comprendre le fichier de configuration de PHP et travailler de pair avec les DevOps pour en fournir un qui soit à la fois **compatible** avec votre infrastructure, et **optimisé** pour votre application.
 
 <div  class="admonition important"  markdown="1"><p  class="admonition-title">Important</p>
+
 En ce qui concerne l'OPCache, l'activer ne suffit pas, le configurer CORRECTEMENT est un point central, au risque d'être totalement contre-productif.
 </div>
 
@@ -90,6 +92,7 @@ Une de mes conférences préférées, merci à Thibault Richard pour ce talk. La
 Ce design pattern implémente un système qui évalue un ensemble de **règles** pour définir les **actions** à mener.
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Note</p>
+
 C'est un design pattern avant tout indiqué dans un projet comprenant beaucoup de règles métier à vérifier. Si vous constatez une armée de `if (...)` qui commence à s'entasser dans votre code pour vérifier chacune d'entre elles, impactant la lisibilité et la testabilité de votre application, alors le Rules engine est fait pour vous.
 </div>
 
@@ -107,6 +110,7 @@ Votre code est à présent bien mieux découpé, et beaucoup plus facilement **t
 De plus, avec un framework comme Symfony, implémenter ce design pattern peut être plus rapide, grâce aux annotations `AutoconfigureTag` et `TaggedIterator`.
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Note</p>
+
 Vous pouvez même ajouter un attribut `priority` sur votre tag si vous souhaitez que vos règles soient appelées dans un ordre particulier, très pratique !
 
 Si des exemples de code sont plus parlant pour vous, retrouvez-en dans les [slides de Thibault](https://speakerdeck.com/trichard/un-moteur-bien-huile-forum-php-2022).
@@ -122,6 +126,7 @@ Ahhh, les dates... Ne partez pas tout de suite ! Je sais que c'est la némésis
 Pour venir à bout de ce problème, Andreas Heigl est là pour nous aiguiller.
 
 <div  class="admonition question"  markdown="1"><p  class="admonition-title">Question</p>
+
 Pourquoi est-ce si compliqué de tester des dates ?
 </div>
 
@@ -157,6 +162,7 @@ Pour retrouver les slides d'Andreas :
 Une fois n'est pas coutume, Kévin Dunglas a quelque chose sous la main à nous montrer. Et une fois n'est pas coutume, c'est un outil **expérimental** qu'il a créé lui-même qu'il nous présente. Voici FrankenPHP.
 
 <div  class="admonition question"  markdown="1"><p  class="admonition-title">Question</p>
+
 Quel est le problème de base ?
 </div>
 
@@ -175,6 +181,7 @@ L'avantage ? Plus besoin de dockeriser plusieurs containers pour notre serveur w
 À présent, vous avez un seul service. One service to rule them all, and in docker, bind them. On parle de Docker, mais FrankenPHP est tout aussi facile d'utilisation sans.
 
 <div  class="admonition note"  markdown="1"><p  class="admonition-title">Note</p>
+
 Pour la config ? Plus qu'à éditer votre **Caddyfile** pour la partie Web server, et votre **php.ini** pour la partie applicative. FrankenPHP vient également avec une intégration spéciale Symfony pour en facilité l'interopérabilité.
 </div>
 
@@ -185,7 +192,8 @@ Mais une des killers features de FrankenPHP, c'est son **Worker Mode**. Grâce 
 Ce comportement est compatible avec Symfony et Laravel, et permet d'atteindre des performances assez dingues, d'après le benchmark que Kévin nous présente.
 
 <div  class="admonition important"  markdown="1"><p  class="admonition-title">Important</p>
-S'il est <b>découragé</b> d'utiliser FrankenPHP en production pour le moment, c'est d'autant plus le cas pour son Worker Mode. Vous pouvez être sûr de faire face à des bugs en vous y essayant. Préférez plutôt tester l'outil en local et remonter les bugs à Kévin (voire de faire une PR, FrankenPHP est open source !) pour le faire grandir en maturité.
+
+S'il est **découragé** d'utiliser FrankenPHP en production pour le moment, c'est d'autant plus le cas pour son Worker Mode. Vous pouvez être sûr de faire face à des bugs en vous y essayant. Préférez plutôt tester l'outil en local et remonter les bugs à Kévin (voire de faire une PR, FrankenPHP est open source !) pour le faire grandir en maturité.
 </div>
 
 Et pour finir, le site de [FrankenPHP](https://frankenphp.dev/), et ci-dessous notre habituel sketchnote :