Use the Code Snippet WebPart in SharePoint pages

Modern SharePoint is great

Modern SharePoint has myriad improvements to its user interface compared to the old Classic versions, e.g. SharePoint 2013. You can easily insert a wide range of excellent out-of-the-box WebParts into your pages to provide amazing functionality, or simply craft a beautiful looking web page. The Text WebPart however is fairly limited in its formatting options, and requires some imagination and creativity for anything more than plain text.

SharePoint Text Formatting Options
SharePoint Text Formatting Options

As for inserting blocks of code, e.g. HTML, JavaScript or CSS, a WebPart didn’t exist for Modern SharePoint so we had to make do with the Text WebPart; adding colour and weight to any text representing lines of code. It was not as nice looking nor as easy to use as GitHub or CodePen’s code display. Thankfully, it has recently become far easier with a new WebPart designed specifically to display snippets of code in SharePoint.

The Code Snippet WebPart

Insert a Code Snippet from the WebPart Selector. Probably better to place it in a 2/3 or full column width area.

WebPart Selector
Choose Code Snippet from the WebPart Selector

Initially, the default display is for JavaScript, numbered lines and dark theme, but you can change these options to suit your needs.

Code Snippets WebPart
The Code Snippets WebPart

Then simply copy and paste a single line of code — or many lines — into the WebPart, and it will format and beautify with full syntax colouring. The colouring options appear similar to Visual Studio Code.

Code Snippet showing HTML syntax formatting
Code Snippet showing HTML syntax formatting

Leave a Comment

Your email address will not be published. Required fields are marked *