Comment ajouter une barre de défilement verticale aux blocs de code ?

Lorsque vous avez de longs codes à l’intérieur des blocs de code, le bloc de code consomme plus d’espace et augmente la longueur de l’article. Il est bon d’avoir une barre de défilement verticale vers les blocs de code lorsque sa taille augmente de plus d’un pixel spécifique. Consultez la solution ci-dessous pour l’implémenter sur votre site de base de connaissances.

Solution

A mettre en œuvre uniquement dans des articles spécifiques

1. Ajoutez la balise ci-dessous dans votre article pour lequel vous souhaitez une barre de défilement dans les blocs de code.

   <div class="scroll">
   

2. Accédez à Paramètres () > site de la base de connaissances > Personnaliser le site > CSS et JavaScript personnalisés dans le portail de la base de connaissances.

3. Dans le volet de navigation de gauche, cliquez sur l’onglet CSS et collez l’extrait de code CSS suivant :

   .scroll div.code-toolbar {
   height: 280px;
   overflow-x: hidden !important;
   overflow-y: auto !important;
   }

4. Entrez la taille de pixel souhaitée.

5. Cliquez sur Enregistrer en haut à droite.

   

Résultat

À mettre en œuvre dans tous les articles

1. Accédez à Paramètres () > site de la base de connaissances > Personnaliser le site > CSS et JavaScript personnalisés dans le portail de la base de connaissances.

2. Dans le volet de navigation de gauche, cliquez sur l’onglet CSS et collez l’extrait de code CSS suivant :

   .code-toolbar pre {
   max-height: 300px;
   }

3. Entrez la taille de pixel souhaitée.

4. Cliquez sur Enregistrer.

   

   NOTE

   Lorsque vous utilisez l’extrait ci-dessus, l’icône supérieure de la barre de défilement verticale dans le bloc de code est masquée.

Résultat