The Code display web part shows a block of source code on your SharePoint pages, highlighted according to the syntax of the chosen language, on a dark or light background. Your visitors read it exactly as you typed it and copy it in one click.

This article describes the web part's use cases, how to get started, its settings, entering the code on the page and the best practices to follow.

📋 Contents

1. About the web part
2. Add the web part to your page
3. Configure the web part
4. Enter the code and the title on the page
5. Best practices
6. What changes from the previous version

1. About the web part

Code display is made of three elements: an optional title, a code block highlighted according to its syntax, and a Copy button that puts the whole code in your visitors' clipboard.

Use cases

• Illustrate a tutorial or an installation guide with the commands to run.
• Document a script, a query or a configuration on a technical documentation page.
• Share a code snippet your colleagues copy without any typing mistake.

2. Add the web part to your page

1. Open the SharePoint page in edit mode by clicking Edit at the top right.
2. Where you want the web part, click the "+" button to open the web part catalog.
3. Search or scroll the catalog to select Jint - Code display, in the "Text, media, and content" category.
4. The web part is added where you want it, with its default values.

A newly inserted Code display carries the title "Code display" and an empty input area that shows "Paste or type your code here". As long as you haven't entered any code, your visitors don't see the web part.

3. Configure the web part

The configuration panel has three tabs: Design, Content and Visibility. Each setting applies to the page immediately.

3.1 Design tab

Code colors

Each theme has its own syntax colors: a dark background with light text, or a light background with dark text.

Appearance

The Appearance section sets the web part's border, shadow and corner radius.

By default, the web part follows your site's Jint theme: the section shows "Appearance values come from the theme. The theme is set in Jint Portal." and its settings are disabled. Click Customize to change them. To go back to the theme, click Reset from theme.

3.2 Content tab

Title

The title is entered and formatted directly on the page (see part 4). Turn Show title off to show the code block only.

Code

• Language: the code is highlighted according to the chosen language's syntax, while you type as well as when it's read. Choose Plain text for content without highlighting.
• Tab size: the display width of a tab typed in the code.
• Wrap long lines: off, a line wider than the block scrolls horizontally, without widening the page. On, it wraps; with line numbers, a wrapped line keeps a single number.

The block adapts its height to the length of the code: it never has a vertical scroll bar.

💡 If highlighting is unavailable for a language, the code shows without colors, but stays readable and copyable.

3.3 Visibility tab

Audience

Turn on Custom audience to restrict the web part to people or to members of Microsoft 365 groups. Only the chosen visitors, or members of at least one chosen group, see it. For everyone else, it takes up no space on the page.

Display

Turn on Schedule visibility to limit the display in time, with a Display start, a Display end, or both. Each date appears when you turn its switch on: the start is set to the present moment, the end to 7 days later.

⚠ If you turn on Custom audience without choosing anyone, no one sees the web part anymore. The section warns you: "No one can see this web part: choose at least one person or group."

⚠ If the display end comes before the start, the panel shows "The end date must be later than the start date." and the schedule doesn't limit the display until you fix it.

💡 In edit mode, you always see the web part, whatever its audience or schedule. A badge tells you so: "Audience", or the display dates.

4. Enter the code and the title on the page

The code

The code is entered directly on the page, not in the configuration panel. Click in the code area, then type or paste your code: it's highlighted as you type.

• Tab inserts a tab in the code, without leaving the area.
• Enter opens a new line with the indentation of the current line.
• Pasted text loses its original formatting.
• The code shows exactly as you entered it: tabs, indentation and line breaks included. It's never translated, even on a translated page.

The title

Click the title: it becomes editable and a toolbar shows above it. It sets the Text style (H1 to H4 or Body), the Font, the Font size, the Text color, bold, italic, underline and alignment. The Reset formatting button restores the original style. Click outside the title to confirm.

By default, the title is H4, black, 20 px and bold.

💡 As long as the web part follows the Jint theme, the title's toolbar shows the theme banner instead. Click Customize to format the title.

The Copy button

Your visitors click Copy to copy the whole code, without the line numbers. The button shows Copied for 2 seconds to confirm the copy.

⚠ In edit mode, the Copy button is disabled. Test the copy on the published page.

5. Best practices

Choose the right language

Accurate highlighting makes code much easier to read. For content that isn't code, such as a command output or an error message, choose Plain text.

Number the lines of commented code

In a tutorial that refers to specific lines, turn on Show line numbers. Your visitors copy the code without the numbers.

Match line wrapping to the content

Leave Wrap long lines off for code whose indentation matters. Turn it on for long commands, easier to read on a narrow screen.

Don't leave an empty block

Code that only contains spaces or empty lines isn't considered empty: your visitors then see an empty block. Delete the web part, or enter some code.

6. What changes from the previous version

If you used the previous version of the web part (see the article Code display):

• The code is entered and highlighted directly on the page.
• Your visitors have a Copy button, which leaves out the line numbers.
• Show line numbers works again.
• New settings: Code theme (Dark or Light), Tab size, Show copy button and Wrap long lines.
• The language list changes: Plain text, C++, Diff, Go, Java, KQL, Python, SCSS, SQL and YAML are added; HTML and XML replace Markup. ASP.NET, C-like, git, Less and Sass are no longer offered.
• The web part can show a title, formatted on the page.
• The panel is organized in three tabs, Design, Content and Visibility. The Visibility tab lets you restrict the web part to an audience and schedule its display.
• As long as no code is entered, the web part stays invisible to your visitors.