@h-background: #f5f5f5; // 背景色
@h-current-line: #efefef;
@h-selectioon: #d6d6d6;
@h-foreground: #4d4d4c;
@h-comment: #8e908c; // 注释颜色
@h-red: #c82829;
@h-orange: #f5871f; // 高亮色
@h-yellow: #eab700;
@h-green: #718c00;
@h-aqua: #3e999f;
@h-blue: #4271ae;
@h-purple: #8959a8;
@h-fs: @font-size;

.codeBlock() {
    position: relative;
    overflow-x: auto;
    padding: 20px;
    font-size: @h-fs;
    line-height: @h-fs*1.6;
    background: @h-background;
}

.line-numbers() {
    color: @primaryColor_2; // 行号色
    font-size: 0.85em;
}

.post-content {
    pre {
        .codeBlock();
        color: @h-foreground;

        code {
            background: none;
            color: @h-foreground;
        }

    }

    .highlight {
        .codeBlock();

        pre {
            margin: 0;
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 0;
        }

        .line {
            height: @h-fs*1.6;
            line-height: @h-fs*1.6;
        }

        table {
            margin: 0;
            width: auto;
        }

        td {
            border: none;
        }

        tr,
        td {
            border-collapse: collapse;
            padding: 0;
            margin: 0;
        }

        figcaption {
            font-size: 0.85em;
            color: @h-comment;
            line-height: 1em;
            margin-bottom: 1em;

            a {
                float: right
            }

        }

        .gutter pre {
            .line-numbers();
            text-align: right;
            padding-right: 20px;
        }


    }

    .gist {
        background: @h-background;

        tr, td {
            height: auto;
        }

        .gist-file {
            border: none;
            font-family: @font-code;

            .highlight {
                margin: 0;
                padding: 0;
                border: none;
            }

        }
        .gist-data {
            border: none;

            .line-numbers {
                .line-numbers();
                background: none;
                border: none;
                padding: 0 20px 0 0
            }

            .line-data {
                padding: 0 !important
            }

        }

        .gist-meta {
            background: @h-background;
            color: @h-comment;
            font: 0.85em @font-code;

            a {
                color: @primaryColor_2;
                font-weight: normal;

                &:hover {
                    text-decoration: underline
                }

            }

        }

    }

}

pre {
    .comment {
        color: @h-comment
    }

    .tag {
        color: @h-comment
    }

    .variable,
    .title,
    .type,
    .regexp,
    .ruby .constant,
    .xml .tag .title,
    .xml .pi,
    .xml .doctype,
    .html .doctype,
    .selector-pseudo,
    .css .id,
    .css .class,
    .css .pseudo,
    .tag .name {
        color: @h-red
    }

    .class,
    .number,
    .preprocessor,
    .built_in,
    .literal,
    .params,
    .constant {
        color: @h-orange
    }

    .attribute,
    .label,
    .ruby .class .title,
    .css .rules .attribute,
    .tag .attr {
        color: @h-green
    }

    .string,
    .value,
    .inheritance,
    .header,
    .ruby .symbol,
    .xml .cdata {
        color: @h-blue
    }

    .selector-tag,
    .css .hexcolor,
    .css .tag {
        color: @h-aqua
    }

    .function,
    .python .decorator,
    .python .title,
    .ruby .function .title,
    .ruby .title .keyword,
    .perl .sub,
    .javascript .title,
    .coffeescript .title {
        color: @h-blue
    }

    .selector-id,
    .selector-class,
    .keyword,
    .javascript .function {
        color: @h-purple
    }

}
@media screen and(max-width:760px) {
    .post-content .highlight {
        margin-left: -16px;
        margin-right: -16px;
        padding: 20px 16px;
    }
}