add links and ignore markdown sections in markdown modal (#519)

Author: bellangerq

confiture-web-app/src/assets/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Tous les changements notables de Ara sont documentés ici avec leur date, leur catégorie (nouvelle fonctionnalité, correction de bug ou autre changement) et leur pull request (PR) associée.
 
+## 25/10/2023
+
+### Autres changements ⚙️
+
+- Ajoute les instructions pour faire des liens et ignorer le formattage en Markdown ([#519](https://github.com/DISIC/Ara/pull/519))
+
 ## 29/09/2023
 
 ### Corrections 🐛

confiture-web-app/src/components/MarkdownHelpModal.vue

@@ -21,16 +21,25 @@ const italicExample = `_italique_`;
 const boldExample = `**gras**`;
 const boldItalicExample = `**_gras-italique_**`;
 const strikedExample = `~~barré~~`;
-const codeExample = "`code mis en forme` dans une phrase.";
+const codeExample =
+  "Utiliser la balise `<main>` pour indiquer la zone de contenu principal.";
 const codeBlockExample = `\`\`\`
 Bloc de code
 \`\`\`
 `;
 const quoteExample = `> Citation mise en forme`;
+const specialCharExample = `\`\`\`
+\\> Élément ignoré par le Markdown
+\\> \\_Élément ignoré par le Markdown\\_
+\`\`\`
+`;
+const specialCharExampleResult =
+  "> Élément ignoré par le Markdown <br />> _Élément ignoré par le Markdown_";
 const unorderedListExample = `* un élément
   * un sous élément`;
 const orderedListExample = `1. élément un
 2. élément deux`;
+const linkExample = `L’outil Ara est réalisé par [DesignGouv](https://design.numerique.gouv.fr/).`;
 </script>
 
 <template>
@@ -98,6 +107,14 @@ const orderedListExample = `1. élément un
                       Citation de texte
                     </a>
                   </li>
+                  <li>
+                    <a
+                      class="fr-summary__link"
+                      href="#markdown-caracteres-speciaux"
+                    >
+                      Caractères spéciaux
+                    </a>
+                  </li>
                   <li>
                     <a class="fr-summary__link" href="#markdown-listes">
                       Listes
@@ -108,6 +125,11 @@ const orderedListExample = `1. élément un
                       Paragraphe et saut de ligne
                     </a>
                   </li>
+                  <li>
+                    <a class="fr-summary__link" href="#markdown-liens">
+                      Liens
+                    </a>
+                  </li>
                 </ol>
               </nav>
 
@@ -170,13 +192,17 @@ const orderedListExample = `1. élément un
                 Citation de code
               </h2>
               <p>
-                Vous pouvez citer du code ou une commande dans une phrase avec
-                des accents graves <code>`</code> uniques. Le texte entre les
-                accents graves sera mis en forme.
+                Pour afficher du code HTML, vous devez utiliser la syntaxe
+                suivante :
+              </p>
+              <h3 class="fr-text--md fr-text--bold">Code dans une phrase</h3>
+              <p>
+                Utilisez des accents graves <code>`</code> autour des balises
+                HTML.
               </p>
               <p class="fr-mb-3v">Exemple :</p>
               <pre><code>{{codeExample}}</code></pre>
-              <p class="fr-mb-3v">S’affichent ainsi :</p>
+              <p class="fr-mb-3v">S’affiche ainsi :</p>
               <MarkdownRenderer :markdown="codeExample" />
 
               <h3 class="fr-text--md fr-text--bold">Bloc de code</h3>
@@ -204,6 +230,20 @@ const orderedListExample = `1. élément un
               <p class="fr-mb-3v">S’affiche ainsi :</p>
               <MarkdownRenderer :markdown="quoteExample" />
 
+              <!-- Caractères spéciaux -->
+              <h2 id="markdown-caracteres-speciaux" class="fr-h6 fr-mt-6w">
+                Caractères spéciaux
+              </h2>
+              <p>
+                Pour supprimer le formatage en Markdown des caractères spéciaux,
+                utilisez une barre oblique inversée <code>\</code> avant chaque
+                caractère spécial.
+              </p>
+              <p class="fr-mb-3v">Exemple :</p>
+              <pre><code>{{ specialCharExample }}</code></pre>
+              <p class="fr-mb-3v">S’affiche ainsi :</p>
+              <p v-html="specialCharExampleResult" />
+
               <!-- Listes -->
 
               <h2 id="markdown-listes" class="fr-h6 fr-mt-6w">Listes</h2>
@@ -236,6 +276,19 @@ const orderedListExample = `1. élément un
                 ligne. Deux espaces en fin de ligne suivi d’un retour à la ligne
                 permettent d'ajouter un saut de ligne.
               </p>
+
+              <!-- Liens -->
+
+              <h2 id="markdown-liens" class="fr-h6 fr-mt-6w">Liens</h2>
+              <p>
+                Vous pouvez créer un lien en plaçant le texte du lien entre
+                crochets <code>[]</code> suivis de l'URL entre parenthèses
+                <code>()</code>.
+              </p>
+              <p class="fr-mb-3v">Exemple :</p>
+              <pre><code>{{ linkExample }}</code></pre>
+              <p class="fr-mb-3v">S’affiche ainsi :</p>
+              <MarkdownRenderer :markdown="linkExample" />
             </div>
           </div>
         </div>