Best Ways to Add Code Snippet in Blogger

If you are having a blog which deals with programming, you would often come across places where you would like to share a code snippet as part of your blog post. If you are directly pasting the code as part of your post, it would be difficult for users to navigate and follow. You may have tried making the code to be in italics and in a different color, which helps a bit, but not perfect.

The perfect way would be to have the code displayed to the user in the exact same way it gets displayed in your IDE - with syntax highlighting. There are multiple ways to achieve this and I will explain a few of them and what my preferred method is.

Table of Contents

1. Special Copy Paste
2. GitHub Gist
3. Online Formatting Tools
4. GitHub Gist + NoScript
   

1. Special Copy Paste

Yes, the good old copy paste! 😀 If you are directly copying from an IDE like Android Studio, the code gets copied along with the format, which you can directly paste in blogger.

Here is a code snippet generated by copy pasting code from Android Studio:

fun main(args: Array<String>) {
    //Print Hello World
    println("Hello World!")
}

If you are using Notepad++, you can install the plugin "NppExport" using which you can do the same. Select the code snippet you want, in the menu choose Plugins -> NppExport -> Copy All Formats to Clipboard.

Here is a code snippet generated from Notepad++ using NppExport:

#include <stdio.h> int main() { //Print Hello World to Console printf("Hello, World!"); return 0; }

 

This would be the quickest and easiest way but the downside is, the code snippet won't wrap around or have scroll bars even when it extends beyond the visible screen - this would normally be okay when user is viewing from a PC but would be a problem when user is viewing from mobile.

2. GitHub Gist

You can create GitHub Gists with your code snippets, which can then be embedded in your blog post. Once you have created your gist, you will have the embed option, which would have a single line script like below:

<script src="https://gist.github.com/KarthikAbiram/dc86788f05ca4116145250c2b32a9f6e.js"></script>

After copying the embed script, switch to "HTML View" in blogger post editor and paste it. This would then appear as below, when the post is published (this won't be visible in the Compose view of the post editor. Use the Preview option to see how it would be look like).

This is pretty neat with good syntax highlighting and it doesn't have the scrollbar issue that the previous method had. This is almost perfect but for one downside - the code is not search engine friendly. Since this is based on javascript, when search engine crawls your page, it won't see the code snippet 😑

3. Online Formatting Tools

There are multiple online tools which converts your code into syntax highlighted HTML formatted text, which you can paste in blogger. My favorite among these tools is HiLite.me, which has few useful options like

1. Multiple Style options to choose from
   
2. Enable/Disable Line Numbers
3. Custom CSS Styling

After copying the generated HTML content, switch to "HTML View" in blogger post editor and paste it at the desired location.

Here is a sample code generated using HiLite.me:

fun main(args: Array<String>) {
    //Print Hello World
    println("Hello World!")
}

4. Github Gist + NoScript 

I personally liked Githib gist embed option, but I didn't want the code to be missed by the search engine. Here is a search engine simulator tool which shows how your web page is viewed when crawled by search engines. If you had just included the Github gist, it won't show up in the above simulation.

This is where the NoScript tag comes into play 🙌 The NoScript tag basically gets invoked in instances where the script tag was not invoked, like in the case of search engine crawling. 

After the Github gist embed script, you paste the HTML formatted code snippet generated by HiLite.me, between the tags <noscript> and </noscript>. Here is an example script:

<script src="https://gist.github.com/KarthikAbiram/dc86788f05ca4116145250c2b32a9f6e.js"></script>
<noscript>
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">fun</span> <span style="color: #00aa00">main</span>(args: Array&lt;String&gt;) {
    <span style="color: #aaaaaa; font-style: italic">//Print Hello World</span>
    println(<span style="color: #aa5500">&quot;Hello World!&quot;</span>)
}
</pre></div>
</noscript>

This would then appear to the user as:

Now your code snippet is both user friendly and search engine crawling friendly.😎

So , which method do you like? Do let me know in the comments.

Other Options

1. Using HighlightJS Library