Display Code Snippets

How to Display Code Snippets on Your WordPress Site?

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

Display Code Snippets

• 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.

• Syntax Highlighter Evolved allows you to easily post syntax-highlighted code to your site without losing its formatting or making any manual changes. It uses the SyntaxHighlighter JavaScript package by Alex Gorbatchev. All widely used languages are supported.

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:

[php]
<?php
echo “Hello World”;
?>
[/php]

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:
&gt;?php echo "Hello World"; ?&lt;

• 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.

• Simply use that tool and convert your PHP, HTML, JavaScript codes into HTML entities. After that you can go to your Post or page and paste them directly into your WordPress posts. To add more styling, simply wrap your codes like below:

<pre><code>Your 
   
   block
  
       of

   code
 
 here.</​code></​pre>

Liked this article then why not subscribe to our feeds.

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.