mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/SyntaxHighlight_GeSHi
synced 2024-12-02 18:06:24 +00:00
006e6c6f0f
Make the wrapper div for code block create a block formatting context. This changes how floated content is laid out: previously the wrapper was taking 100% width and tried to wrap text around the floated content, now its width is limited by the width of floated content. This way absolutely positioned elements inside the code block (like the copy buttons) won't overlap the floated content. We've had this problem before when adding line numbers (T272853), and the workaround we used there won't work for the copy buttons. It also lets us remove the background-color override, previously needed to avoid it leaking outside the code block (T126010). Bug: T40932 Change-Id: I7f51ea78d7fcf07358c6ee45275b2bae2e1cbeb8
122 lines
2.8 KiB
Plaintext
122 lines
2.8 KiB
Plaintext
@import 'mediawiki.skin.variables.less';
|
|
|
|
.mw-highlight {
|
|
unicode-bidi: embed;
|
|
|
|
div& {
|
|
// Position absolutely positioned elements relative to this container.
|
|
position: relative;
|
|
// Create a block formatting context so that the code block's background and
|
|
// absolutely positioned elements inside it (line numbers, copy button)
|
|
// do not overlap floated elements outside of it (e.g. image thumbnails, infoboxes).
|
|
// See T126010, T272853, T40932#10211022.
|
|
display: flow-root;
|
|
// Move the margin from the nested pre, as the block formatting context prevents margin collapsing
|
|
margin: 1em 0;
|
|
}
|
|
|
|
pre {
|
|
margin: 0;
|
|
/* Use a more commonly found tab size of 4 (e.g. as used in CodeEditor)
|
|
instead of the browser-default value of 8 */
|
|
-moz-tab-size: 4;
|
|
tab-size: 4;
|
|
}
|
|
|
|
/* Avoid displaying double borders for nested 'code' elements.
|
|
Before we started using the 'code' tag for inline code snippets,
|
|
<code><syntaxhighlight enclose=none ...>...</syntaxhighlight></code>
|
|
was a common pattern. Continue supporting it in existing content. */
|
|
code code& {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
* Don't show a red border around syntax errors. This behavior may be useful
|
|
* in code editors, but it is not useful in a wiki environment, especially
|
|
* given the longstanding habit of using an existing, mostly-compatible lexer
|
|
* to highlight a language for which no lexer exists.
|
|
*/
|
|
.err {
|
|
border: 0;
|
|
}
|
|
|
|
/* Highlight background of whole lines, not just text in them */
|
|
.hll {
|
|
display: block;
|
|
}
|
|
|
|
&-lines pre,
|
|
.content &-lines pre { // Increase specificty over mobile selectors
|
|
|
|
.mw-content-ltr& {
|
|
/* @noflip */
|
|
padding-left: 3.5em;
|
|
/* @noflip */
|
|
box-shadow: inset 2.75em 0 0 @background-color-neutral;
|
|
|
|
.hll {
|
|
/* @noflip */
|
|
margin-left: -3.5em;
|
|
/* @noflip */
|
|
padding-left: 3.5em;
|
|
}
|
|
}
|
|
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
.mw-content-rtl& {
|
|
/* @noflip */
|
|
padding-right: 3.5em;
|
|
/* @noflip */
|
|
box-shadow: inset -2.75em 0 0 @background-color-neutral;
|
|
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
.hll {
|
|
/* @noflip */
|
|
margin-right: -3.5em;
|
|
/* @noflip */
|
|
padding-right: 3.5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.linenos {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
width: 2.75em;
|
|
background: none;
|
|
color: @color-placeholder;
|
|
white-space: pre;
|
|
|
|
.mw-content-ltr& {
|
|
/* @noflip */
|
|
left: 0;
|
|
/* @noflip */
|
|
text-align: right;
|
|
/* @noflip */
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.mw-content-rtl& {
|
|
/* @noflip */
|
|
right: 0;
|
|
/* @noflip */
|
|
text-align: left;
|
|
/* @noflip */
|
|
margin-left: 4px;
|
|
}
|
|
|
|
&::before {
|
|
content: attr( data-line );
|
|
}
|
|
}
|
|
|
|
a:hover .linenos,
|
|
.hll a .linenos {
|
|
color: @color-base--hover;
|
|
}
|
|
}
|