How to add a vertical scrollbar to the code blocks

Code blocks in Document360 display their full content by default, which means a block containing a long script or configuration file can push everything below it far down the page. This makes articles harder to navigate and can discourage readers from reading the content that follows. Adding a vertical scrollbar fixes this by capping the code block at a set pixel height, readers scroll within the block itself, and the rest of the article stays in place.

When to use this

Use this customization when you want to:

• Prevent long code blocks from dominating the page layout and obscuring surrounding content.
• Keep article length predictable, especially in reference documentation or API guides with multiple code samples.
• Improve the reading experience on pages where code and prose need to coexist without one overwhelming the other.

Before you begin

• You need access to Settings () > Knowledge base site > Site customization > Custom CSS & JavaScript in the Knowledge base portal.
• Decide on the pixel height you want to cap your code blocks at before you start. 280px is a reasonable default that shows approximately 10–12 lines of code before scrolling begins.

Apply a vertical scrollbar to all articles

Use this approach to apply the scrollbar to every code block across your entire knowledge base site. Select the CSS snippet that matches your knowledge base site version.

1. Navigate to Settings (
   ) > Knowledge base site > Site customization > Custom CSS & JavaScript in the Knowledge base portal.
2. From the left navigation pane, select the CSS tab and paste the following snippet:

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

3. Replace the height value with your desired pixel size.
4. Click Save.

NOTE

When you use the Knowledge base site 2.0 snippet, the top icon of the vertical scrollbar in the code block will be hidden.

Outcome

Best practices

• Start with 280px. This height shows roughly 10–12 lines of code before the scrollbar activates, which is enough context for most readers to understand the code structure at a glance.
• Test after saving. Open an article with a long code block on your knowledge base site and verify the scrollbar appears and functions correctly before publishing.
• Consider reader experience alongside height. Very short heights (under 150px) can make code difficult to follow. Very tall heights (over 400px) may defeat the purpose of having a cap. Adjust based on the typical length of code in your articles.