How to add a vertical scrollbar to the code blocks?
- 30 Jun 2022
- 1 Minute zum Lesen
-
Mitwirkende
-
Drucken
-
DunkelLicht
-
pdf
How to add a vertical scrollbar to the code blocks?
- Aktualisiert am 30 Jun 2022
- 1 Minute zum Lesen
-
Mitwirkende
-
Drucken
-
DunkelLicht
-
pdf
There is no German 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
- Add the below tag in your articles for which you want a scrollbar in code blocks
<div class="scroll">
- Go to Settings → Knowledge base site → Custom CSS & JavaScript, and Custom CSS tab is the default selection
- Paste the below CSS snippet in the window
.scroll div.code-toolbar {
height: 280px;
overflow-x: hidden !important;
overflow-y: auto !important;
}
- Type in the desired pixel size
- Click Save
Outcome
To implement in all articles
- Go to Settings → Knowledge base site → Custom CSS & JavaScript, and Custom CSS tab is the default selection
- Paste the below CSS snippet in the window
.code-toolbar pre {
max-height: 300px;
}
- Type in the desired pixel size
- Click Save
When you use the above snippet, the top icon of the vertical scrollbar in the code block would be hidden.
Outcome
War dieser Artikel hilfreich?