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

2_Screenshot-To_implement_in_only_specific_articles.png

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

1_Screenshot-add_a_vertical_scrollbar_to_the_code_blocks.png

  1. Go to Settings -> Knowledge base site -> Custom CSS & JavaScript, and Custom CSS tab is the default section

  2. Paste the below CSS snippet in the window

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

  1. Enter the desired pixel size

  2. Click Save

Outcome

3_Screenshot-vertical_scrollbar_outcome.png


To implement in all articles

4_Screenshot-all_articles_verticalBar.png

  1. Go to Settings -> 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;
}
  1. Enter 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

3_Screenshot-vertical_scrollbar_outcome.png