A CodePen by Paul Reny. Code Blocks - Highlighting linear gradient background scales with the body font size, thanks to Lea Verou - vimeo.com/52882799

index.html

<h1>Code Blocks</h1>
<pre class="html"><code>
&lt;pre class=&quot;html&quot;&gt;&lt;code&gt;
  &lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        
    &lt;/body&gt;
  &lt;/html&gt;
&lt;/code&gt;&lt;/pre&gt;
</code></pre>

<pre class="css"><code>
.css:before { content: "CSS";  }
.html:before { content: "HTML"; }
.javascript:before { content: "JavaScript"; }
.jquery:before { content: "jQuery"; }
.php:before { content: "PHP"; }
.scss:before { content: "SCSS"; }
.sublime-snippet:before { content: "Sublime Snippet"; }
</code></pre>

script.js

// code blocks

// highlighting linear gradient background lines scale with the body font size, thanks to Lea Verou - vimeo.com/52882799

// scottnix.com

style.scss

@import "compass";
$background: #fdf6e3;
$accent-color: #657b83;
$body-font-size: 120%; // change value to show scaling

body { padding: 0 4em; background: #EEE8D5; font-size: $body-font-size; }
h1 { color: $accent-color; }


pre {
  position: relative;
  margin: 0 0 1.625em;
  white-space: pre;
  word-wrap: normal;
  &:before {
      position: absolute;
      top: 0;
      right: 0;
      padding-right: .5em;
      opacity: 1;
      color: $background;
      line-height: 1.5;
      cursor: default;
      font-size: 1em;
    }
    code {
      overflow-x: scroll;
      display: block;
      padding: 0 1em;
      background: $accent-color;
      @include background-image(linear-gradient(darken($accent-color, 2%) 50%, transparent 50%));
      background-size: 100% 3em;
      background-position: 0 1.5em;
      background-origin: content-box;
      color: $background;
      line-height: 1.5;
      font-size: 1em;
    }
}
.css:before { content: "CSS";  }
.html:before { content: "HTML"; }
.javascript:before { content: "JavaScript"; }
.jquery:before { content: "jQuery"; }
.php:before { content: "PHP"; }
.scss:before { content: "SCSS"; }
.sublime-snippet:before { content: "Sublime Snippet"; }