Are you interested in showcasing code snippets in your WordPress blog posts? If you’ve attempted to add code as plain text, you’ve probably noticed that WordPress does not render it accurately.
To ensure that no malicious code is inserted through a post editor to compromise your website, WordPress passes your content through various cleansing filters every time you save a post.
This article will demonstrate various methods for correctly displaying code on your WordPress site. You can choose the one that best suits your requirements after exploring each approach.
Method 1. Display Code in WordPress Using a Plugin
In this approach, we will utilize a WordPress plugin to present code in your blog posts. This technique is suggested for those who frequently include code snippets in their articles.
Here are the benefits of using this plugin compared to the default code block:
- It allows you to present any code in any programming language with ease.
- It displays the code with syntax highlighting and line numbers, making it easier to read and understand.
- Your readers can easily analyze and copy the code.
To get started, you must first install and activate the SyntaxHighlighter Evolved plugin.
Once activated, you can edit the blog post where you wish to insert the code. Then, add the “SyntaxHighlighter Code” block to your post.
In the post editor, you will find a new code block where you can input your code. Once you have added your code, you should proceed to the block settings located on the right column.
Here, you need to choose the language of your code such as PHP, CSS, Java, and others. You can also choose to turn off line numbers, highlight specific lines, set the first line number, and disable clickable links.
After making the necessary adjustments, save your post and preview it to see how it looks. The plugin provides a variety of color schemes and themes that you can select from. To change the color theme, go to Settings » SyntaxHighlighter page, and choose a color theme that you prefer. Additionally, you can modify SyntaxHighlighter settings and preview the code block at the bottom of the page before saving your changes.
Method 2. Display Code in WordPress Manually
The following approach is more intricate and may not produce desired results, making it appropriate for skilled users. It caters to those who rely on the old classic editor and wish to showcase code without utilizing a plugin.
The initial step is to utilize an online HTML entities encoder tool to encode your code.
This transformation will convert your code markup to HTML entities, enabling you to include the code and circumvent the WordPress cleanup filters.
Next, insert your encoded code into the text editor and enclose it with <pre> and <code> tags.
Method 1. Display Code Using The Default Editor in WordPress
For those who are new to coding or do not require frequent code displays, this approach is highly recommended.
To begin, edit the desired blog post or page where the code will be displayed. On the editing screen, add a new code block to the post. You can input the “code snippet” into the text field of the block.
The code block will provide a preview of the code entered. After ensuring that the code appears as desired, save and preview the blog post to see the code block in action.
When satisfied with the appearance of the code, publish the blog post. Depending on the WordPress theme in use, the code block may display differently on the website.
If you liked this article, then please subscribe to our YouTube Channel for more WordPress video tutorials. You can also find us on Facebook.