How to Display Code in WordPress Posts

1. Wrap code snippets in the
tag to display the text in a monospaced font. Using the
tag, you can also change the style of the code text using CSS in the 'style.css' file. Replace special characters like left and right arrow brackets with character entity codes to prevent WordPress from executing the code. Here is an example:

That code will display in your post like so:
This is an HTML H1 heading

2. Use
instead of
to display code with all line breaks and spaces intact. With
tags, you do not need to use character entity codes, but you do need to be careful of how you type out your code. Long lines of code might break your design. Here is an example:

This is an HTMLHeading

The above code outputs this:
This is an HTMLheading


3. Install a plug-in to display large snippets of code. These plug-ins number lines, color code, alternate the background color for every line and apply word wraps. Log in to the WordPress dashboard, navigate to 'Plugins' and click 'Add New.' Search 'code' and look through the many plug-ins that display code. Install the one you want to use, activate it and then follow its instructions to paste code into your posts. Most of these plug-ins use shortcodes that you can wrap around text like HTML.