关于代码框样式

[weearc]

可否将code-blocks的inline-height属性去除？添加该属性以后非常影响美观度

[weearc]

/* syntax highlight customized*/

figure.highlight,
.codeblock {
    background: #f7f8f8;
    margin: 0px 0;
    color: #333;
    padding-bottom: 0;
}

figure.highlight table,
.codeblock table {
    display: block;
    width: 100%;
}

figure.highlight pre,
figure.highlight .gutter,
figure.highlight .code,
figure.highlight .tag,
.codeblock pre,
.codeblock .gutter,
.codeblock .code,
.codeblock .tag {
    background-color: inherit;
    font-family: Menlo, Consolas, monospace;
    border: none;
    padding: 0;
    margin: 0;
    cursor: text;
}

figure.highlight .gutter,
figure.highlight .code,
.codeblock .gutter,
.codeblock .code {
    vertical-align: none;
}

figure.highlight.plain .gutter,
.codeblock.plain .gutter {
    display: none;
}

figure.highlight figcaption,
.codeblock figcaption {
    font-size: 13px;
    padding: 0 15px 20px;
    margin: 0;
    background: #f7f8f8;
    color: #999999;
}

figure.highlight figcaption a,
.codeblock figcaption a {
    float: right;
    color: #00d042;
}

figure.highlight .gutter,
.codeblock .gutter {
    background: #efefef;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    padding-left: 15px;
    padding-right: 10px;
}

figure.highlight .code,
.codeblock .code {
    padding: 0.3em 15px 0.5em 1em;
    width: 100%;
}

figure.highlight .code pre,
.codeblock .code pre {
    max-width: 700px;
    overflow-x: auto;
    overflow-y: hidden;
}

figure.highlight .line,
.codeblock .line {
    height: 1.3em;
    font-size: 13px;
}

//////////////////////////////////////////////////////////////////////

[tufu9441]

能否展示一下具体区别呀？

[weearc]

@tufu9441 不好意思刚刚回复错了…

[weearc]

@tufu9441 更改效果可见这里主要区别还是更改了行距，行号对齐以及配色。由于部分浏览器的渲染问题会出现比如在行号部分出现滚动条的问题。

[tufu9441]

嗯嗯，我看到了你提交的PR，但是行号对齐的效果似乎并不好？

[weearc]

唔，确实是这样，看来还需要进一步调整

[weearc]

再一次做了修改，将vertical-align 属性修改了一下：

figure.highlight,
.codeblock {
    background: #f7f8f8;
    margin: 0px 0;
    color: #333;
    padding-bottom: 0;
}

figure.highlight table,
.codeblock table {
    display: block;
    width: 100%;
}

figure.highlight pre,
figure.highlight .gutter,
figure.highlight .code,
figure.highlight .tag,
.codeblock pre,
.codeblock .gutter,
.codeblock .code,
.codeblock .tag {
    background-color: inherit;
    font-family: Menlo, Consolas, monospace;
    border: none;
    padding: 0;
    margin: 0;
    cursor: text;
}

figure.highlight .gutter,
figure.highlight .code,
.codeblock .gutter,
.codeblock .code {
    vertical-align: super;
}

figure.highlight.plain .gutter,
.codeblock.plain .gutter {
    display: none;
}

figure.highlight figcaption,
.codeblock figcaption {
    font-size: 13px;
    padding: 0 15px 20px;
    margin: 0;
    background: #f7f8f8;
    color: #999999;
}

figure.highlight figcaption a,
.codeblock figcaption a {
    float: right;
    color: #00d042;
}

figure.highlight .gutter,
.codeblock .gutter {
    background: #efefef;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 15px;
    padding-right: 10px;
    text-align: right;
}

figure.highlight .code,
.codeblock .code {
    padding: 2vh 15px 2vh 1em;
    width: 100%;
}

figure.highlight .code pre,
.codeblock .code pre {
    max-width: 700px;
    overflow-x: auto;
    overflow-y: hidden;
}

figure.highlight .line,
.codeblock .line {
    height: 1.3em;
    font-size: 13px;
}

效果如下：链接