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

Les blocs de code dans Document360 affichent leur contenu complet par défaut, ce qui signifie qu’un bloc contenant un script long ou un fichier de configuration peut pousser tout ce qui se trouve en dessous très bas sur la page. Cela rend les articles plus difficiles à naviguer et peut décourager les lecteurs de lire le contenu qui suit. Ajouter une barre de défilement verticale corrige cela en limitant le bloc de code à une hauteur de pixel fixe, les lecteurs défilent à l’intérieur du bloc lui-même, et le reste de l’article reste en place.

Quand utiliser cela

Utilisez cette personnalisation lorsque vous souhaitez :

• Empêcher les longs blocs de code de dominer la mise en page et d’obscurcir le contenu environnant.
• Gardez la longueur des articles prévisible, notamment dans la documentation de référence ou les guides API avec plusieurs exemples de code.
• Améliorez l’expérience de lecture sur les pages où le code et la prose doivent coexister sans que l’un ne submerge l’autre.

Avant que tu commences

• Vous devez accéder aux paramètres () > site de la base de connaissances > personnalisation du site > CSS & JavaScript personnalisés dans le portail de la base de connaissances.
• Décidez de la hauteur des pixels à laquelle vous souhaitez limiter vos blocs de code avant de commencer. 280px est un défaut raisonnable qui affiche environ 10 à 12 lignes de code avant que le défilement ne commence.

Appliquez une barre de défilement verticale à tous les articles

Utilisez cette approche pour appliquer la barre de défilement à chaque bloc de code de l’ensemble de votre site de base de connaissances. Sélectionnez le snippet CSS qui correspond à la version de votre site de base de connaissances.

1. Naviguer dans les paramètres (
   ) > site de la base de connaissances > personnalisation du site > CSS & JavaScript personnalisés dans le portail de la base de connaissances.
2. Depuis le panneau de navigation de gauche, sélectionnez l’onglet CSS et collez l’extrait suivant :

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

3. Remplacez la valeur de hauteur par la taille de pixel souhaitée.
4. Cliquez sur Enregistrer.

NOTE

Lorsque vous utilisez l’extrait du site de la Knowledge Base 2.0, l’icône supérieure de la barre de défilement verticale dans le bloc de code sera cachée.

Conséquences

Meilleures pratiques

• Commence par 280px. Cette hauteur affiche environ 10 à 12 lignes de code avant que la barre de défilement ne s’active, ce qui constitue un contexte suffisant pour que la plupart des lecteurs comprennent la structure du code en un premier coup d’œil.
• Test après avoir sauvegardé. Ouvrez un article avec un long bloc de code sur votre site de base de connaissances et vérifiez que la barre de défilement apparaît et fonctionne correctement avant de publier.
• Prenez en compte l’expérience des lecteurs en parallèle avec la taille. Des hauteurs très courtes (moins de 150px) peuvent rendre le code difficile à suivre. Des hauteurs très élevées (plus de 400px) peuvent aller à l’encontre de l’intérêt d’avoir un cap. Ajustez en fonction de la longueur typique du code dans vos articles.