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

1. Add the below tag in your article for which you want a scrollbar in code blocks.

<div class="scroll">

2. Go to the Settings () icon > Knowledge base site > Custom CSS & JavaScript, and Custom CSS tab is the default section.
3. Paste the below CSS snippet in the window.

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

4. Enter the desired pixel size.
5. Click Save.
   

Outcome

To implement in all articles

1. Go to the Settings () icon > Knowledge base site > Custom CSS & JavaScript, and Custom CSS tab is the default section.
2. Paste the below CSS snippet in the window.

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

3. Enter the desired pixel size.
4. Click Save.

Outcome