// extra bit of JS on top of pretty print
code = $('pre')
code.wrapInner('<code/>')
code.find('code').addClass('prettyprint linenums')
prettyPrint()

// sass
$baseColour: #1d1f21;

pre {
  width: 670px;
  padding: 0 0 0 30px;
  margin: 20px 0 20px 0;
  background: darken($baseColour, 5%);
  border-radius: 3px;
  overflow: hidden;

  @include single-box-shadow(white, 0, 1px, 0);
  @include transition-property(width);
  @include transition-duration(0.5s);
  @include transition-timing-function(ease-out);

  &:hover {
    width: 910px;
  }
}

ol.linenums {
  padding: 0;
  color: lighten($baseColour, 30%);
  list-style: none;
  counter-reset: section;
  @include single-text-shadow(rgba(0,0,0,0.3), 0, 1px, 0);

  li {
    counter-increment: section;
    padding-left: 10px;
    background: $baseColour;
    position: relative;

    &:before {
      width: 30px;
      height: 26px;
      line-height: 26px;
      font-size: 11px;
      content: counter(section);
      display: block;
      position: absolute;
      z-index: 1;
      top: 0;
      left: -30px;
      text-align: center;
    }

    &:hover {
      background: lighten($baseColour, 5%);
    }
  }
}

code {
  width: 100%;
  padding: 7px 0 7px 0;
  margin: 0;
  display: block;
  font-family: 'Inconsolata', 'Courier';
  background: $baseColour;
  border-left: solid 1px lighten($baseColour, 5%);
  border-radius: 3px;

  &:hover {
    // width: 930px;
  }
}

li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: transparent; }

.pun {
  color: #c5c8c6;
}

.pln, span.tag, .atn {
  color: #cc6253;
}

.lit {
  color: #d39461;
}

.com {
  color: #89beb7;
}

.kwd {
  color: #b393b9;
}

.str, .atv {
  color: #b4be6d;
}