How to add a vertical scrollbar to the code blocks?

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 articles for which you want a scrollbar in code blocks

<div class="scroll">

2. Go to Settings → Knowledge base site → Custom CSS & JavaScript, and Custom CSS tab is the default selection
3. Paste the below CSS snippet in the window

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

4. Type in the desired pixel size
5. Click Save

Outcome

To implement in all articles

1. Go to Settings → Knowledge base site → Custom 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;
}

3. Type in the desired pixel size
4. Click Save

Outcome