Are you struggling to Display code snippets in WordPress? For most of the site builders, there are times when they want to show the code as the normal text on their web page. I think you are the one among them. If you are reading this article means, you may have a trouble displaying code in WordPress. You are at the right place where you can find the easy way to show codes in WP Site.
How to Display Code Snippets in WordPress?
There are many types of websites in this Internet world. From those, some maintain the sites with fewer codes and some with more codes in their posts. Mostly in the programming sites, the site builders want to display codes on their blogs. For example, if you want to Guide about WordPress or other tutorials through your website then there will be more usage of codes in your content.
You can display the code same as your text format. But if you do so, there will be no difference between the normal text and the codes. Also, if you have written the code normally in the WordPress post editor, it may end up displaying something weird. Because in the Visual editor or WP text editor it processes some sort of codes. So, to avoid such problems and display the code differently from the normal text, there are some simple ways. By reading the complete article, you will get an idea about how to display Code Snippets in WordPress.
Display Codes in your WordPress Posts or Pages
Many site builders who use codes in their content want to show the Code in a different format on their WordPress site. But they don’t know how to add code snippets in WordPress. This difficulty was faced by one of my friends also. So, this is the reason why we are here to guide you the easy way to display code in WP site.
There are two ways to display code snippets in WordPress site. One is to post the code using Plugin, and other is to display code snippets without using Plugin. If you are using the website with more codes in the post then, the first method is recommended or else you can use the second method.
- Display Code using Plugin.
- Display the code without using Plugin.
Know How to Display Code using Plugin
In this method, you can display the code in different format using the plugin named ‘SyntaxHighlighter Evolved’. This plugin ‘SyntaxHighlighter Evolved’ allows you to post syntax-highlighted code easily to your site without making any manual changes or losing its formatting.
The steps to know how to use the SyntaxHighlighter Evolved plugin is as follows.
- In the WordPress Plugins section, click on Add New and search for ‘SyntaxHighlighter Evolved’ and click on ‘Install Now’ as shown below.
- On clicking that, you will direct to the ‘Installing Plugin: SyntaxHighlighter Evolved 3.2.1’ section.
- Click on ‘Activate Plugin’ and activate the SyntaxHighlighter Evolved plugin as shown below.
- On activation, you can find SyntaxHighlighter in the Settings section as shown below.
- Click on SyntaxHighlighter to make changes to the default version.
- By default, you can see the version 3.x and other options. So make the required changes and click on ‘Save Changes’ as shown below.
- This SyntaxHighlighter Evolved plugin uses some shortcodes to display code snippets in WordPress.
- Some example shortcodes formats for various languages are as follows.
Now let us see how the code will appear in your post using Plugin.
For PHP, enter the code in the WordPress text editor as shown below
This code will now appear as
For CSS, enter the code in the WordPress text editor as shown below
This code will now appear as,
As you can see above the SyntaxHighlighter highlights the code by adding some lines and numbers to the code. On the right side of the box, you can find View Source code, Print code, and Help icons on hovering code. These help the visitor of your site to copy and paste your code easily in their application.
Display the code without using Plugin
The site builders who don’t run any programming sites won’t display many codes on their blogs. If they want to display the code occasionally i.e. in some rare cases, then they can follow this method. Above we have explained the procedure to display code snippets in WordPress using Plugin. Now let us focus on how to display code without using Plugin. Because in this rare case, this method will improve the page load time of your website by avoiding any extra plugin.
- In WordPress there are <pre> and <code> which can display the code in different format from the normal text.
- You may face various problems while using <pre> and <code> tags because even if you have wrapped the code inside <pre> and <code> tags, some characters like ‘<‘ and ‘>’ are interpreted as code tags. This effects whole code block.
- So, to avoid this, you need to encode the code into HTML entities.
For example, I have to display the following code
<?php echo “Hello WordPress”; ?>
So, in my post, I have to write
<? php echo “Hello WordPress”; ?>
Note: Here, remember to replace “<” by “<” and “>” by “>”. Sometimes it is difficult for the programmer to change the code into HTML entities. So, it is better to use the HTML Entities Encoder / Decoder to make the work easier and effective.
To differentiate from normal text use <pre> and <code> tags as shown below.
<? php echo “Hello WordPress”; ?>
As a result, the code in your site will now display as
<? php echo "Hello WordPress"; ?>
For additional styling or to make the code more pleasing make the changes in style.css which will be in the theme editor.
If you are maintaining the programming site which requires more codes to display, then use the first method, i.e., ‘Display Code using Plugin’. Because this makes the work faster and also highlights your code in various styles and formats. So, the site builders who use codes in almost all posts can make use of this method and save their time and effort.
If you use the code in your site rarely then it is better to follow the second method, i.e., ‘Display Code Snippets in WordPress without using Plugin’. But this requires some experience in coding.
I think this post is the one stop solution for your query. If you want additional data or any other information regarding Code snippets please let us know through your comments.