Markdown Code Styling

• Edit your MarkDown content with your preferred editor.
• Copy the resulted HTML content (the content of the body tag) as the blog HTML content
• Add at the beginning the following lines:

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/solarized_light.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<style>

:not(pre)>code{
  margin: 0 0px;
  padding: 0px 5px;
  border: 1px solid #eaeaea;
  color:RoyalBlue;
  background-color: #f8f8f8;
  border-radius: 3px;

}
.hljs{
background-color: #f8f8f8;
font-weight:bold;
border: 2px solid #eaeaea;
}

body, pre {
font-family: Consolas, Arial, Tahoma, Helvetica, FreeSans, sans-serif;

}
body{
font-size: 14px;
  }
pre{
font-size: 12px;

  }
h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: 28px;
  color: #000;
}
h2 {
  font-size: 24px;
  border-bottom: 1px solid #ccc;
  color: #000;
}
h3 {
  font-size: 18px;
}
h4 {
  font-size: 16px;
}
h5 {
  font-size: 14px;
}
h6 {
  color: #777;
  font-size: 14px;
}

</style>

Go to https://cdnjs.com/libraries/highlight.js to pick-up your preferred colouring scheme

As an alternative you can paste the above snippet before </head> tag in blog template.