improve rendering and overflow of code blocks

This commit is contained in:
Lephe 2021-07-11 10:09:08 +02:00
parent 7fc4424812
commit 2d6007ead4
Signed by: Lephenixnoir
GPG Key ID: 1BBA026E13FC0495
2 changed files with 23 additions and 3 deletions

View File

@ -24,21 +24,36 @@ table:not(.codehilitetable) td {
/* Code fragments */
table.codehilitetable {
background: var(--background);
border: none;
width: 100%;
/* This seems to be the only way to prevent the automatic table size
algorithm from assigning extreme widths when content overflows.
Fortunately the structure of the table is very simple, so we can afford to
set a fixed width on line numbers and move on */
table-layout: fixed;
}
table.codehilitetable tr {
background: unset;
table.codehilitetable tr:nth-child(even),
table.codehilitetable tr:nth-child(odd) {
background: none;
}
table.codehilitetable td {
padding: 0;
}
table.codehilitetable td.linenos {
width: 40px;
text-align: right;
}
table.codehilitetable td.linenos span {
padding-right: 8px;
}
table.codehilitetable td.code,
table.codehilitetable pre {
margin: 0;
width: 100%;
}
table.codehilitetable pre {
overflow-x: auto;
}
/* Forum and sub-forum listings */

View File

@ -117,3 +117,8 @@ div.editor-toolbar, div.CodeMirror {
--separator: #a0a0a0;
--text-disabled: #c0c0c0;
}
/* Extra style on top of the Pygments style */
table.codehilitetable td.linenos {
color: #808080;
}