Display Code Snippets In Posts Without Plugins Or Prettyprint

By | December 19, 2015

Beautify Code Snippets

Displaying code snippets in your WordPress/Blogger blog posts or even your website can be a difficult task, because, you’ve got to make the computer understand that the code you are putting in the document is just for displaying and should not be executed. There are several ways of doing this which are very popular today.Irritated Of Using Plugins To Display Code Snippets

One of the OLD ways is to use plugins/widgets for blogs, which will allow you to display pieces of code in different types of fashion. This is the most used method, because it provides an easy solution. But the downfall is that the plugin/widget which you are using will add weight to your blog for nothing and also make it load slower because mostly it will load some external javascript or css file to display the code so beautifully as it claims to do. This will damage your pagescore. :? :? :? Also, many people prefer not to use plugins for doing things which can be done without them.

Another OLD way is to use Google Code Prettify Tool all by yourself, which although will make you self-sufficient in displaying code snippets, but at the same time slow down your site as it will still require you to load javascript and css files. I’ve got to agree that this ‘prettyprint’ tool or this syntax highlighter displays code very beautifully, but it is nowhere as quick as well as convenient as the method that I am going to recommend to you for displaying code snippets. There may be other methods also for showing codes easily also, but I highly doubt that after knowing my way of doing it you’ll switch to any other method! :mrgreen: :mrgreen: :mrgreen:

 


DISPLAYING CODE SNIPPETS BY CONVERTING THEM INTO HTML (MY RECOMMENDED WAY!):

The best way to display code snippets anywhere (be it on a blog post, on a webpage, or even in an email!) is to convert them into pretty-printed HTML (Hyper Text Markup Language) which will then be embeddable in any place that supports HTML.

The steps are simple.

I do not need to explain you how to do it as it just involves copying and pasting your code into a text box on HILITE.ME website, copy the output HTML code and put it wherever you want to display your code.

That’s right fellas! Simple as that. ;) ;) ;)

You have the following options available on www.hilite.me:

  • Language (you have to select the language in which your code is written so that the code’s indentation, highlighting, coloring, etc. is done appropriately)
  • Style (you can select that style you want to apply to the code snippet you just pasted from among a vast variety of styles like colorful, autumn, tango, etc.)
  • Line numbers (You can choose if you want to display line numbers with the code or not. Generally, using line numbers is recommended if your code is very long. The line number will not be selected while selecting the displayed code)
  • CSS (if the above options weren’t enough, you can modify the styling of the displayed code yourself)

Displaying Code Snippets In Blog Posts Or Websites In HTML Format

 


Here is an example of the code snippet being displayed in the post after being converted into HTML format:

import java.text.DateFormatSymbols;
 
public class NamesOfMonths
{
    public static void main(String args[])
    {
 
        DateFormatSymbols dateFormatSymbols = new DateFormatSymbols();
        String[] m = dateFormatSymbols.getShortMonths();
 
        for (int d = 0; d < months.length; d++)
        {
            String m = m[d];
            System.out.println("Months : " +m);
        }
    }
}

 


I really hope you loved this method of displaying codes on your blog posts/websites. Do know that I myself use this method only instead of using other syntax highlighters. You can check out “How To Enable Gzip On Your Website Or Blog” post if you really want to check whether or not I use this method. Comment below if you know any other methods that you are using currently or will be using even after reading this post! Also, share this post with your webmaster and blogging friends if you want to make the internet a better place. :) :) :)

Thank you.

LINK TO THIS POST:

<a href="https://www.theadarshmehta.in/blog/display-code-snippets-in-posts-without-plugins-or-prettyprint/2015/12">Display Code Snippets In Posts Without Plugins Or Prettyprint</a>

Spread the love

Leave a Reply

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