jarv.is/assets/sass/components/_syntax.scss

@charset "UTF-8";

div#content {
  // all code
  code {
    font-family: $webfont-mono;
    font-size: 0.95em;
    letter-spacing: 0;
    page-break-inside: avoid;
  }

  // inline code in paragraphs (single tildes)
  p code {
    padding: 0 0.15em;
  }
}

// code fences
div.highlight {
  font-size: 0.975em;
  line-height: 1.7;
  max-width: 100%;
  overflow-x: scroll;
  object-fit: scale-down;
  margin: 1em 0;
  border: 1px solid;

  pre {
    padding-left: 1.7em;
  }

  // global table styles for line numbers and font styles
  .chroma {
    .lntable {
      border-spacing: 0;
      padding: 0;
      margin: 0;
      border: 0;
      width: auto;
      overflow: auto;
      display: block;
    }
    // columns
    .lntd {
      vertical-align: top;
      padding: 0;
      margin: 0;
      border: 0;
    }
    // line numbers
    .ln,
    .lnt {
      user-select: none;
    }
    .gh,
    .gi,
    .gu {
      font-weight: bold;
    }
    .kd,
    .nb,
    .nl,
    //.nv,
    .vc,
    .vg,
    .vi,
    .ge {
      font-style: italic;
    }
    .gl {
      text-decoration: underline;
    }
  }
}

/*! Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight */
body.light {
  div.highlight {
    color: #464646;
    background-color: #fdfdfd;
    border: 1px solid #d2d2d2;

    .chroma {
      .k,
      .kc,
      .kd,
      .kp,
      .kr,
      .kt,
      .no {
        color: #029cb9;
      }
      .na,
      .nc,
      .nd,
      .ne,
      .nf,
      .nx {
        color: #70a800;
      }
      .nt,
      .o,
      .ow,
      .kn {
        color: #f92672;
      }
      .l,
      .se,
      .m,
      .mb,
      .mf,
      .mh,
      .mi,
      .il,
      .mo {
        color: #ae81ff;
      }
      .ld,
      .s,
      .sa,
      .sb,
      .sc,
      .dl,
      .sd,
      .s2,
      .sh,
      .si,
      .sx,
      .sr,
      .s1,
      .ss {
        color: #d88200;
      }
      .c,
      .ch,
      .cm,
      .c1,
      .cs,
      .cp,
      .cpf {
        color: #75715e;
      }
      .lnt {
        color: #8a8a8a;
      }
    }
  }
}

/*! Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments */
body.dark {
  div.highlight {
    color: #dfdfdf;
    background-color: #1f1f1f;
    border: 1px solid #646464;

    .chroma {
      .k,
      .kc,
      .kd,
      .kp,
      .kr,
      .kt,
      .no {
        color: #3b9dd2;
      }
      .na,
      .nc,
      .nd,
      .ne,
      .nf,
      .nx {
        color: #78df55;
      }
      .nt,
      .o,
      .ow,
      .kn {
        color: #f95757;
      }
      .l,
      .se,
      .m,
      .mb,
      .mf,
      .mh,
      .mi,
      .il,
      .mo {
        color: #d588fb;
      }
      .ld,
      .s,
      .sa,
      .sb,
      .sc,
      .dl,
      .sd,
      .s2,
      .sh,
      .si,
      .sx,
      .sr,
      .s1,
      .ss {
        color: #fd992a;
      }
      .c,
      .ch,
      .cm,
      .c1,
      .cs,
      .cp,
      .cpf {
        color: #929292;
      }
      .lnt {
        color: #b1b1b1;
      }
    }
  }
}