making code block in css look good
<p>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):</p>

<p><a href="https://i.stack.imgur.com/qBosx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qBosx.png" alt="enter image description here"></a></p>

<p>I tried highlight.js but I think my scss block is overwriting the formatting:</p>

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

<p>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;
    /<em>border-radius: 5px;</em>/
  }</p>

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