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 prend plus d’espace et augmente la longueur de l’article. Il est utile d’avoir une barre de défilement verticale pour les blocs de code lorsque leur taille augmente plus qu’un pixel spécifique. Consultez la solution ci-dessous pour l’implémenter sur votre site de base de connaissances.

Solution

Appliquer la barre de défilement verticale dans des articles spécifiques au sein des projets KB Site 1.0

1. Ajoutez l’étiquette ci-dessous dans votre article pour laquelle 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. Depuis le panneau de navigation de gauche, cliquez sur l’onglet CSS et collez l’extrait CSS suivant :

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

4. Entrez la taille de pixel désirée.

5. Cliquez sur Enregistrer en haut à droite.

   

Conséquences

Appliquer la barre de défilement verticale 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. Depuis le panneau de navigation de gauche, cliquez sur l’onglet CSS et collez l’extrait CSS suivant :

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

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

3. Entrez la taille de pixel désiré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 serait cachée.

Conséquences