Como adicionar uma barra de rolagem vertical aos blocos de código?

Quando você tem códigos longos dentro dos blocos de código, o bloco de código consumirá mais espaço e aumentará o comprimento do artigo. É bom ter uma barra de rolagem vertical para os blocos de código quando seu tamanho aumenta mais do que um pixel específico. Verifique a solução abaixo para implementar isso em seu site de base de conhecimento.

Solução

Para implementar apenas em artigos específicos

1. Adicione a tag abaixo em seu artigo para a qual você deseja uma barra de rolagem em blocos de código.

   <div class="scroll">
   

2. Navegue até Configurações () > site da base de conhecimento > Personalizar site > CSS e JavaScript personalizados no portal da base de conhecimento.

3. No painel de navegação esquerdo, clique na guia CSS e cole o seguinte snippet de CSS:

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

4. Insira o tamanho de pixel desejado.

5. Clique em Salvar no canto superior direito.

   

Resultado

Para implementar em todos os artigos

1. Navegue até Configurações () > site da base de conhecimento > Personalizar site > CSS e JavaScript personalizados no portal da base de conhecimento.

2. No painel de navegação esquerdo, clique na guia CSS e cole o seguinte snippet de CSS:

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

3. Insira o tamanho de pixel desejado.

4. Clique em Salvar.

   

   NOTA

   Quando você usa o snippet acima, o ícone superior da barra de rolagem vertical no bloco de código fica oculto.

Resultado