This how to shares how to display code in WordPress posts. The main idea is the integration of code such as HTML or JavaScript into a normal article and in the same time allow users to easily copy the code for pasting it for their needs.
This post consists of 3 key chapters:
- How To Display Code in WordPress Posts
- How to do this in WordPress
- How to get more information about the HTML pre Tag
How To Display Code in WordPress Posts
There is a simple HTML Tag that you can leverage on to display Code (e.g. HTML, JavaScript) like the below. This HTML Tag is “pre“.
<pre> your code </pre>
Now one thing that in my opinion also is good to know. For example in case of displaying code like the above, than in the HTML lines there would be a double <pre> and a double </pre>. This of course does not work, hence the solution would be to leverage on the following characters translation:
< should become <
> should become >
Therefore, to display the code as in the above example, the code would look like this:
HTML pre Code example
How to do this in WordPress
The above is all great, but where can the HTML code be placed? Well, this is in WordPress very simple. Simply click on the upper right corner of the WordPress Post on “Text”.
Click on Text in a WordPress
How to get more information about the HTML pre Tag
To learn more about the HTML pre Tag this article maybe helps: HTML Pre Tag
To learn more about HTML in general, this link maybe helps: Mozilla Developer pages
