making code block in css look good

Question

I am trying to find the right css required to make my code block look good in my Jekyll powered Github Pages blog. I want it the code to look something like this (I'm using kramdown with syntax highlighting):

I tried highlight.js but I think my scss block is overwriting the formatting:

pre { background-color: #D1D1D0; overflow: auto; font-family: 'Monaco', monospace; padding: 0 1em; }

code { font-family: Monaco, monospace; font-size: $base-font-size; line-height: 100%; background-color: #eee; padding: 0.2em; letter-spacing: -0.05em; word-break: normal; /border-radius: 5px;/ }

pre code { border: none; background: none; font-size: $base-font-size * 0.875; line-height: 1em; letter-spacing: normal; word-break: break-all; }

Answer 1

The easiest way to do that, I think, is to simply include highlight.js in your page.

Check out the Highlight.js demo to see what style you want to use.
I guess that the Monokai theme would be the best match to that screenshot of yours.

Highlight.js does not require you to alter any markup because it (usually) works in automatic mode.

<link rel="stylesheet" href="/path/to/styles/default.css"/>
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

After the insertion of the above code in the appropriate places, all your code blocks will be highlighted.

Provided that they are rendered like this:

<pre><code>
    // code here
</code></pre>

But that is the standard way of doing it, so I guess that the Jekyll thingie spits that out.

Having recommended that, I wonder if Jekyll doesn't ship with a highlighter of it's own? It probably does. Or not. ;)