Integrating Code Syntax on a Blog or Website.

As a developer, one is used to seeing code snippets formatted in a specific way. Eg:

public class FormatCodeClass{
{
 public void showFormattedMethod()
 {
  System.out.println("Yay");
 }
}

Fortunately, most websites that support these snippets use some kind of library that can be used to render this easily. The one that I use on my blog is called Google Pretty Print. I'll be explaining how to integrate this into your website/Blogger.

Step 1) Add the library to your HTML above the <body> tag

Click on Themes, then on Edit HTML.

Search for the <body> tag and copy <script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/> above it.

Step 2) Add in your preferred CSS above the </head> tag

Step 3) Annotate your code snippets in your posts

In your post, go to the HTML add the below:

<pre class="prettyprint"><code class="language-java">YOUR CODE HERE</code></pre>

Note that the multiple languages are supported.

For more info on Google's Pretty Print, see their Github Repo.

Search This Blog

Faraaz Sulaiman - Software Engineer