Others

How to Make SharePoint Code Snippet Web Part Collapsible

Muhammad Talha Oct 10, 2026 869 views

Question details

The user wants to make a lengthy code block collapsible or vertically scrollable within the modern SharePoint Code Snippet web part to conserve page space.

How to Make the SharePoint Code Snippet Web Part Collapsible

Product: SharePoint
Device & OS: not provided
Scenario: Displaying large segments of programming code on modern SharePoint pages without visually cluttering the site layout.
Observed behavior: The default modern SharePoint Code Snippet web part displays the full length of the code without any native settings to enable vertical scrolling or collapsible containers.

Before you start

Ensure you have the necessary Edit permissions for the SharePoint site and page where you intend to modify the web parts.

Solution 1Recommended

Use the Embed Web Part with an External Code Host

Since the native web part lacks scrollability, embedding external code hosts like GitHub Gist or CodePen is the most effective workaround to add scrollbars.

By utilizing a third-party code hosting platform, you can take advantage of their built-in UI features, such as line formatting and vertical scrollbars, and display them directly on your SharePoint page via an iframe.

Create a Gist or CodePen

Navigate to an external platform like GitHub Gist or CodePen. Paste your long code snippet there, save it, and copy the provided embed iframe code or URL.

Add the Embed Web Part

Go to your SharePoint page, click 'Edit' in the top right corner, hover over the page canvas to reveal the '+' icon, and select the 'Embed' web part.

Paste the Embed Code

In the property pane on the right side of the screen, paste the copied iframe code or URL into the website address field. The embedded code block will appear with built-in scrollbars.

Alternative: SharePoint Collapsible Sections: If you want to keep the code natively in SharePoint, you can place the standard Code Snippet web part inside a modern page section, and toggle the section settings to 'Make this section collapsible'.

Solution 2

Divide Code into Multiple Web Parts

If external sources are blocked by your organization's security policies, breaking the code into smaller segments can help manage page length.

Free Microsoft Office alternative

Looking for a Lightweight Office Suite?

While SharePoint is excellent for intranet pages, your daily document, spreadsheet, and presentation tasks deserve a fast and efficient tool. WPS Office offers a free, lightweight alternative to Microsoft Office with seamless format compatibility and a familiar, user-friendly interface.

1. Download the Installer: Visit the official WPS Office website and download the free installation package for your operating system.
2. Install the Software: Run the downloaded installer and follow the on-screen instructions to set up the suite on your device.
3. Open and Edit Your Files: Launch WPS Office and effortlessly open any existing Microsoft Word, Excel, or PowerPoint files without losing your formatting.

Free to use with comprehensive document editing featuresFully compatible with Microsoft Office formats (.docx, .xlsx, .pptx)Lightweight application that runs smoothly without laggingAll-in-one tabbed workspace for managing multiple documents easily

microsoft office alternative - wps office

Frequently Asked Questions

Are there future plans to make the Code Snippet web part collapsible?

Currently, Microsoft has no official roadmap items detailing updates for native scrollability or collapsible functionality in the Code Snippet web part. Users are highly encouraged to submit or upvote this feature request in the Microsoft Feedback Portal.

Can I use custom CSS to add a scrollbar to the modern SharePoint web part?

No. Modern SharePoint pages are heavily locked down and do not allow users to inject custom CSS directly via Script Editor web parts like classic pages did. Modifying native web part styles requires custom development.

Are there third-party solutions for displaying code in SharePoint?

Yes. If your SharePoint administrator allows it, you can install custom SharePoint Framework (SPFx) web parts from the SharePoint Store or GitHub. Many community-driven code formatter web parts support scrollbars, line numbering, and collapsible containers.

Office Quick Solutions