How to style your code snippets in blogger post

Back>

You can add attributes such as title, font, black background etc. to your <pre></pre> code block with simple css.

Example

<pre class="prettyprint" data-lang="Insertion sort">public class Insertion
{
    public static void sort(int[] a)
    {
        int N = a.length;
        for (int i = 1; i &lt; N; i++)
            {
            for (int j = i; j &gt; 0 &amp;&amp; a[j] &lt; a[j - 1]; j--)
                exch(a, j, j-1);
        }
    }
    private static void exch(int[] a, int i, int j)
    {
        int tmp = a[i];
        a[i] = a[j];
        a[j] = tmp;
     }
}
</pre>
<style>
@import "https://cdn.rawgit.com/google/code-prettify/master/styles/desert.css";

@media (max-width: 650px) {
  body {
    width: 75%;
  }
}
@media (max-width: 430px) {
  body {
    width: 100%;
  }
}

code,
.code,
pre {
  font-family: "Source Code Pro";
  background: #292929;
  color: #fafafa;
  font-size: 16px;
  padding: 0;
  padding: 10px;
}
code:before,
.code:before,
pre:before {
  display: block;
  width: calc(100%);
  margin-left: -3px;
  margin-top: -3px;
  padding: 3px;
  text-transform: uppercase;
  content: attr(data-lang);
  background: #9baecf;
}
code .o,
.code .o,
pre .o {
  color: orange;
}
code .w,
.code .w,
pre .w {
  color: white;
}
</style>