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

Cuando tiene códigos largos dentro de los bloques de código, el bloque de código consumirá más espacio y aumentará la longitud del artículo. Es bueno tener una barra de desplazamiento vertical a los bloques de código cuando su tamaño aumenta más de un píxel específico. Consulte la siguiente solución para implementar esto en el sitio de su base de conocimientos.

Solución

Para implementar solo en artículos específicos

1. Agregue la siguiente etiqueta en su artículo para el que desea 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. En el panel de navegación izquierdo, haga clic en la pestaña CSS y pegue el siguiente fragmento de CSS:

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

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

5. Haga clic en Guardar en la parte superior derecha.

   

Resultado

A implementar 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. En el panel de navegación izquierdo, haga clic en la pestaña CSS y pegue el siguiente fragmento de CSS:

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

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

4. Haga clic en Guardar.

   

   NOTA

   Al utilizar el fragmento anterior, el icono superior de la barra de desplazamiento vertical en el bloque de código estaría oculto.

Resultado