Coder's Block v6 code styles

file.scss

@mixin code-wrap {
    border: 1px dashed #ccc;
    background-color: #f2f2f2;
}

code {
    font-family: 'Source Code Pro', monospace;
}

// inline code
:not(pre) > code {
    @include code-wrap;
    padding: 1px 4px;
    white-space: nowrap;
}

// block code
pre code {
    display: block;
    padding: 10px 20px;
    border-left: 5px solid #666;
    line-height: 1.4;
    overflow: auto;
}

// block code wrapper
.gatsby-highlight pre {
    @include code-wrap;
    margin: 0;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #62707F;
}

.token.punctuation {
    color: #6E6E6E;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #527A00;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #8D6535;
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #0072A3;
}

.token.function,
.token.class-name {
    color: #D2284A;
}

.token.regex,
.token.important,
.token.variable {
    color: #996300;
}

.token.italic,
.token.comment {
    font-style: italic;
}