Ajout du composant DSFR "highlight"

README.md

@@ -122,6 +122,7 @@ Pour une démonstration, voir la [GitHub Pages](https://codegouvfr.github.io/ele
 - [Partie blog du site de DiaLog](https://dialog.beta.gouv.fr/blog/fr/) (code source : https://github.com/MTES-MCT/dialog/tree/main/blog)
 - [Site de la start-up Médiation Logement](https://mediationlogement.beta.gouv.fr/) (code source : https://github.com/betagouv/mediation-logement)
 - [Portail du BARRI du CISIRH](https://cisirh.github.io/portail-barri/fr/) (code source : https://github.com/CISIRH/portail-barri)
+- [Site du service Fonds de cartes]() (code source : https://github.com/betagouv/fonds-de-cartes)
 
 ## Licence
 

_includes/components/highlight.njk

@@ -0,0 +1,6 @@
+{% if not highlight %}{% set highlight = params %}{% endif %}
+<div class="fr-highlight">
+    <p>
+        {{ highlight.description }}
+    </p>
+</div>

content/fr/blog/posts/md-cheatsheet.md

@@ -57,6 +57,16 @@ Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir :
 
 [Voir aussi](/fr/blog/mise-en-avant/#exemple-d-utilisation-dans-un-fichier-markdown-md){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}
 
+## La mise en exergue
+
+```md
+:::highlight
+Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent <strong>automatiquement</strong> l’ARS aux familles déjà allocataires qui remplissent les conditions.
+:::
+```
+
+[Voir aussi](/fr/blog/mise-en-exergue/#exemple-d-utilisation-dans-un-fichier-markdown-md){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}
+
 <br>
 
 La syntaxe utilisée pour le [cartouche](https://www.11ty.dev/docs/data-frontmatter/) en début de fichier est communément le [YAML](https://learnxinyminutes.com/docs/yaml/).

content/fr/blog/posts/mise-en-exergue.md

@@ -0,0 +1,40 @@
+---
+title: Mise en exergue
+description: Comment intégrer une mise en exergue dans une page du site ?
+date: git Last Modified
+tags:
+  - DSFR
+  - composant
+---
+Chaque composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `.md`.
+
+## Utilisation
+
+### Exemple d'utilisation dans un fichier Markdown `.md`
+
+Seule la description est disponible.
+
+```md
+:::highlight
+Contenu **Mardown**
+:::
+```
+
+### Exemple d'utilisation dans un fichier Nunjucks `.njk`
+
+```njk
+{% raw %}
+{% from "components/component.njk" import component with context %}
+{{ component("highlight", {
+    description: "Contenu <strong>HTML</strong>"
+}) }}
+{% endraw %}
+```
+
+## Rendu
+
+:::highlight
+Contenu **Mardown**
+:::
+
+[Voir aussi la page du composant sur le site du DSFR](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/mise-en-exergue){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}

eleventy.config.js

@@ -169,6 +169,10 @@ module.exports = function (eleventyConfig) {
         mdLib.use(markdownItContainer, 'callout', customMarkdownContainers.callout(mdLib));
     });
 
+    eleventyConfig.amendLibrary("md", mdLib => {
+        mdLib.use(markdownItContainer, 'highlight', customMarkdownContainers.highlight(mdLib));
+    });
+
     eleventyConfig.amendLibrary("md", mdLib => {
         mdLib.use(markdownItContainer, 'quote', customMarkdownContainers.quote(mdLib));
     });

markdown-custom-containers.js

@@ -23,6 +23,30 @@ module.exports = {
             }
         }
     },
+    highlight: () => {
+        const re = /^highlight$/;
+        return {
+            validate: (params) => {
+                return params.trim().match(re);
+            },
+
+            render: (tokens, idx) => {
+                if (tokens[idx].nesting === 1) {
+                    // opening tag
+                    return `
+<div class="fr-highlight">
+    <p>
+`;
+                } else {
+                    // closing tag
+                    return `
+    </p>
+</div>
+\n`;
+                }
+            }
+        }
+    },
     quote: md => {
         const re = /^quote(\s+.*)?$/
         let params = undefined;