WP Enthusiast WP Professional WP Professional Plus PairSIM WordPress Podcast Websites
Distinguishing the difference between regular text and code can be very helpful in technical articles. You can also change WordPress fonts and headings to help clarify sections. If you are looking to access the code editor in Gutenberg, see our article: Block Editor: How to Access the Code Editor.
Make sure you are using the Gutenberg block editor. If you upgraded to WordPress 5, then your post and page editor will default to use the Gutenberg editor. If you are still using WordPress 4 (or earlier) or have the Classic Editor installed, then your editor will not work with this tutorial.
Adding Code Block in WordPress Gutenberg
This is a tutorial for adding a code block, which only formats your text to look like code. It does not run the code; it merely displays it. If you wish to edit the code and run it, see our article, How to Open Your Post's Code Editor.
- Open a post or page editor
- Click the plus button to add a block
- Select the code block
- Enter the text you want to be formatted as code into the code block
All text within the code block will be formatted however your theme formats code. Click the Preview button to see a preview of how this will look when published.