Updated Code Block Styling

Really didn’t like the look of code on the previous post. This has been on the todo list and I just went ahead and made it happen today. Now code is styled using rouge and monokai styling.

Here is an example of html formatting with line numbers.

1
<marquee>Hello World!</marquee>

Here is a result of the impressive code.

This was implemented by updating the _config.yml for the site like so.

1
2
3
4
markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

With the inclusion of styling css in the header.

1
<link rel="stylesheet" href="/assets/css/syntax_monokai.css" media="print" onload="this.onload=null;this.removeAttribute('media');" fetchpriority="low">

Not a lot to get it readable which is nice. I’m done with same day changes now I think.

This is day 13 of #100DaysToOffload.