forked from icylogic/maupassant-hexo
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
关于代码框样式 #447
Comments
/* 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 不好意思刚刚回复错了… |
唔,确实是这样,看来还需要进一步调整 |
再一次做了修改,将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;
} 效果如下:链接 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
可否将code-blocks的inline-height属性去除?添加该属性以后非常影响美观度
The text was updated successfully, but these errors were encountered: