1. Home
  2. WordPress
  3. WordPress Admin Editor
  4. Block Editor
  5. Block Editor: Adding a Code Block in WordPress Posts

Block Editor: Adding a Code Block in WordPress Posts

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.

  1. Open a post or page editor
  2. Click the plus button to add a blockplus button image
  3. Select the code blockcode image
  4. Enter the text you want to be formatted as code into the code blockwrite code image

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.code block image

Updated on July 28, 2023

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support