Code block allows you to add formatted code for others to view.

Adding block

To add a code, click on the Block Inserter icon and select the “Code” block.

add-code-block
Inserting code block

Alternatively, you can start typing /code in a new paragraph block, then press enter.

Editing block

Once you insert a code block, you can add or edit your code in the editor. Also, you will have all the standard block options as well.

view-code-block
Preview code block in the editor

Transforming block

Optionally, you can transform the code block into a preformatted block.

transform-code-block
Transform the code block into a preformatted block

Block interface

Although most blocks come with unique and block-specific controls, the code block is pretty straightforward, and only has the “More Options” control available to config.

more-options-code-block
More Options menu in code block

Clicking on the ⚙ cog icon next to the publish button will toggle the visibility of this panel.

sidebar-settings-code-block
The code block settings in the sidebar

While most blocks have specific options in the editor sidebar in addition to the options found in the block toolbar, the code block does not have extra options to alter.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and apply styles to the block as you see fit.

advanced-custom-css-field
The advanced section lets you add a CSS class to your block

Last updated: 1 month ago

We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies ― Learn more

Accept