¿Cómo añadir una barra de desplazamiento vertical a los bloques de código?

Cuando tienes códigos largos dentro de los bloques de código, el bloque de código ocupa más espacio y aumenta la longitud del artículo. Es bueno tener una barra de desplazamiento vertical para los bloques de código cuando su tamaño aumenta más que un píxel específico. Consulta la solución a continuación para implementarla en tu página de base de conocimientos.

Solución

Aplicar la barra de desplazamiento vertical en artículos específicos dentro de proyectos KB Site 1.0

1. Añade la etiqueta de abajo en tu artículo para la que quieras una barra de desplazamiento en bloques de código.

   <div class="scroll">

2. Vaya a Configuración () > sitio de la base de conocimientos > Personalizar sitio > CSS y JavaScript personalizados en el portal de la base de conocimientos.

   

3. Desde el panel de navegación izquierdo, haz clic en la pestaña CSS y pega el siguiente fragmento de CSS:

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

4. Introduce el tamaño de píxel deseado.

5. Haz clic en Guardar en la esquina superior derecha.

   

Resultado

Para aplicar la barra de desplazamiento vertical en todos los artículos

1. Vaya a Configuración () > sitio de la base de conocimientos > Personalizar sitio > CSS y JavaScript personalizados en el portal de la base de conocimientos.

2. Desde el panel de navegación izquierdo, haz clic en la pestaña CSS y pega el siguiente fragmento de CSS:

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

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

3. Introduce el tamaño de píxel deseado.

4. Haz clic en Guardar.

   NOTA

   Cuando usas el fragmento anterior, el icono superior de la barra de desplazamiento vertical en el bloque de código quedaría oculto.

Resultado