WordPress Plugin – Syntax Highlighter


In this lesson, we will discuss a famous WordPress PluginSyntax Highlighter. Normally, there is no need to show code snippets in the post. But websites which talk about web design and coding will need to show code snippets on their posts. There are HTML tags which can be used to show codes on the post like ‘pre’ and ‘code’ tags. But that require lots of manual work. This is because WordPress can’t render the output. Sometimes as we share HTML, then instead of showing code, it will display the final output. Here comes the need of SyntaxHighlighter Evolved.

Syntax Highlighter allows us to show the code instead of showing the final output. It also allows to copy the code and that’s one of the best advantages of this plugin. It allows to show the line numbers, chooses color schemes, makes URLs clickable, displays the toolbar etc. It can display codes like PHP, CSS, HTML and etc. It allows displaying 30 languages.

In this article, we will discuss some important facts about this plugin.
 

How’s It Work?

You have to install the Syntax Highlighter. You can check how we can Install Plugins in WordPress.

After installing the plugin in your WordPress, navigate to Settings >> SyntaxHighlighter.
 

 
You can see the setting page of the plugin as shown in the screenshot. Here you can change settings as per your need. You can also go to the default settings.


 
You can use different shortcodes to display different languages. We are showing with some examples.

Embedding CSS code by adding the code between CSS shortcode:

.wide {
    padding-top: 0;
    padding-bottom: 0;
}
#wpadminbar .screen-reader-shortcut {
    position: absolute;
    top: -1000em;
}

 
Embedding PHP code by adding the code between PHP shortcode:

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

 
Embedding HTML code by adding the code between HTML shortcode:

<html>
<head></head>
  <body>
    <div class="first-div">
        This is a box of content!
    </div>
  </body>
</html>

 
Similarly, you can use other language shortcodes to display the code in the post.

You can see the shortcodes listed on the plugin setting page as shown in the screenshot:
 

 
We hope this article will be helpful for you.

You can check Idle User Logout Plugin used for security of WordPress.

Spread the love

Kapil Garg

Kapil Garg has 7 years of experience in building professional websites. He is a leading web developer, web designer and Google adwords certified partner. His passion is to designed and developed most impressive websites.

Leave a Reply

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