How to add a vertical scrollbar to the code blocks?
  • 30 Jun 2022
  • 1 Minute à lire
  • Contributeurs
  • Sombre
    Lumière
  • PDF

How to add a vertical scrollbar to the code blocks?

  • Sombre
    Lumière
  • PDF

There is no French content available for this article, You are viewing the fallback version (English).

When you have long codes inside the code blocks, the code block will consume more space and increases the article length. It is good to have a vertical scrollbar to the code blocks when its size increases more than a specific pixel. Check the below solution to implement this in your Knowledge base site.


Solution

To implement in only specific articles

4_Screenshot-Scrollbar_code_block_editor

  1. Add the below tag in your articles for which you want a scrollbar in code blocks
<div class="scroll">

2_Screenshot-Scrollbar_code_block_Portal

  1. Go to SettingsKnowledge base siteCustom CSS & JavaScript, and Custom CSS tab is the default selection
  2. Paste the below CSS snippet in the window
.scroll div.code-toolbar {
height: 280px;
overflow-x: hidden !important;
overflow-y: auto !important;
}

  1. Type in the desired pixel size
  2. Click Save

Outcome

1_Screenshot-Scrollbar_code_block


To implement in all articles

3_Screenshot-Scrollbar_code_block_Portal_all

  1. Go to SettingsKnowledge base siteCustom CSS & JavaScript, and Custom CSS tab is the default selection
  2. Paste the below CSS snippet in the window
.code-toolbar pre {
max-height: 300px;
}
  1. Type in the desired pixel size
  2. Click Save

When you use the above snippet, the top icon of the vertical scrollbar in the code block would be hidden.


Outcome

5_Screenshot-Scrollbar_code_block_full


Cet article vous a-t-il été utile ?