{"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":"2024-03-26T14:53:49","modified_gmt":"2024-03-26T14:53:49","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<\/em> block lets you add and display code snippets for others to view.<\/p>\n\n\n\n

Code<\/em> 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

To add the Code<\/em> block, open the block inserter by clicking the (+<\/strong>) 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.<\/p>\n\n\n\n

A demonstration to add and use code block<\/figcaption><\/figure>\n\n\n\n

Alternatively, you can type \/code on the editor to insert the Code<\/em> 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 Block<\/em> shows the following buttons:<\/p>\n\n\n\n