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.
![A demonstration to add and use code block](https://wordpress.org/documentation/files/2023/06/code-block.gif)
Alternatively, you can type /code on the editor to insert the Code block manually.
![Code block keyboard shortcut](https://wordpress.org/documentation/files/2021/02/Screenshot-454535.png)
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
![Code block toolbar](https://wordpress.org/documentation/files/2023/06/toolbar.png)
Transform to
The Transform to button lets you change the Code block into a Paragraph, Columns, Group, Custom HTML or Preformatted blocks.
![Code block toolbar with the transform option highlighted](https://wordpress.org/documentation/files/2023/06/image8.png)
Transforming the Code block into Group will give you the ability to change the background color around the code.
![Code block in a group with a colored background](https://wordpress.org/documentation/files/2019/03/Untitled-2676757.png)
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.
![Code block toolbar with moving handles highlighted](https://wordpress.org/documentation/files/2023/06/move-handles.png)
Get more information about moving a block within the editor.
Bold
![Code block toolbar with bold option highlighted](https://wordpress.org/documentation/files/2023/06/bold.png)
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
![Code block toolbar with italic option highlighted](https://wordpress.org/documentation/files/2023/06/italic.png)
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.
![Block settings panel](https://wordpress.org/documentation/files/2023/06/image9.png)
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.
![Advanced option](https://wordpress.org/documentation/files/2023/06/image-9.png)
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.
Changelog
- Updated 2023-08-09
- Replaced the link section with short summary linking to new dedicated page.
- Updated 2023-06-08
- Replaced “More rich text options” section with short summary linking to new dedicated page for rich text editing options.
- Updated 2023-06-02
- Screenshots for 6.2
- Revised formatting
- Added transform to paragraph support
- Updated 2021-02-27
- Added Typography option
- Updated 2020-09-13
- Screenshots and video as per WordPress 5.5
- Added feature changes in Block Toolbar
- Added feature changes in Block Settings
- Created 2019-03-07
Was this article helpful? How could it be improved?
Log in to submit feedback. If you need support with something that wasn't covered by this article, please post your question in the support forums.