{"id":11285105,"date":"2019-03-07T10:11:45","date_gmt":"2019-03-07T10:11:45","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=11285105"},"modified":"2026-05-25T06:25:23","modified_gmt":"2026-05-25T06:25:23","slug":"code-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/code-block\/","title":{"rendered":"Code block"},"content":{"rendered":"\n

Go back to the list of Blocks<\/strong><\/a><\/p>\n\n\n\n

Code<\/strong> block lets you add and display code snippets for others to view.<\/p>\n\n\n\n

Code<\/strong> block example:<\/p>\n\n\n\n

if ( condition ) {\n    action1();\n    action2();\n} elseif ( condition2 && condition3 ) {\n    action3();\n    action4();\n} else {\n    defaultaction();\n}<\/code><\/pre>\n\n\n\n
Add a Code block<\/h2>\n\n\n\n
To add the Code<\/strong> block, open the block inserter by clicking the (+<\/strong>) icon on the upper left corner of the editor. After that, look for Code<\/strong> using the search bar and click it to insert the block into the editor.<\/p>\n\n\n\n
A demonstration to add and use code block<\/figcaption><\/figure>\n\n\n\n
Alternatively, you can type \/code<\/code> on the editor to insert the Code<\/strong> block manually.<\/p>\n\n\n\n
\"Code<\/figure>\n\n\n\n
Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n
Block toolbar<\/h2>\n\n\n\n
Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor.<\/p>\n\n\n\n
The Code<\/strong> <\/em>Block shows the following buttons:<\/p>\n\n\n\n