Two best ways to write code snippets in Blogger

In this blog post, I present two approaches to write code snippets in Blogger platform. The advantages and disadvantages of each method are also discussed.

The first method is to create a CSS class for code snippets and apply this CSS class to your blog. You first go to Blogger Dashboard -> Theme -> Customise -> Advanced -> Add CSS, then put the following CSS code into the Add Custom CSS text box.

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 5px;

color: #000000; font: 12px 'Courier New', Courier, monospace; line-height: 16px;

margin: 5px 0px 5px 0px; padding: 0px 5px 5px 0px; max-height: 200px; min-height: 16px;

overflow: scroll; white-space: nowrap; width: 98%; }.code:hover { background-repeat:no-repeat; }

Finally, you click on Apply to Blog button. From now on, you can write your code snippets in between the following div tag. The above and below code snippets themselves are shown using this method.

<div class='code'>

</div>

The second method is to host your code snippet as a public in GIST in gist.github.com if you have a Github account. Then you can link it back to your blog post using the generated embed script that looks similar to the following one.

<script src="https://gist.github.com/catcancode/994366af60f7b2d1d66dd3eb05b35a7e.js"></script>

The result of the above embed script is shown below.

Overall, the first method is convenient and suitable for small code snippets. You do not need to get out of your Blogger post composing environment just to show a small code snippet using method one. On the other hand, the second method requires you to have a Github account and you need to create a new gist for any new code snippet that you want to include in your blog post. However, the second method produces syntax-aware highlighted code for many languages. Therefore, if you want to show long code snippets, the second method will produce more readable code.
Because of the above reasons, I still use both methods of showing code snippets in my Blogger post depending on different situations.