Code Block

Go back to the list of Blocks

Code block lets you add and display code snippets for others to view.

Code block example:

if ( condition ) {
    action1();
    action2();
} elseif ( condition2 && condition3 ) {
    action3();
    action4();
} else {
    defaultaction();
}

To add the Code block, open the block inserter by clicking the (+) icon on the upper left corner of the editor. After that, look for Code using the search bar and click it to insert the block into the editor.

Alternatively, you can type /code on the editor to insert the Code block manually.

Detailed instructions on adding blocks

Block toolbar

Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor.

The Code Block shows the following buttons:

• Transform to
• Moving handles
• Bold
• Italic
• Link
• More Rich Text controls
• More options

Transform to

The Transform to button lets you change the Code block into a Paragraph, Columns, Group, Custom HTML or Preformatted blocks. 

Transforming the Code block into Group will give you the ability to change the background color around the code.

Moving handles

The dotted icons can be used to drag and drop a block to the place of your choosing. The up and down arrow icons can be used to shift a block up and down in your document.

Get more information about moving a block within the editor.

Change alignment

The change alignment tool lets you align the Code block within the content. You can choose one of the following alignment options:

None: Leaves the block alignment as is.

Wide width: Increase the block’s width beyond the content size.

Bold

You can select the text in the Code block and use the Bold option or Ctrl+B / Cmd+B on your keyboard to bold it, which is usually heavier than the surrounding text.

Italic

You can select the text in the Code block and use the Italic option or Ctrl+I / Cmd+I on your keyboard to italicize it, which usually appears slanted to the right.

Link

Use the link icon to hyperlink the highlighted text inside the Code block.

Read about more link editing options.

More rich text options

The drop-down menu to the left of the More options menu contains a range of additional rich text editing options such as highlighting, inline code, strikethrough, and more.

Read about more rich text editing options.

More options

The Options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate or remove the block.

Read about these and other settings.

Block settings

The block settings panel contains customization options specific to the block. To open it, select the block and click the Settings button next to the Publish button.

Color

The Code block provides color settings options to change the text and background colors.

For details, refer to this support article: Color settings overview

Typography

The Code block provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size.

For details, refer to this support article: Typography settings overview

Dimensions

The Code block provides dimension settings options to add padding and margin.

For details, refer to this support article: Dimension settings overview

Border

The Code block provides border settings options to add border color, width, and radius.

For details, refer to this support article: Border settings overview

Advanced

The Advanced tab lets you add HTML anchor and CSS class(es) to your block.

HTML anchor allows you to make a unique web address for a particular Code Block. Then, you’ll be able to link directly to a Code Block of your page.

The Additional CSS class(es) lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.