Affichage de code

jdb-code

Affichage de code

JdB.CSS fournit plusieurs classes pour afficher du code de manière élégante, que ce soit en ligne dans un paragraphe ou dans des blocs de code séparés.

Code en ligne

Pour afficher du code au sein d'un texte, utilisez la balise <code> ou la classe jdb-codespan. Cette classe est parfaite pour les noms de variables, de fonctions ou de petits extraits de code.

Exemple : La variable userName contient le nom de l'utilisateur. Vous pouvez également utiliser la fonction getUserData() pour récupérer les données.

Avec la classe : const result = calculateTotal();

Code :

<p>La variable <code>userName</code> contient le nom de l'utilisateur.</p>
<p>Avec la classe : <span class="jdb-codespan">const result = calculateTotal();</span></p>

Blocs de code

Pour afficher des blocs de code plus importants, utilisez la classe jdb-code sur un élément <pre>. Cette classe offre un style adapté avec une police monospace et un arrière-plan distinct.

function greet(name) {
  return `Bonjour, ${name} !`;
}

const message = greet("Marie");
console.log(message);

Code :

<pre class="jdb-code">
  function greet(name) {
    return `Bonjour, ${name} !`;
  }

  const message = greet("Marie");
  console.log(message);
</pre>

Blocs de code responsive

Combinez jdb-code avec jdb-responsive pour rendre vos blocs de code adaptatifs et éviter les débordements horizontaux sur les petits écrans.

const config = {
  apiEndpoint: "https://api.example.com/v1",
  timeout: 5000,
  maxRetries: 3,
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer token123456789"
  }
};

Code :

<pre class="jdb-code jdb-responsive">
  const config = {
    apiEndpoint: "https://api.example.com/v1",
    timeout: 5000,
    maxRetries: 3,
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer token123456789"
    }
  };
</pre>

Code avec police monospace

Vous pouvez aussi utiliser la classe jdb-monospace sur n'importe quel élément pour appliquer une police à chasse fixe.

Ce texte utilise une police monospace, idéale pour afficher du code ou des données techniques : 123456789

Variable: userName
Type: String
Valeur: "Marie Dupont"

Code :

<p class="jdb-monospace">Ce texte utilise une police monospace</p>
<div class="jdb-monospace jdb-padding">
  Variable: userName
  Type: String
  Valeur: "Marie Dupont"
</div>

N'oubliez pas d'échapper les caractères HTML (< → <, > → >, & → &) lorsque vous affichez du code HTML dans vos blocs. La classe notranslate empêche les outils de traduction automatique de modifier votre code.