Code Block

Go back to the list of Blocks

Just like the Posting Source Code feature works in the classic editor, with the Code Block you can add formatted code for others to view.

Code Block example:

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

In order to add a Code Block, click on the add block button and select the Code Block.

You can also type “/code” and hit enter in a new paragraph block to add one quickly.

Detailed instructions on adding blocks

Block Toolbar

Every block comes with unique toolbar icons and block specific user controls that allow you to manipulate the block right in the editor.

The Code Block shows standard three buttons:

• Change block type or style
• Moving handles
• More options

Change block type or style

You can transform the Code Block into the Custom HTML Block, Preformatted Block, or Group. The Group would give you the ability to change the background color around the Code Block.

Moving handles

The up and down arrow icons can be used to shift a block up and down in your document.

Detailed instructions on moving a block within the editor can be found here.

More Options

These controls give you the option to copy, duplicate, and edit your block as HTML.

Read about these and other settings.

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

Colors 

Text and background colors can be set on a per-block basis, allowing you to call attention to important content. Pick a color from the suggestions, or add a custom color using the color picker or by adding a color code.

See this guide for more information about changing colors.

Typography

Typography gives you the option to define the font size of your Code Block’s contents. The font size is how large the characters are displayed on a screen. The editor comes with five font size options by default and a custom font size option, where you can type in any size you want.

Get more details about changing typography settings.

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.