title: making code block in css look good
body: <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>