How to add a vertical scrollbar to the code blocks?
  • 30 Jun 2022
  • 1 Minute to read
  • Contributors
  • Dark
    Light
  • PDF

How to add a vertical scrollbar to the code blocks?

  • Dark
    Light
  • PDF

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


Was this article helpful?