Visitors will be able to more easily read and copy the code.Ī plugin is also easier for your workflow if you frequently display code blocks in WordPress and don’t want to spend the time adding code blocks. First, it allows you to display code in any programming language with syntax highlighting and line numbers. Using a plugin has a few advantages over other approaches. How to Display Code in WordPress Using a Plugin For an easier workflow with more flexibility, you can use a WordPress plugin to add code blocks.įor a video explanation, check out this great tutorial from Elegant Themes: However, note that the Gutenberg code block does not support additional settings or formatting styles. Select the block, then in the settings menu click Advanced to display the custom CSS field. To modify its appearance, you can write custom CSS in the sidebar to style the block. The appearance of the code block on your site will vary depending on your WordPress theme. If you preview the post, you'll see that the code is displayed in its own block. Enter the code snippet in the text area of the block.Ĩ. Select the code block when it appears.Īlternatively, you can type '/code' and hit enter.ħ. Click the Add Block icon (the plus sign) and search for 'code'. Place your cursor where you want to display the code.Ĥ. Select Add New or hover over an existing post or page and select Edit.ģ. In your WordPress dashboard, click Posts or Pages.Ģ. If you want an easy way to display code on your site and have the Gutenberg editor enabled, you can add code to your page or post with a dedicated block. How to Display Code in WordPress With the Gutenberg Editor We’ll discuss each of these processes in detail below so you can choose the method that best meets the needs of your WordPress site. Or, you can manually convert your code into special characters called HTML entities, which is recommended for advanced users. You can also use a plugin for an easier workflow. You can use the Gutenberg editor if you’re a beginner who doesn’t need to display code often. There are three options for displaying code in WordPress.

Word insert code block