Having trouble to display code Snippets on your WordPress website? When you enter any code into any WordPress Post, Page, Comment or Widget then the default role of WordPress is to transform that code into functionality. This article will help you to easily display Code snippets on your WordPress site.
There are two ways to display Code Snippets:
• With Using Plugin
• Without Using Plugin
Let’s discuss both ways to display Code Snippets:
With Using Plugin:
• My favorite plugin is Syntax Highlighter Evolved plugin. You need to install and activate the Synatx Highlighter Evolved plugin. To Install the plugin, check out our step by step tutorial on how to install a WordPress plugin.
• After activate the Syntax Highlighter Evolved plugin, go to Settings from the right hand side menu and click the Syntax Highlighter to configure the plugin settings. Settings > Syntax Highlighter
• Default settings are enough for a normal website but If you want to change the settings then you can easily alter the settings according to your taste.
• How to use this plugin? Simply put the shortcodes on any Post, Page, Comment or Widget to display the codes. Just wrap your code in [language], such as [php]code here[/php] or [css]code here[/css] like this:
echo “Hello World”;
Without Using Plugin:
• It’s simple to display code snippets without using plugin in WordPress Post, Page, Comment or Widget. There are two HTML tags which will change the text into a monospaced font. They are <code> and <tt>. This tag
will tell Worpress not to transform this code into functionality or simply display those codes as it is. Simply wrap all your codes inside <code>.
• If you want to add some style, then use this tag <pre>. This tag will add a block for the code. Pre means “Preformatted text”.
• It’s also very important to insert code by encoding the code into HTML entities. Like this:
>?php echo "Hello World"; ?<
• Also, I just want to let you know that it is difficult to convert your codes into HTML entities manually. There is one tool available like this one, that can help you to convert your codes into HTML entities.
<pre><code>Your block of code here.</code></pre>
Liked this article then why not subscribe to our feeds.